Getting Started

This is a distilled version of the other guides in this section and should give a short overview on how to include the George Design System (short GDS) in a fresh project. The information of these guides can also be found in the project’s README.md.

GDS includes and consists of:

Documentation of styling rules and and a growing set of components
A set of pre-compiled and auto-prefixed CSS files ready to include
A library of React.js components, showcased through Storybook
A live sandbox called Playroom with all provided components ready to use

Additionally, the extended parts of the GDS ecosystem are:

A set of packages on npm
A repository holding all of GDS code on Github
A project holding all of GDS tickets on Jira

Requesting access

To reach npm, Github, or Jira, you have to request access through the George Labs Ticket System.

Installation from npm

With access to the package on npm it can be added to the project as a dependency with a few commands:

bashnpm adduser --scope=@george-labs.com
npm add @george-labs.com/design-system

GDS relies on React and george-assets as peer dependencies:

bashnpm add react react-dom
npm add @george-labs.com/george-assets

For more details on installation see the matching section in the Installation Guide.

Usage in React projects

For GDS to work properly, your app needs to be wrapped with a set of Providers in addition to importing a few pre-compiled stylesheets:

jsximport React from 'react';
import { LanguageProvider, ThemeProvider } from '@george-labs.com/design-system';
import { MyApp } from './app';
import '@george-labs.com/design-system/dist/gds-main.min.css'; // or gds-store.min.css
import '@george-labs.com/design-system/dist/gds-components.min.css';

ReactDOM.render(
    <LanguageProvider locale="en" strings={{ common: { close: 'Close' }, ... }}>
        <ThemeProvider theme={ThemeProvider.THEME.BS4}>
            <MyApp />
        </ThemeProvider>
    </LanguageProvider>,
    document.getElementById('app'),
);

For more details on this see the matching section in the Installation Guide.

For detailed documentation on how to provide strings in GDS please head on to LanguageProvider.

Usage in other projects

In case your project is being developed with a framework other than React, it is still possible to make use of GDS’ styles through compiled stylesheets in the npm package.

To enable the styles on any part of a page, add the classes g-bootstrap and g-bs4 to a high level parent container or even the <body>. To use the Store theme, please use g-store instead of g-bs4.

html<link
  type="text/css"
  rel="stylesheet"
  href="@george-labs.com/design-system/dist/gds-main.min.css"
/>
<div class="g-bootstrap g-bs4">
  <p>GDS Main Theme</p>
</div>

html<link
  type="text/css"
  rel="stylesheet"
  href="@george-labs.com/design-system/dist/gds-store.min.css"
/>
<div class="g-bootstrap g-store">
  <p>GDS Store Theme</p>
</div>

HINT Please adjust the paths to your project setup, this example just uses direct paths to the location of the relevant files in the npm package.