Semantic Grid System Review

With Semantic.gs, you can manipulate the grid using media queries.

article { .column(9); }
section { .column(3); }

@media screen and (max-width: 720px) {
    article { .column(12); }
    section { .column(12); }
}

By default Semantic Grid System has a fixed layout. But switching to fluid, percentage-based layouts is easy. To switch from pixels to percentages, simply add one variable:

@total-width: 100%;

Semantic.gs supports all modern CSS pre-processors sucha as Sass, LESS and Stylus.