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 are stored
  • here!
    • 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

  • here!
  • All pattern in a CSV-file (with links)


    • Contact

    Kommunikation Kanton Bern
    Staatskanzlei /
    Communicationdu canton de Berne
    Chancellerie d’Etat
    Postgasse 68
    3000 Bern 8

    Telefon: +41 31 633 75 91
    www.be.ch/kommunikation