Another CSS Framework

Header

Header

Header

Header

Header
Header

Typography

This uses two fonts, courtesy of Google Fonts. The first is Lusitana, a serif font designed by Ana Paula Megda. The second is a Work Sans, a self-described "typeface family based loosely on early Grotesques — i.e. Stephenson Blake, Miller & Richard and Bauerschen Giesserei." by Wei Huang.

Forms


First name:
Chocolate Vanilla
Sprinkles Syrup
Name:
E-mail:
Website:
Gender: Female Male

Another section..?

Tables

Name Age Happiness Office
Joe Shmoe 35 90% Home
Alex McCrimmon 22 67% College
Joe's Friend 33 80% Nurse
Dr. Ramesh 56 98% Private Practice

Lists

Lists use serif styles, and are pretty normal, as far as lists go. They are very useful in keeping track of things you need to do, and numbering various things, like presidents or fruits.

  1. George Washington
  2. John Adams
  3. Thomas Jefferson
  4. James Madison
  5. James Monroe
  6. John Quincy Adams
  7. Andrew Jackson
  8. Martin Van Buren
  9. William Henry Harrison

Text Formatting

Lorem ipsum dolor sit amet, nec cu eruditi perfecto, no tamquam nominati ius. Ad justo commune honestatis est, stet facilis voluptatibus pri ea, veri movet eos cu.

Et congue aperiam oporteat mea, summo probatus mei at. At sea dicunt labores, prima eruditi no sed. Veritus lucilius honestatis et cum, omnis periculis conceptam eos in.

Vim facer maiorum maiestatis in, eu fugit paulo petentium mel. Nam electram complectitur ea, eu eros tritani legendos duo. Vel diam commodo in, eam ut solum debet probatus.

All sorts of styles are supported, including:

Code:

@media only screen and (min-width: 800px) {
	.full {
	width: 100%;
}
.half {
width: calc(96% / 2); /*2 columns, 100-2*2 = 96*/
}
.third {
width: calc(94% / 3); /*3 columns, 100-2*3 = 94*/
}
.fourth {
width: calc(92% / 4); /*4 columns, 100-2*4 = 92*/
}
.two-thirds {
width: calc(96% / 3 * 2); /*2 columns, 100-2*2 = 96*/
}
.column {
float: left;
margin-right: calc(100% / 50);
}
}

Columns

.half

.fourth

.fourth

.third

.third

.third

.half

.half

.third

.two-thirds