City of Oslo Design System

Published in

Oslobeta

4 min readOct 7, 2019

For a while now, the City of Oslo has been working on a design system for use in making web sites, pamphlets, signs etc. It comes with a set of components, a font, icons and a set of design-guidelines on how to use it.

The guidelines can be found on designmanual.oslo.kommune.no, and the web components can be found on styleguide.oslo.kommune.no.
The system is still in its early stages but is used in both miljohovedstaden.no and on the redesigned oslo.kommune.no.

In this article I will show you how to get the styleguide up and running, both in an existing project or if you just want to check it out.

If you just want a little environment for testing out the styleguide we need to do some setup. There is no CDN for the styleguide at the moment so we need an environment that can compile SASS.
We also need to install the styleguide and minireset.css, as well as that we need to set a variable to the location of the fonts in the styleguide. A really simple way to get an environment with SASS compilation is to use the parcel bundler.

mkdir my-styleguide-project
cd my-styleguide-project
npm init -y
npm install parcel-bundler minireset.css git+ssh://git@github.com/oslokommune/styleguide.git

Then make an index.html and add the following:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Hello Styleguide</title>
   <link rel="stylesheet" href="./index.sass">
 </head>
 <body>
  <div class="osg-expand-box osg-v-open ">
      <div class="osg-expand-box__title-line">
          <div class="osg-expand-box__title-line-text">
            Hello Styleguide
          </div>
          <button class="osg-button osg-v-default osg-button--circle osg-button--red" aria-label="expand-button" aria-expanded="true" aria-controls="expand_area_id">
              <i class='osg-u-icon-chevron-down'></i>
          </button>
      </div>
      <div class="osg-expand-box__content" id="expand_area_id">
          <div class="osg-content-box osg-v-default ">
              <div class="osg-content-box__container">
                My content
              </div>
          </div>
      </div>
  </div>
 </body>
</html>

And a index.sass with the following:

$osg-font-path: "~node_modules/styleguide/src/assets/fonts"
@import "~styleguide/src/assets/sass/common"
@import "~styleguide/src/assets/sass/resources"
@import "~styleguide/src/atoms/buttons/button/button"
@import "~styleguide/src/molecules/content_display/expand_box/expand_box.sass"

In your package.json add this under scripts:

"dev": "parcel index.html"

Now you can run npm run dev and go to the url it gives you.

You should see something like this:

We did quite a few things here so let’s go through them one by one.

In the HTML we added some markup, to get this markup you can go to styleguide.oslo.kommune.no and

Find the expand box under molecules/content display
Go to the HTML-tab
Click the copy button to get the markup in your clipboard

Here it is also marked where you can add your own content, in the twig which is used behind the scenes these are set up as blocks, in the html they are marked by these comments  . The twig-tab and data tabs are for twig consumption which I won’t cover here.

In the SASS we have to set a variable which tells the styleguide where the fonts are located. This can be set to:

$osg-font-path: "~node_modules/styleguide/src/assets/fonts"
// or
$osg-font-path: "~styleguide/src/assets/fonts"
// Depends on your setup

Then we have to import the common styles with:

@import "~styleguide/src/assets/sass/common"
@import "~styleguide/src/assets/sass/resources"

And finally the styles for the component we need, this can be found if you scroll to the bottom of the docs tab.

Click the CSS button under assets and it will add the path of the sass to your clipboard. We can also see under includes the patterns that this pattern depends on, we have to click on them and get their CSS as well. Then we put that into our index.sass.

@import "~styleguide/src/atoms/buttons/button/button"
@import "~styleguide/src/molecules/content_display/expand_box/expand_box.sass"

And now we are up and running!

The process is the same if you are adding the styleguide to a Vue project for instance.

npm install the styleguide and minireset.css
Add the font path and any styles you want to use in a SASS file or in the style tags of the Vue component(make sure to use lang=”sass”)
Import the SASS file in the Vue component you want to use it in
Use HTML in your template

City of Oslo Design System

Written by Andreas Fladstad