Flawless Semantics

About Flawless Semantics

Based on the well known semantic.gs by Tyler Tate, Flawless Semantics shares many of the same goals that semantic.gs such as allowing:

  1. column, gutter widths and the number of columns to be set;
  2. switching between pixel and percentage based layouts with only a few minor amendments;
  3. allows for responsive, adaptive and fixed layouts, all without forcing any unsemantic classes on you.

As is evident from the examples provided, unlike semantic.gs this grid uses a column-gutter-column approach, I have provided as many examples as I can on this page and there a more examples via the links found at the bottom of the page. There is no need for a omega classes as each row is created exactly one gutter width larger to accommodate and hide the extra gutter.

When Semantic isn't great... well in developing this framework from what arguably is the most semantic grid system (semantic.gs). I started realising the areas where it could be optimised and errors corrected are due in a large part to the nature of semantic naming and the limits of current pre-processors. My biggest gripe is that you either ended up with long trailing comma-delimited selectors that make editing harder than it should be or you have properties repeated over and over leading to css bloat when they only really need to be declared once (for an example just have a look at the version 1.1.3 and the css it produces). Further, it is arguable that any name which describes the purpose of a html element is semantic and as Harry Roberts of XXXXXXXX explains the grid merely acts as a shelf for real content to fit into. To this end Flawless Semantics as ironic as it is, attempts to find a compromise between being semantic and being sensible.

To find out more about Flawless please see the readme located here

Screenshots to be provided soon: