This styleguide has been designed to serve the purpose of the website vd.ch.
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
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
$ yarn add https://github.com/DSI-VD/foehn
$ yarn add git+ssh://email@example.com:typo3/foehn
$ npm install https://github.com/DSI-VD/foehn
$ npm install git+ssh://firstname.lastname@example.org:typo3/foehn
Put this in your
<link rel="stylesheet" href="assets/styles/main.css"> <script defer src="assets/scripts/fontawesome-all.js"></script>
Put this just before the closing
<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>