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 also needs a few peer dependencies that need to be added in case they are not already part of your project:

bashnpm add react react-dom moment
npm add react-dates # Optional if you want to use DateInput/DateRangeInput

For more details on this see the matchin 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 'react-dates/lib/css/_datepicker.css'; // Optional if you want to use DateInput/DateRangeInput
import '@george-labs.com/design-system/dist/bootstrap.min.css';
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/bootstrap.min.css"
/>
<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/bootstrap.min.css"
/>
<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.