# Grid System

xs12 / sm7 / md6 / lg4

xs12 / sm5 / md6 / lg4

# Colours

$c-black: #0a004b;

$c-grey: #898989;

$c-grey--md: #cdcdcd;

$c-grey--sm: #e0e0e0;

$c-grey--xs: #f9f9f9;

$c-white: #ffffff;

$c-primary: #4483ff;

$c-secondary: #6c44ff;

$c-tertiary: #ff406a;

$c-accent: #44ffdb;

$c-info: #e6efff;

$c-success: #d6ffea;

$c-danger: #ffe7e7;

$c-error: $c-tertiary;

$c-warning: #ffd039;

$c-warning--xs: #fff8df;

# Headings

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,700');

h1 - (36px/44px) h1 - (48px/56px) h1 - (60px/68px)

h2 - (30px/38px) h2 - (36px/44px) h2 - (48px/56px)

h3 - (30px/38px) h3 - (30px/38px) h3 - (36px/44px)

h4 - (24px/32px) h4 - (24px/32px) h4 - (30px/38px)

h5 - (20px/28px) h5 - (22px/30px) h5 - (24px/32px)

h6 - (18px/26px) h6 - (20px/28px) h6 - (20px/28px)

.h-upTitle

ex consectetur magnam

.h-lead

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est inventore esse, ex consectetur magnam.

.h-uppercase

Sit amet consectetur adipisicing elit.

# Icons webfont

FoN webfont is built using Icomoon (opens new window).

Upload downloaded webfont to ./site/src/assets/fonts and builder files into ./site/src/assets/fonts/builder.

TIP

Import ./site/src/assets/fonts/builder/selection.json to Icomoon (opens new window) to retrieve existing project.

Copy and paste the content of style.css into ./site/src/assets/styles/common/_typos.scss

WARNING

Keep first @import used to import Popins (opens new window) from Google Fonts (opens new window)

To use icons in page, use as follow

<span class="icon icon-NAME"></span>

_{Hover icon to get name}

# Images

Images are lazy loaded using bLazy (opens new window)

import Blazy from "blazy";

new Blazy({
  selector: ".h-lazy",
  successClass: "is-loaded"
});

Load image via webpack (opens new window) by using require()

Using IMG tags

<img :data-src="require('PATH_TO_IMG')" class="h-lazy">

Using responsive CSS backgrounds with Retina support

<div class="h-lazyContainer">
  <div
    class="h-lazyContainer--inner"
    :data-src-xs="`${imgSrc.xs} | ${imgSrc.md}`"
    :data-src-md="`${imgSrc.md} | ${imgSrc.lg}`"
    :data-src-lg="`${imgSrc.lg} | ${imgSrc.full}`"
    :data-src="imgSrc.full">
  </div>
</div>

<script>
export default {
  computed: {
    ...mapState({
      imgSrc: state => state.post.img
    })
  },
  mounted() {
    new Blazy({
      selector: '.h-lazyContainer--inner',
      successClass: 'is-loaded',
      breakpoints: [
        {
          width: 425,
          src: 'data-src-xs'
        },
        {
          width: 768,
          src: 'data-src-md'
        },
        {
          width: 1200,
          src: 'data-src-lg'
        }
      ]
    })
  }
}
</script>

TIP

More info about bLazy (opens new window)

← Conventions Components →