centurion

the framework you've been waiting for


npm i centurion-framework

NPM version Gem Version

History of Centurion

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

Note: All grid elments need to be wrapped in an row in order to take full advantage of the new flexbox grid.