Intro

Simple styleguide

I use sass, look in ./sass/ to check components.

To transpile sass you can use Koala or console tools

Used scripts and feature: bootstrap grid, Slick slider

Typography

body and paragaphs: font-family: SoinSansPro-Roman;

headers: font-family: SoinSansPro-Bold;

H1 Header Lorem Ipsum

H2 Header Lorem Ipsum

H3 Header Lorem Ipsum

H4 Header Lorem Ipsum

H5 Header Lorem Ipsum

H6 Header Lorem Ipsum

This is paragraph

Pellentesque quis vehicula erat. Suspendisse vitae metus convallis, lobortis. Ściółka, żółć 123

 p class="bold"  

Pellentesque quis vehicula erat. Suspendisse vitae metus convallis, lobortis. Ściółka, żółć 123

 p class="text_sm"  

Pellentesque quis vehicula erat. Suspendisse vitae metus convallis, lobortis. Ściółka, żółć 123

 p class="text_md"  

Pellentesque quis vehicula erat. Suspendisse vitae metus convallis, lobortis. Ściółka, żółć 123

 p class="text_lg"  

Pellentesque quis vehicula erat. Suspendisse vitae metus convallis, lobortis. Ściółka, żółć 123

 p class="text_xl"  

Line in header

 p class="text_lg bold header_line"  

Line in paragraph

 p class="header_line"  

More in sass/components/typography.scss ... Feel free to edit it

Grid

It's normal bootstrap ( 12 columns ) grid you can see docs here:

https://v4-alpha.getbootstrap.com/layout/grid/ I only edit max width of container to bigger.

Colors

Variables:

$white: #fff;
$grey: #d3d3d3;
$yellow: #CBFF76;
$primary: #1B71EF;
$blue0: #3F87FF; // light
$blue1: #1B71EF; // normal
$blue2:#1F3F6E; // dark

HOW TO USE?

 yellow_bg 

Background is yellow

 blue0_bg white_cl 

Background is blue0 and text is white

Buttons

class "btn" is responsible for animation

Forms

Helpers

example:

  div class="padding_r-s"  

template:

  class="[padding/margin]_[left/right/top/bottom:l,r,t,b]-[size:s,m,l,xl,xxl]"  

Paddings: