Minimal UI Framework

By Susie Lu

Inspired by Bagpakk and 1140px

Usage

You can simply add the css to your website:

Sass users:

The full sass files are available on github. I am a big fan of Grunt, feel free to refuse the relevant Sass tasks in the repository's Gruntfile.js.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text

This is how a sentence would look

Suggested Fonts

Headers use Montserrat.

Body text uses Cardo.

Both of theses fonts are easily added to your website using the Google Fonts scripts:


<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Cardo:400,700' rel='stylesheet' type='text/css'>
        

Blockquote

It's not what you look at that matters, it's what you see.

- Henry David Thoreau

The blockquote above is achieved with the blockquote html tag and a .txt-subtitle class for the citation.

Buttons

The outlined button on the left is achieved by using the .btn class, the active button on the right uses both .btn .active classes.

Tags

Style elements like tags with the .tag class.

first active

Table

This is the default styling for tables, no additional classes necessary.

This That Those
John Doe Other
John Doe Other

Grid

Using Andrzej Osmialowski's 1140px grid (only the 12 column one).

A few differences from Andrzej's code:

  • To use the grid, you must have an outer div with the .container class (not the container12 class).
  • To remove the left or right margin add the class .left-margin or .right-margin respectively (not alpha or omega).

.column12

.column6

.column6

.column4

.column8

.column2

.column2

.column4

.column2

.column2

.column8 .prefix2

.column5

.column7

Forms


Colors

To use these colors in your website append either .bg- such as .bg-grey to use it as a background color property, or .cl- such as .cl-blue to use it as the color property.


grey-light
grey
grey-dark
denim
denim-light
blue
blue-light
teal
teal-light
yellow
yellow-light
green
green-light
red
red-light