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.
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.
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.
Originally, Centurion was built only to be a responsive grid, so at its core Centurion is build to be responsive. Developed along the same lines as the 960 Grid built by Nathan Smith, the grid was designed using a simple Sass mixin which makes it highly customizable. For desktops the default container is set to
1100px wide and is fully fluid below
768px for tablets and smartphones.
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-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.
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.
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.