Semantic CSS Framework

The Semantic CSS Framework

A popular opinionated CSS framework for rapid style development

Current Version: alpha


The Semantic CSS Framework allows you to write completely semantic HTML and produce a working page. It uses Sass, BEM, and input from hundreds of designers, who can be found here


In this article, Brad Frost outlines the principles of atomic design. What it comes down to is seeing the page as a series of fractal iterations: each within the other.

Live Edits

With Sass 3.3 and Chrome sourcemaps, it's possible to edit the Sass live on the page. Check it out on this page!


The Semantic CSS Framework uses musical typography. Learn more about musical typography here


Easily create a working prototype of a site by writing pure HTML


Use the Semantic CSS Framework as a starting point: use the atomic structure to quickly develop custom components and develop your own style

the Semantic CSS Framework

A popular opinionated CSS framework for rapid style development

The majority of websites all use a number of common elements arranged into a finite number of patterns, as you can clearly see on sites like Pattern Tap. These common elements correspond either to a single HTML tag or a pattern of tags, such as header>nav>ul, fieldset>form[text],form[password], or others. The Semantic CSS Framework seeks to be a foundation for creating unique semantic stylesheets. By modifying a set of variables, the Semantic CSS Framework generates CSS that styles the default elements and related patterns. Once the base CSS file is generated, the developer can modify it further to support additional features.

The Semantic CSS Framework is responsive with many mobile-first constructs to make it run quickly. It has no official grid system, though there are certainly plenty to choose from. For strong responsive grids in SASS, I recommend

The Semantic CSS Framework takes the opinions of hundreds of developers and works their best practices into code. I will continue to update the code with references to its inspiration, but some of my major influences (links to come when I launch) have been Chris Coiyer of CSS Tricks, Harry Roberts of CSS Wizardry, and Mike Lane for his excellent Twitter feed.

Semantic Foundation

99% Classless, 100% Semantic

The basic markup for a number of common patterns can be found here.

In order to move towards a more open web, existing standards should be adhered to in order that new standards can be explored. While the creativity of many designers with the div element is admirable, having endless sets of nested divs with "grid-" classes applied does nothing to move towards a web of interoperability and the free exchange of information.

The Semantic CSS Framework does the heavy lifting for you, allowing you to write entire webpages as easily as you would a complicated document. With emmet, it's easier than Markdown!

Musical Typography

Conducting the New Canon

If you haven't read "Composing the New Canon," I suggest you read it now.

The idea that typographical ratios can be calculated from musical ratios is an old one. The Semantic CSS Framework makes those ratios easily accessible. You can either compile a stylesheet with a specific ratio or use the classy.css file to apply classes like "e augmin7" to elements to style the contained ratios. Examples will be below: