City of Ghent Style Guide

Changelog

The changelog is available through our GitHub repo or on our changelog page.

SASS documentation (for contributors)

You can find the SASS docs here.

Questions?

You can join us on Slack at UX/UI Ghent.

Implementing the City of Ghent Style Guide in your own project

This City of Ghent 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.

Example implementations in open source projects are:

• Drupal: drupal_theme_gent-base
• Vue: vue_site_lod-visualisation
• Nuxt: nuxt_site_verwerkingsregister

Have a look at other projects using the City of Ghent Style Guide on github.

TL;DR

1. Go to your project folder and run npm init or yarn init to create a package.json file. (if you already have a package.json file proceed to step 2).

2. Run npm install gent_styleguide or yarn add gent_styleguide.

3. Make sure you add the following lines to your sass compiler.

   includePaths: [
    'node_modules/breakpoint-sass/stylesheets',
    'node_modules/susy/sass'
   ]

Now you can import the main.scss or main_cli.scss file, set the $styleguide-dir variable and run your own gulp command to compile the SASS into a working CSS file.

$styleguide-dir: '../../../node_modules/gent_styleguide/build/styleguide' !default;
@import "sass/main_cli";

Running the City of Ghent Style Guide in development mode

# Install dependencies
yarn install

# Compile all components.
# This might take a while.
gulp compile

# Start the fractal site at localhost:3000
# and watch for changes.
gulp