Pretty Semantic CSS Framework and Pretty Semantic HTML Template

NOTE: This was originally posted on January 5, 2010, some techniques used may now be slightly out-dated.

CSS frameworks such as the 960 Grid System can be helpful in creating complex multi-column magazine-style page layouts. A major drawback of these frameworks however is that they are mainly presentation-based instead of being semantic-based. In addition they can be overkill when all you want to create is a fairly simple layout with just a few types of columns (The 960 Grid System for example is based on 12 and 16 column grids).

The Pretty Semantic CSS Framework is an attempt to address some of these issues. The Pretty CSS Framework works together hand in hand with the Pretty Semantic HTML Template. The HTML template uses HTML5-based elements such as “header”, “nav”, “section” and “footer” (div tags with class names are used for browser compatibility). It does use some column divs with presentation based names which is what makes it only “pretty” semantic. There are only a few basic column widths defined however which should work fine for most not overly-complex layouts. (Columns are based on halves, thirds and fourths.)

After using Pretty to lay out your page, you can replace the few presentation based column class names with more semantic class names that fit your content such as “sub-nav”, “main-col”, “supporting-col”, etc.

Pretty Semantic CSS

The CSS includes only the basic minimum styles needed for creating rough layouts. The page is based on a 960px width. No general CSS reset is included although some elements within the header, footer and nav have resets. (The reason for not including a reset is that purely in my opinion they can be overkill in some instances when applied automatically to all content. For pages containing a lot of text content it’s often more efficient to make use of some default browser rendering of things like paragraph and header margins. Feel free to add a reset if that works best for your design.)

Pretty Semantic HTML Template

The HTML template gives examples of how to use the basic class names included in the Pretty Semantic framework in order to structure your page and create the basic rough layout. Delete any parts you don’t need or re-arrange elements to suit your design. Example navigation links are placed inside there own labeled div in the template as an example. This separate nav div could be deleted and the the UL containing the class links could instead be given the “nav” class name and then moved inside the header div with new styles applied as one possible option.

Download Files

Zip of all files:

After downloading the code you can paste it in here to test it out:

NOTE: This is just the 1.0 release of the framework. So far it’s been tested in FF3.0.16, IE6 and IE7. Please feel free to make suggestions for improvement and let me know of any bugs you find.

Leave a comment

Leave a Comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s