Helsingborg Styleguide

Looking for a quick setup to add our Styleguide to your project?

You just have to make sure you link the files properly in your web page.
Generally it is wise to import Stylesheet into the head and import javascript files at the end of the body to reduce page load time. Follow the example below on how to import the styleguide files into your web page/project.

CSS - The look and feel

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" id="styleguide-css" type="text/css"
            href="https://styleguide.getmunicipio.com/assets/dist/css/styleguide-css.min.css"
            type="text/css" media="all">

JavaScript - Functionality

Many of our components require the use of JavaScript to function. Our JavaScript is pure vanilla JS, so no need for external plugins or libraries. Place the following <script> near the end of your pages, right before the closing </body> tag.

<script id="styleguide-js" type="text/javaScript"
            href="https://styleguide.getmunicipio.com/assets/dist/js/styleguide-js.min.js"
            crossorigin="anonymous"><script>

Great! The easy and minimal setup is done!!!!

Now you just need to use the Component HTML that you find on the component pages or even better, use our Component Library (Open source on GITHUB) and our blade components to render HTML. Less markup programming, so you can put more effort into doing other Cool things or just chill and have a nice cup of tea. More fun ;-).

If your not going to use all our components?

Don't worry dude, we have a solution for you

We compile a component CSS for you on the fly....
You can easily render a stylesheet just for the components you need. Select the components you want to use and press generate CSS. We compile a customized CSS version for your need.

Select Components you need.

We take care of all the dependency and serve you a compiled CSS file.

Compiling...

Setup

Quick start