a simple web framework

features

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

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

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

In 2011, Centurion was build with only a responsive grid, so at its core Centurion is built to be responsive. It was developed along the same lines as Nathan Smith's 960 Grid, but has taken a different direction since then. The grid and features of Centurion are built using Sass mixins (written in SCSS), which make it highly customizable for any project. The only portion of the grid system that uses a pixel width is the ctn-container. For desktops the default ctn-container is set to 1100px wide and becomes fluid below that for tablets and smartphones.

Basic Structure

Utilizing the grid requires a ctn-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-24. If you want to divide up your page based into two columns then you can do this: grid-6 and grid-18. The number correlates to the amount of columns that you want the page to be divided.

<div class="ctn-container">
    <div class="ctn-grid-6">
          ...
    </div>
    <div class="ctn-grid-18">
        ... 
    </div>
</div>

Note: For each row make sure that you elements add up to 24 across in order to utilize the full row.

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
NPM
Grunt
Gulp

Learn more about Centurion on Github

extras

Spread the Word

wallpapers

examples

in the wild

contact

Find out the latest news on Centurion by following the team on Twitter @team_centurion or you can contact us at team@centurionframework.com

Centurion Framework