01. Typography (Open sauce SAns) Download here

Headings

Heading 1

h1 {font-size: 38px;}

Heading 2

h2 {font-size: 32px;}

Heading 3

h3 {font-size: 24px;}

Heading 4

h4 {font-size: 18px;}
Heading 5
h5 {font-size: 19px;}
Heading 6
h6 {font-size: 16px;}
Doing what you like is freedom...
blockquote {font-size: 20px;}

Text elements

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here', making it look like readable English. You can use the mark tag to highlight text.

For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.

body, p { font-size: 16px; }
Many desktop publishing packages now use Lorem Ipsum as their default model text. You can use the mark tag to highlight text.
.subheading {font-size: 19px;}

hr

Text manipulation

This text overflows its parent element and therefore will be truncated and three dots will be appended. This is some long text that is going to get cut off by the container because its too long.

.truncate-text

Lists

  • Item in an unordered bulleted list
  • Item in an unordered bulleted list
  • Item in an unordered bulleted list
Unordered List
  1. Item in an ordered bulleted list
  2. Item in an ordered bulleted list
  3. Item in an ordered bulleted list
Ordered list
  • Item in an ordered unstyled list
  • Item in an ordered unstyled list
  • Item in an ordered unstyled list
Unstyled List

02. Buttons

Default buttons

Use the button classes on an <a></a>, <button></button>, or <input> element.

Button Sizes

Add .btn--xl, .btn--l.btn--m, .btn--s or .btn--xs for additional sizes.

Border Buttons

Add .btn--border to button to get border.

Rounded Button

Add .btn--rounded to default button to get rounded corners.

Buttons with Icons

Add an inline .btn-icon--xl, .btn-icon--l, .btn-icon--m, .btn-icon--s, .btn-icon--xs inside the button for a button icon.
Or combine any of button colors and styles with .btn--icon for a single icon button.

03. Form Elements

Text Inputs

Use the .input class to get default styling for text inputs. Placeholder text is used for additional context when necessary.

Input sizes

Input fields come in four sizes which can be applied with .input--xl, .input--l, .input--m, .input--s and .input--xs on the .input component itself.

Textareas

Textareas come in four sizes which can be applied with .textarea--xl, .textarea--l, .textarea--m and .textarea--s.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

09. Tables

Basic example

Add .table to enable a basic table.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered table

Add .table-bordered for borders on all sides of the table and cells.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Responsive table

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px).
Country Languages Population Median Age Area (Km²)
Argentina Spanish (official), English, Italian, German, French 41,803,125 31.3 2,780,387
Australia English 79%, native and other languages 23,630,169 37.3 7,739,983
Greece Greek 99% (official), English, French 11,128,404 43.2 131,956
Luxembourg Luxermbourgish (national) French, German (both administrative) 536,761 39.1 2,586
Russia Russian, others 142,467,651 38.4 17,076,310
Sweden Swedish, small Sami- and Finnish-speaking minorities 9,631,261 41.1 449,954

10. Grid System

Grid system

This is a .container it has a max width of 1200px with a 15px left/right padding
This is a .fluid-container it has 100% width and a 15px left/right padding
This is a .row it has flexbox properties with a -15 margin on the left and right
This is a .col it has a 15px left and right padding and expands to 100% width on mobile portrait

Grid Options

See how aspects of the grid system work across multiple devices with a handy table.
Extra small devices Phones (<479px) Small devices Tablets (<767px) Medium devices Desktops (<992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Min container width None (auto) 479px 767px 992px
Class prefix .xs- .sm- .md- .lg-
# of columns 12
Max column width Auto 40px 64px 83px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets N/A Yes
Column ordering N/A Yes

Box Sizing

Grid systems are used for creating page layouts through a series of rows and columns that house your content. We uses a responsive, mobile first, fluid flex grid system that appropriately scales up to 12 columns as the device or viewport size increases. Make sure to add a .col class before the size class to inherit the expand property.

Large screens

.col.lg-1
Max size is 8.333%
.col.lg-2
Max size is 16.666%
.col.lg-3
Max size is 25%
.col.lg-4
Max size is 33.333%
.col.lg-5
Max size is 41.665%
.col.lg-6
Max size is 50%
.col.lg-7
Max size is 58.331%
.col.lg-8
Max size is 66.664%
.lg-9
Max size is 75%
.col.lg-10
Max size is 83.333%
.col.lg-11
Max size is 91.663%
.col.lg-12
This is a full width column - it will never shrink less than 100%
The below boxes will contract at its set breakpoint

Medium screens

.col.md-1
.col.md-2
.col.md-3
.col.md-4
.col.md-5
.col.md-6
.col.md-7
.col.md-8
.col.md-9
.col.md-10
.col.md-11
.col.md-12

Small screens

.col.sm-1
.col.sm-2
.col.sm-3
.col.sm-4
.col.sm-5
.col.sm-6
.col.sm-7
.col.sm-8
.col.sm-9
.col.sm-10
.col.sm-11
.col.sm-12

XSmall screens

.col.xs-1
.col.xs-2
.col.xs-3
.col.xs-4
.col.xs-5
.col.xs-6
.col.xs-7
.col.xs-8
.col.xs-9
.col.xs-10
.col.xs-11
.col.xs-12

Chaining

Using the above classes we can now chain together multiple classes and have an expanded or contracting based on the breakpoint.
Note: unless you explicitly add a xs-* class the default action will be to expand the column to 100% on mobile portrait devices. Adding the .xs class to set a mobile portrait width.
.col.lg-8.md-6.sm-9
This is a column has a starting of 66% on large screens, 50% on tablets, 75% on small devices and finally expands to 100% on mobile portrait devices
.col.lg-6.md-9.sm-10.xs-6
This is a column has a starting width of 50% on large screens, 75% on tablets, 83% on small devices and then expands back to 50% on xtra small devices (mobile portrait)

12. Icon font

Directional & Suggested icons

13. Brand

Logo Variations
DARK LOGO
DOWNLOAD
WHITE LOGO
DOWNLOAD
Brand Icons
BLACK ICON
DOWNLOAD
WHITE ICON
DOWNLOAD

14. Colors

Primary Colors

#00203e
#50e3c2
#f3366b

Supporting Colors

#3672f8
#27496d
#0c7b93
#000000

15. Code View

.slant-section {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  	margin-bottom: -10vw;
}