ProtoType: A Small CSS Framework for Type-Focused Layouts

A CSS starter kit focused on making editorial layout design in the browser more efficient and expressive

While I do believe designing in the browser has its limitations, I find setting type and some parts of layout design to be way faster writing CSS than fiddling around with the menu systems of design software. There are also advantages to being able to work on all screen sizes at once with the browser window, rather than separate design comps at different breakpoints. While a lot of CSS frameworks are setup to handle a variety of interfaces, I haven't found one focused on page layout.

This system is somewhere between a framework and a glorified CSS reset. There are no button styles, slideshows, or any other interactive components. This just uses a CSS normalizer, a simple methodology for approaching the structure of a page's markup, and a few components often used in page layout. The focus is solely on making the design of flexible editorial layouts in the browser faster and more fun by requiring less CSS. While this system could be combined with another framework, like twitter bootstrap, I have been enjoying trying to push how much is possible with a more editorial style layout, rather than just defaulting to a homepage with big page banner and a few columns of highlighted content. A couple years ago, I was a big fan of how Happy Cog used this approach for their homepage.

The Page Structure

This system uses two wrapping divs and a max-width on the main content elements to make a wide variety of layouts possible.

  • div.container, the outer-most wrapper
  • div.column for setting the outer bounds of the main text column
  • a max-width on the main content elements to set the width of your text block

The reasoning for the setup is best conveyed by looking at some examples. In the following layouts, the .container div is shown in yellow, the .column div in blue, and the content in grey. You can consider the grey boxes either an image or pull quote.

A centered block of text would look like this. The text has a max-width that's less than the .column's width, and margin left and right set to auto. This framework uses a few Sass variables to make editing these easy.

basic centered layout

In code, this would simply look like:

$contentInnerWidth: 600px;  //max-width for grey content
$textMargin: 0 auto;        //center grey content
$contentOuterWidth: 1000px; //blue box max-width
$columnMargin: 0 auto;      //center blue box

In these examples I'm showing pixel-based widths, but the framework can work with percent or any other unit for sizing.

So why the .column div? This gives us a boundary outside of the main content block that can be used for larger image styles, or to push floated element against. The framework comes with utility styles to size images to the text block, float to either side, or to fill the whole .column div.

centered layout with images

We can also not center the text content, remove the max-width from the h1 (by default it gets a max-width from the $contentInnerWidth variable), but still center the div.column.

layout with text to the left and images right
$contentInnerWidth: 600px;
$textMargin: 0;         //content left, not center
$contentOuterWidth: 1000px;
$columnMargin: 0 auto;
h1 { max-width: none; } //remove h1's max-width

A less common margin setting is margin-right: 0, margin-left: auto. This pushes the content to the right of the column. If widths are set properly, floated images or pull quotes can fall completely outside of the main flow of text.

layout with text to the right and images left
$contentInnerWidth: 500px;
$textMargin: 0 0 0 auto;    //content to the right
$contentOuterWidth: 1000px;
$columnMargin: 0 auto;

You can use multiple containers for background images or colors. And there's a simple grid system for images.

multiple containers with background, and grid system

The .container divs don't have to be the full width of the screen. Everything is flexible, so your complete layout can be nested inside of whatever size your site demands.

layout contained in page

Type Sizing and Margins

Type size and element margins are based on a $base variable. This makes it easy to keep a consistent vertical rhythm. Arguably rem's could be used instead, but I decided to use the variable for better browser support.

$base: 10px;
h2 {
  font-size: 3 * $base;
  line-height: 4 * $base;
  margin-bottom: 2 * $base;
}

Media Queries

There are no media queries included in the base setup. This leaves you with complete control. This system is designed to create fluid layouts, so you probably won't need many and I find it simplest to just add them as needed.

Get the Code

This framework is evolving as I use it. Full documentation is still in the works, but you can: