Momentum CSS Framework Released

Written by Ethan Gardner Web Design

Reusing code is a great way to save time and money over the course of a website development. One thing that I have been looking to add to my developer toolkit is a CSS file that is flexible, well-organized, lightweight, and easy to learn.

The result of my efforts to create such a tool, Momentum CSS Framework, is now ready to be released into the wild under a Creative Commons Attribution 3.0 license.

Size

Weighing in at a compact 4KB of standards-compliant CSS, Momentum is smaller than most other CSS frameworks. Despite its small size, Momentum CSS remains flexible and easy to use.

Organization

The main file is organized in five different sections, with each section clearly labeled and preceded by a Docblock style comment. Taking this approach to sectioning allows large files to remain organized, while reducing the load on the server since it no longer has to serve up ten different CSS files for each page on your site.

Advantages

By using an intuitive series of semantic naming conventions, Momentum helps the take the guess work out of front-end code for the developer and makes it easier to maintain sites and identify problems when used in team situations.

Example & Download

 
@import url(baseline.css);
/**
 * Table of Contents.
 * 1) General Elements
 * 2) Utility Classes
 * 3) Main Layout Structure
 * 4) Widgets and Plugins
 * 5) Page Specific Styles
 * ========================
 * Author: Ethan Gardner - http://www.ethanandjamie.com/
 * Title: Momentum CSS - v1.0
 * License: Creative Commons Attribution 3.0
*/
 
/**
 * 1) General Elements 
 */
body {
  background:#fff;
  color:#000;
  font:62.5% arial, helvetica, sans-serif; /* sets font to 10px */
  text-align:center;
}
 
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
 
ul, ol, dl, p {
  margin-bottom:1em;
}
 
a {
  color:#00f;
  text-decoration:underline;
}
 
a:hover {
  color:#ff0;
  text-decoration:underline;
}
 
abbr {
  border-bottom:1px dotted #ccc;
  cursor:help;
  letter-spacing:1px;
}
 
strong{font-weight:700;}
em {font-style:italic;}
 
/**
 * 2) Utility Classes
 */
.block   {display:block;}
.clearL  {clear:left;}
.clearR  {clear:right;}
.clear   {clear:both;}
.floatL  {float:left;}
.floatR  {float:right;}
.floatN  {float:none;}
.hide   {display:none; visibility:hidden;}
.inline {display:inline;}
 
/* lists */
.circle {list-style:circle;}
ol, .decimal {list-style:decimal outside; padding-left: 40px;}
ul, .disc {list-style:disc outside; padding-left: 40px;}
.none {list-style:none;}
.square {list-style:square;}
 
/**
 * 3) Main Layout Structure 
 */
#containerMain {
  margin:0 auto;
  text-align:left;
  width:960px;
}
 
#branding {
 
}
 
/* navigation */
#navMain {
  list-style:none;
  margin:0;
  padding:0;
}
 
#navSection {
  list-style:none;
  margin:0;
  padding:0;
}
 
#navMain li a, #navSection li a {
  display:block;
}
 
/* content areas */
#contentMain {
 
}
 
#contentAux {
 
}
 
#contentTertiary {
 
}
 
/* footer */
#footer {
  clear:both;
}
 
/**
 * 4) Widgets and Plugins
 */
 
/**
 * 5) Page Specific Styles
 */
 

Download Momentum CSS Framework

Usage Conditions

Momentum CSS by Ethan Gardner Web Design is licensed under a Creative Commons Attribution 3.0 United States License. If you appreciate the work, please help spread the word by bookmarking it or providing a link to my site.