Fœhn - VD.ch

This styleguide has been designed to serve the purpose of the website vd.ch.

What is a styleguide ?

According to wikipedia, a styleguide is:
A set of standards for the writing and design of documents, either for general use or for a specific publication, organization, or field. (It is often called a style sheet, though that term has other meanings.) A style guide establishes and enforces style to improve communication.


This styleguide is extensively based on the framework Bootstrap version 4 using the preprocessor SASS. Further information can be fetched on the official documentation

Content & hierarchy

All the components are organized accordingly to the atomic design philosophy by Brad Frost.
You can navigate through all theses components with the help of the left side navigation bar.

Additionaly, a few example pages are designed to give an overview of all these elements integrated together


Each component are listed with a quick documentation box and an example of the displayed element with his source code. It should give you all the infos to apply this design guideline to any web tools you seek to develop

More technical infos (to use or contribute to the styleguide) are referenced on the README file of the repo FOEHN

Getting started

Install as node dependency

With Yarn:

$ yarn add https://github.com/DSI-VD/foehn


$ yarn add git+ssh://git@git.etat-de-vaud.ch:typo3/foehn

or NPM:

$ npm install https://github.com/DSI-VD/foehn


$ npm install git+ssh://git@git.etat-de-vaud.ch:typo3/foehn

How to include

Put this in your <head/> tag:

<link rel="stylesheet" href="assets/styles/main.css">

<script defer src="assets/scripts/fontawesome-all.js"></script>

Put this just before the closing </body> tag:

<script src="assets/scripts/jquery.slim.min.js"></script>
<script src="assets/scripts/popper.min.js"></script>
<script src="assets/scripts/bootstrap.min.js"></script>
<script src="assets/scripts/foehn-scripts--footer.js"></script>