Styleguide

Colors

.bgr-blue
#287dbe
.bgr-blue-lt
#75c5df
.bgr-blue-dk
#384992
.bgr-white
#fff
.bgr-red
#cd242a
.bgr-dark
#234
.bgr-purple
#9e579e
.bgr-pink
#ec66a2
.bgr-green
#9fc74d
.bgr-green-dk
#5bb12f
.bgr-grey
#999
.bgr-grey-lt
#ececec

Typography

Maintain consistency by using utility classes for font size, weight and styling. Margin and padding are 0 for h1-h6.

Titillium

Regular
.text-reg

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0

Bold
strong, .bold

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0

Light
.text-light

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0

Italic
em, .italic

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0

text-48, h1
text-36, h2
text-24, h3
text-18, h4
text-16, body, p, h6, h5
text-14, small
text-12
text-11
text-10
blue-lt blue blue-dk green green-dk grey pink purple

Layout

.grid-#

Use the grid to handle the arrangement of fluid width elements on the page. Your grid should allow for responsive width adjustments at different breakpoints.

<div class="grid-12 m-grid-6 l-grid-3">
This div will be full 
width for small screens, 
2-column for medium and 
4-column for large.
</div>
<div class="grid-12 m-grid-6 l-grid-3">
This div will be full 
width for small screens, 
2-column for medium and 
4-column for large.
</div>
<div class="grid-12 m-grid-6 l-grid-3">
This div will be full 
width for small screens, 
2-column for medium and 
4-column for large.
</div>
<div class="grid-12 m-grid-6 l-grid-3">
This div will be full 
width for small screens, 
2-column for medium and 
4-column for large.
</div>
.grid-flex

Apply flexbox styling to a grid for matching container heights.

Yes .grid-flex

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quod vel vitae!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptate modi doloribus veritatis laboriosam est excepturi velit aut eius, amet. Nam veniam officiis, provident temporibus! Libero, voluptatibus, ipsam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta magnam obcaecati voluptates doloremque, quam cum fuga tempora nulla!

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Not .grid-flex

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quod vel vitae!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptate modi doloribus veritatis laboriosam est excepturi velit aut eius, amet. Nam veniam officiis, provident temporibus! Libero, voluptatibus, ipsam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta magnam obcaecati voluptates doloremque, quam cum fuga tempora nulla!

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.container-#

Use container classes for semi-fixed width elements. Use .container, .box, .wrapper, .div, .div or something similar as a prefix. Typically these have their left and right margin set to auto so they will be centered.

.box-center {
  margin-left: auto;
  margin-right: auto;
}
.box-320 {  max-width:320px; }
.box-400 {  max-width:400px; }
.box-480 {  max-width:480px; }
.box-640 {  max-width:640px; }
.box-720 {  max-width:720px; }
.box-800 {  max-width:800px; }
.box-960 {  max-width:960px; }
.box-1100 { max-width:1100px; }
.box-1200 { max-width:1200px; }
.box-960
.box-800
.box-720
.box-640
.box-480
.box-400
.box-320
.box-center .box-960
.box-center .box-800
.box-center .box-720
.box-center .box-640
.box-center .box-480
.box-center .box-400
.box-center .box-320
.pad-# .marg-#

Use classes for levels of padding and margin to use across your site. By using these classes exclusively to set the spacing in and around the elements on the page, you will find it simple to maintain consistent alignment.

Use breakpoint prefixing to adjust spacing for making layout adjustments at different screen sizes (e.g. .s-pad-0 to remove padding for small screen sizes).

.pad-1 { padding: .5em; }
.pad-1-left { padding-left: .5em; }
.pad-1-right { padding-right: .5em; }
.pad-1-top { padding-top: .5em; }
.pad-1-bottom { padding-bottom: .5em; }
.pad-1-sides { padding-left: .5em; padding-right: .5em; }
.pad-1-vert { padding-top: .5em; padding-bottom: .5em; }
.pad-2 { padding: 1em; }
.pad-2-left { padding-left: 1em; }
...etc
.marg-1 { margin: .5em; }
.marg-1-left { margin-left: .5em; }
.marg-1-right { margin-right: .5em; }
.marg-1-top { margin-top: .5em; }
.marg-1-bottom { margin-bottom: .5em; }
.marg-1-sides { margin-left: .5em; margin-right: .5em; }
.marg-1-vert { margin-top: .5em; margin-bottom: .5em; }
.marg-2 { margin: 1em; }
.marg-2-left { margin-left: 1em; }
...etc
.pad-0
.pad-1
.pad-2
.pad-3
.marg-1-bottom
.marg-2-bottom
.marg-3-bottom
.s-marg-3-top .m-marg-2-top .l-marg-1-top
.pad-3-vert
.pad-3-sides
.pad-3-bottom
.pad-3-top
.pad-3-left
.pad-3-right
.border-#
.border
.border-dashed
.border-dotted
.border-left
.border-top
.border-bottom
.border-right
.border-green
.border-blue
.border-pink
.border-purple
.border-red
.border-grey
.rounded .circle
.rounded
.circle
.rel .abs .pos-#
.rel
.abs
.pos-top .pos-left
.abs
.pos-top .pos-right
.abs
.pos-bottom .pos-left
.abs
.pos-bottom .pos-right
.front
A
B
C
A
.front
B
.front-1
C
.front-2
.float-#
.float-left
.float-right