Swiss Admin web guidelines

• About Accessibility
• How to use the styleguide in your project?

Summary

• The Swiss Federal Administration on the Internet
• Contribution
• Grid System
• Print Classes
• Styleguide Theme
• FAQ
• Known Issues

The Confederation Web Guidelines define the design specifications for the presentation of the Swiss Federal Administration on the Internet and are binding for all websites within the domain admin.ch. These guidelines specify how the websites of the Federal authorities have to look and how they should behave. At the same time they give the government departments and public offices the necessary flexibility to be able to optimize their online communications to the requirements of their specific business purposes.

These design regulations allow web designers to create up-to-date, user-friendly and universally accessible websites. They define the compulsory corporate design elements as well as the obligatory navigation and content modules. Furthermore, they introduce a series of elements that can be used directly and, if required, expanded upon or further developed. The display presentation has been optimized for web browsers on both desktop computers and laptops as well as on tablets and smartphones.

The Confederation Web Guidelines are aimed at both internal Federal project managers and third party service providers. They offer project managers an overview of the design specifications. Developer teams can use the templates and elements directly. They have been created using standard HTML code (as of 2013) and can be used with CSS and JavaScript style sheets.

The design specifications described for use on the Internet or in intranets can also be used for other digital channels, such as for the creation of apps.

The latest release of the styleguide is available here: http://swiss.github.io/styleguide/

If you want to collaborate on the repo, go to this URL: https://github.com/swiss/styleguide

The Swiss Federal Administration on the Internet

Styleguide

The styleguide is located in the /styleguide directory. You can open /styleguide/index.html directly in your browser. (If you can't find it, you have to build all the assets).

Installation

There are several ways to get started:

• Install with bower bower install swiss-styleguide
• Use the provided build. Download the latest release and include all the built assets in your project.
• Clone the repo git clone https://github.com/antistatique/Swiss-Admin-web-guidelines.git

Contribution (development tools)

This is not needed to use the styleguide, only if you want to modify it to fix some bugs and contribute.

Installation on OSX/Unix

We use Gulp.js to run tasks and build our styleguide with Hologram.

Make sure you have Node.js installed.

Install all the dependencies you need:

$ npm install -g gulp
$ npm install
$ bower install

Install Hologram from the Gemfile (for version > 1.1.0):

$ bundle

Browser-sync is automatically set up and will allow you to make changes and see them in real time.

Installation on Windows

This is the not the recommended OS. If you have a choice, use OS X. We are therefore not perfectly sure of the process below, please report or make a PR to make this better.

Warning: This was tested on the Windows PowerShell but should work on any shell that support UTF8.

• Download and Install Ruby

• Install DevKit. Follow those instructions.

• Install Ruby & DevKit

• Configure DevKit

• Download and install Node.js

• Install Git for Windows (recommended) or alternatively Github for Windows

Then install SASS, Hologram & Bundle

$ gem install sass bundle hologram

Go in the project directory and install the dependencies:

C:\\projectPath> npm install gulp -g
C:\\projectPath> npm install
C:\\projectPath> node_module\.bin\bower install

Finally you will have to rebuild some gems:

$ gem uninstal yajl-ruby
$ gem install yajl-ruby --version=1.1.0 --platform=ruby

Build the styleguide

First run gulp:

$ gulp

Run gulp during development process: (with watch tasks and browser-sync)

$ gulp serve

Grid System

The grid system works exactly the same way as Bootstrap, no changes were made. Please refer to their documentation for more details.

Print classes

You can add print specific classes by using the ones Bootstrap made.

Classes available: .visible-print-block, .visible-print-inline, .visible-print-inline-block, .hidden-print.

Please refer to their documentation for more details.

Styleguide Theme

The stylguide theme is in styleguide-theme. It's a theme for Trulia's Hologram. It was based on Cortana.

How is it included?

The hologram_config.yml has a reference to the styleguide theme:

source: ./path/to/your/source
destination: ./path/to/output
documentation_assets: ./path/to/theme

Build the Styleguide Theme

The theme has his own gulpfile (for the moment). So you have to do the following command to build the assets then generate the styleguide with $ hologram:

$ cd styleguide-theme
$ gulp

FAQ

Why are there a lot of !important in the CSS?

The theme is used only to present all the styles. It's not part of the styleguide. All the !importants were added to avoid conflict with other styles, for a better presentation.

When I try to build with $ gulp I have the following error: Syntax error: Invalid US-ASCII character "\xC3"

The workaround is to force UTF8 by running:

$ LC_ALL="en_US.UTF-8" gulp

Or you can edit your .zshrc file with the following configuration:

export LC_ALL=en_US.UTF-8
export LANG=en_US.UTF-8
export LANGUAGE=en_US.UTF-8

Error encoding ruby 2.1.0 with Windows 7 x64

Edit file : C:\Ruby21-64\lib\ruby\2.1.0\registry.rb

Add line 70 == LOCALE = Encoding::UTF_8

Error SSL certificates rubygems 2.2.2 with Windows 7 x64

Download rubygems 2.2.3

C:\>gem install --local C:\rubygems-update-2.2.3.gem
C:\>update_rubygems --no-ri --no-rdoc

Known issues

@font-face + Cache-Control/Pragma:

There is a known issue with Internet Explorer when loading the page over HTTPS with Cache-Control or Pragma headers set. Disable cache control on fonts to fix it (refer to issue #359 for more information):

<FilesMatch "\.(eot|otf|woff|ttf)$">
   Header unset Cache-Control
   Header unset Pragma
</FilesMatch>