City of Ghent Style Guide

⚠️️ NOTE VERSION 6

Version 6 is in a far progressed beta stage. Keep in mind minor changes can occur in future updates. Check the Github page mentioned below for updates until the first stable version 6.

Versioning and releases

We plan biannual releases, please see our versioning and releases page for details.
The changelog is available through our GitHub repo or on our changelog page.

Questions?

Please contact us by email.

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 (v5/v6 compatible)
Vue: vue_site_lod-visualisation (v5 compatible)
Nuxt: nuxt_site_verwerkingsregister (v5 compatible)

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

TL;DR

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).
Run npm install gent_styleguide or yarn add gent_styleguide.
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";

SASS documentation (for contributors)

You can find the SASS docs here.

Running the City of Ghent Style Guide in development mode

# Install dependencies
npm install

# Compile all components.
# This might take a while.
npm run build

# Start the fractal site at localhost:3000
# and watch for changes.
npm run start