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..
- 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.
- General changes and fixes to the style guide.
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 breakpoint-sass as an includePath inside your gulpfile.js
Example:
.pipe(sass({
outputStyle: 'compressed',
includePaths: ['node_modules/breakpoint-sass/stylesheets']
})).on('error', sass.logError)
This includePaths path may vary depending on your setup!
You need to make sure the Expressway font is included in your project somehow. This would be done by including the Typescript script in your project and requesting a license / Typekit kit from the web team at Digipolis.
Example:
<script>
(function(d) {
var config = {
kitId: 'kgt4wbp',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+"wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+="wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
So in this example you would need to change the kitId
to the ID you got from
the web team of Digipolis.
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.