Helsingborg Stad

Styleguide

Version 2.0

The style guide is intended for websites within Helsingborgs stad and others who use our platform. The guide provides examples, markup and themes for our standardized components. The Helsingborg Styleguide is a flexible and minimalistic component-based framework built in the BEM standard & designed around the Atomic Design principle.


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Card/Card.php on line 42

Components

A web for everyone

The component library is a collection of robust views with built-in logic to handle common scenarios.


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Card/Card.php on line 42

Atomic Design

Implemented standards

The Atomic Design System give structure to the components by organising them in three different levels: Atoms, Molecules and Organisms.


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Card/Card.php on line 42

Utilities

Behind the screen

Swiftly create new apperance of anything in the styleguide, or even create a new component. Each utility has their corresponding mixin.


Notice: Undefined variable: hasPlaceholder in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Card/Card.php on line 42

Accesability

And usability

One of the main focus of this styleguide is usability. Read more of our guidelines here.