This style guide contains the SASS library and needed assets to be able to style a web application in the corporate identity for the city of Ghent..

To contribute to the style guide please refer to the contributing document

• A major overhaul with an entirely new style for all components.
• Probably a full CSS grid implementation throughout all the style guide components.
• We will probably drop jQuery in favor for native Javascript or another.

If you are building something for the City of Ghent (Stad Gent) or Digipolis, you can contact the web team at Digipolis or open an issue here to get the necessary licenses thar are required for your project. For more info on what licenses you need see below.

The Expressway font is a paying font used by the style guide of the City of Ghent. It needs to be included through Typekit.

It is important to note that anyone that wants to use this style guide or fork this repository for commercial purposes, should pay for a license!

When installing this package, you will get a directory structure like this.

.
├── CHANGELOG.md
├── LICENSE
├── README.md
├── build
│   └── styleguide
│       └── sass
└── package.json

The build directory contains all SASS source files and all asset files needed to be able to style a web application in the corporate identity for the city of Ghent..

This style guide aims to be technology independent. This means you should be able to use it inside your project with any technology you want. It utilizes SASS to style its components, so you will have to use that in your project.

After installing the style guide through npm install gent_styleguide you''ll get a folder structure like this:

.
├── node_modules
│   └── gent_styleguide
│   └── breakpoint-sass
├── package-lock.json
└── package.json

Now, to use the style guide SASS partials you just need to import them into your main SASS file at the top so they get loaded before your own code.

@import 'node_modules/gent_styleguide/build/sass/00-settings/reset';
@import 'node_modules/gent_styleguide/build/sass/00-settings/vars';
@import 'node_modules/gent_styleguide/build/sass/01-mixins/**/*';
@import 'node_modules/gent_styleguide/build/sass/11-base/**/*';
@import 'node_modules/gent_styleguide/build/sass/21-atoms/**/*';
@import 'node_modules/gent_styleguide/build/sass/31-molecules/**/*';
@import 'node_modules/gent_styleguide/build/sass/41-organisms/**/*';

Note: we use this structure to allow you to override anything you wish in your own custom project. The way to do this, is to add the imports above to your main SASS file and add imports of your own overriding files in between.

If you don't need to be able to change the molecules for your project and instead just want to import the style guide and use it as it is, you can use the main.scss file instead of using the following approach.

Example:

@import 'node_modules/gent_styleguide/build/sass/00-settings/reset';
@import 'node_modules/gent_styleguide/build/sass/00-settings/vars';
@import '/sass/00-vars-overrides/**/*';
@import 'node_modules/gent_styleguide/build/sass/01-mixins/**/*';
@import '/sass/01-mixins-overrides/**/*';
@import 'node_modules/gent_styleguide/build/sass/11-base/**/*';
@import '/sass/11-base-overrides/**/*';
@import 'node_modules/gent_styleguide/build/sass/21-atoms/**/*';
@import '/sass/21-atom-overrides/**/*';
@import 'node_modules/gent_styleguide/build/sass/31-molecules/**/*';
@import '/sass/31-molecule-overrides/**/*';
@import 'node_modules/gent_styleguide/build/sass/41-organisms/**/*';
@import '/sass/41-organism-overrides/**/*';

Note: When using the style guide you will need to add a few dependencies as an includePath inside your gulpfile.js

Example:

    .pipe(sass({
      outputStyle: 'compressed',
      includePaths: [
        'node_modules/breakpoint-sass/stylesheets',
        'node_modules/susy/sass'
      ]
    })).on('error', sass.logError)

This includePaths path may vary depending on your setup!

Fonts are loaded directly in the sass files. To prevent FOUT, we advise using webfontLoader.

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Fira Sans:400,600,700']
    }
  });
</script>

We provide a main_cli.scss file that is essentially the same as main.scss, but includes all SASS partials the style guide needs without SASS globbing.

We recommend using the main_cli.scss file only when you need to support Angular CLI.