This styleguide and the atomic design system behind is built «modular» from components with https://atomic-kitchen.com. Based on CSS specifications (styles) and atoms (these are the smallest content carriers) it is assembled into molecules and organisms, which in turn are combined into complete page-templates.
Important notices
Javascript
In order to reproduce a real «Look & Feel» of the later applications, we used Javascript based on «JQuery» and «Foundation 6» in some places (Accordions, Sticky Header, Jump-to-Top functionality ...) - less as a code template, but rather to show the complex connections within the responsive functionality.
Roboto - the new digital family typeface of Kanton Bern
Roboto is a well readable and freely available, modern open-source font and the Kanton Bern may store and use it free of charge on its web servers.
The web-fonts for embedding can be downloaded in the password protected
download area
Note: For privacy reasons, please use these open source fonts, which you store on your server, and not the Google Web font API, because when you access the API, personal information is transmitted to Google.
The fonts are embedded with following CODE
Note: If necessary, adjust the paths to the font directory in the code to your environment.
Download complete styleguide
These complete styleguide with all files (all pattern in CSS, JS and HTML) are available as ZIP-archieve in the password protected:
download area.
Access can be requested via:
Kommunikation Kanton Bern
Staatskanzlei /
Communicationdu canton de Berne
Chancellerie d’Etat
Postgasse 68
3000 Bern 8
Phone: +41 31 633 75 91
E-Mail & Kontaktform:
www.be.ch/kommunikation