a responsive web framework

with a dash of awesome sauce

features

Latest Code

Latest Code

Built on CSS3 and HTML5 semantics to allow you to start capitalizing on a next generation standard. If you're worried about browser support we recommend the html5shiv to add the basic support for semantic coding.

Quickly Prototype

Quickly Prototype

Need to built a web wireframe quick? Look no further than Centurion with it's scalable and easy syntax to get a new prototype up fast. Fork the repo on Github to get started.

It's Responsive

It's Responsive

No matter the device: Mac, PC, iPhone, iPad, iPad mini, or Android tablet, Centurion does the work of making your web project responsive and viewable on multiple devices. Using some basic magic it even works in IE7.

grid

Mobile

Originaly Centurion was built only a responsive grid, so at its core Centurion is built to be responsive. Developed along the same lines as the 960 Grid built by Nathan Smith. The grid is built using a Sass mixin, which makes it highly customizable. The only portion of the grid system that uses a pixel width is the container. For desktops the default container is set to 1100px wide and is fully fluid below 768px for tablets and smartphones.

Basic Structure

Utilizing the grid requires a container wrapper followed by the grid size that you want to use. For example, if you want to use the full width, then set grid-100. If you want to divide up your page based into two columns then you can do this: grid-40 and grid-60. The number correlates to the percentage of the container that you want your content to occupy.

<div class="container">
    <div class="grid-40">
          ...
    </div>
    <div class="grid-60">
        ... 
    </div>
</div>

Note: For each row make sure that you elements add up to 100 across in order to utilize the full row. However, if you want to center one grid element on each row then you will want to use Centering Grids below.

documentation

Finding it hard to learn a new framework? Don't worry anymore about a bloated code base with markup you have to override with important tags. Centurion features easy to read markup, classes and ID's that are semantic or unsemantic for your personal web tastes, and provides some basic documentation to get you up to speed.

works with

Most frameworks work with only one Sass library, however, Centurion is designed for plug and play with your favorite Sass library. If you have an issue with your mixin library, then submit an issue for us to take a look at the issue.

Compass
Bourbon
Codekit

Learn more about Centurion on Github

extras

Spread the Word

wallpapers

examples

in the wild