About the Framework
Centurion is a intuitive framework that offers a responsive grid system out of the box with a few basic features to help setup your next web project easily. Unlike larger and more prominent web frameworks, Centurion doesn't throw everything you don't need into your project and allows for quick customizations using Sass. It is also available as an NPM module or RubyGem for those truly custom projects.
Centurion offers three basic media breakpoints: 481, 961, and 1100. It was also designed to be design friendly using an easily divisible 24-column based grid that suits most design projects. These columns also adjust to allow for a 12-column view on tablet and a 6-column view on mobile.
Out of the Box
We didn't design Centurion to be heavy and with GZIP the entire framework comes in around 6KB. Most of the features built into Centurion were either requests from the open-source community or from general web usage, which is why you will find typography, buttons, tables, badges, and callouts in this framework to name a few.
Either submit a feature request on Github or you can fork and submit a pull request of any new feature that you think Centurion could benefit from.
The Grid
Originally Centurion was built only a responsive grid, so at its core Centurion is built to be responsive. 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
Utlizing the grid in your your project requires a container wrapper to set the main size of the area with grid elements inside to divide the space of the content area as needed. For example, if you want to use the full width for a banner that spans the page, then you would specify a ctn-grid-24
. 24 columns is the full width of the default grid and is easily divisible in any design pattern. If you want to divide the page in two columns (a main body and a sidebar) you could use a ctn-grid-6
and a ctn-grid-18
. The number corresponds the amount of columns that the grid will occupy within the container.
<div class="ctn-container">
<div class="ctn-grid-2"></div>
<div class="ctn-grid-22"></div>
<div class="ctn-grid-3"></div>
<div class="ctn-grid-21"></div>
<div class="ctn-grid-4"></div>
<div class="ctn-grid-20"></div>
<div class="ctn-grid-5"></div>
<div class="ctn-grid-19"></div>
<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 columns 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.
Nested Grids
The best part of any grid system is the ability to nest elements within a single grid element to break down the space into smaller, manageable spaces.
For example, say that you want to have content in a ctn-grid-18
, but you also want to add three images with captions side-by-side beneath the main block of text. In order to create this layout will need to put three ctn-grid-8
grid elements inside the parent grid element.
<div class="ctn-container">
<div class="ctn-grid-12">
<div class="ctn-grid-8"></div>
<div class="ctn-grid-16"></div>
</div>
<div class="ctn-grid-12">
<div class="ctn-grid-16"></div>
<div class="ctn-grid-8"></div>
</div>
</div>
Centered Grids
Centering grid elements is as easy as adding ctn-grid-center
to your grid element. This will evenly space your element in the center of your grid container.
<div class="ctn-grid-2 ctn-grid-center"></div>
Push the Grid
<div class="ctn-container">
<div class="ctn-grid-6"></div>
<div class="ctn-grid-6 ctn-push-6"></div>
<div class="ctn-grid-6 ctn-push-12"></div>
<div class="ctn-grid-6 ctn-push-18"></div>
</div>
Push and Pull the Grid
<div class="ctn-container">
<div class="ctn-grid-8 ctn-push-16"></div>
<div class="ctn-grid-16 ctn-pull-8"></div>
<div class="ctn-grid-16 ctn-pull-8"></div>
<div class="ctn-grid-8 ctn-pull-16"></div>
</div>
Typography
______
Standard h1
<h1> 32px
Standard h2
<h2> 26px
Standard h3
<h3> 22px
Standard h4
<h4> 18px
Standard h5
<h5> 16px
Standard h6
<h6> 14px
Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
<p class="text-large">
Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
<p>
Turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
<p class="text-small">
Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
<p class="text-muted">
Blockquotes
Simple
Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
<blockquote> ... </blockquote>
With By Line
Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
<blockquote>
...
<span class="byline">Anonymous</span>
</blockquote>
With Quotes
Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
<blockquote>
...
</blockquote>
Lists
Unordered
- Nulla vel neque mattis, vestibulum nunc et, molestie diam.
- Donec vitae sapien a elit faucibus venenatis et nec neque.
- Nulla suscipit massa non neque consectetur, non blandit augue scelerisque.
- Proin a augue eu neque malesuada cursus ut ac elit.
- Suspendisse congue arcu vehicula sem imperdiet, quis dictum nulla ultricies.
<ul>
<li>...</li>
<li>...</li>
</ul>
Ordered
- Nulla vel neque mattis, vestibulum nunc et, molestie diam.
- Donec vitae sapien a elit faucibus venenatis et nec neque.
- Nulla suscipit massa non neque consectetur, non blandit augue scelerisque.
- Proin a augue eu neque malesuada cursus ut ac elit.
- Suspendisse congue arcu vehicula sem imperdiet, quis dictum nulla ultricies.
<ol>
<li>...</li>
<li>...</li>
</ol>
Colors
______
Badges
______
Default Badges
red-badge blue-badge purple-badge green-badge orange-badge<span class="badge [color]"></span>
Lighter Backgrounds
red-badge blue-badge purple-badge green-badge orange-badge<span class="badge light [color]"></span>
Border Only Badges
red-badge blue-badge purple-badge green-badge orange-badge<span class="badge border [color]"></span>
Buttons
______
Default
class="small-btn"
class="btn"
class="large-btn"
Colored Buttons
Bordered Buttons
Callouts
also known as frame boxes, alerts, etc.
Expandable Callouts
<div class="[color]-callout alert">
<span class="btn-expand"></span>
...
<div class="alert-expand">
...
</div>
</div>
Headline 1 for callout
Text for the callout
Headline 1 for callout
Text for the callout
Headline 1 for callout
Text for the callout
General Callouts
<div class="callout">
...
</div>
<div class="[color]-callout">
...
</div>
Headline 1 for callout
Headline 2 for callout
Headline 3 for callout
Text for the callout
Headline 1 for callout
Headline 2 for callout
Headline 3 for callout
Text for the callout
Headline 1 for callout
Headline 2 for callout
Headline 3 for callout
Text for the callout
Tables
You know you hate building table after table styles. You can now use the default tables built into Centurion to fit your color scheme.
By default the table styles that Centurion uses work out of the box. Create a table and it works with the default grey. To change colors you can specify your own or you can use the ones that come pre-packed based on the color scheme above.
Default Table
<table>
Table Header | |||
---|---|---|---|
Content | This is longer content | Content | Content |
Content | This is longer content | Content | Content |
Content | This is longer content | Content | Content |
Table Footer |
Orange Table
<table class="orange-table striped-table">
Table Header | |||
---|---|---|---|
Content | This is longer content | Content | Content |
Content | This is longer content | Content | Content |
Content | This is longer content | Content | Content |
Table Footer |
Blue Table
<table class="blue-table striped-table">
Table Header | |||
---|---|---|---|
Content | This is longer content | Content | Content |
Content | This is longer content | Content | Content |
Content | This is longer content | Content | Content |
Table Footer |
Red Table
<table class="red-table striped-table">
Table Header | |||
---|---|---|---|
Content | This is longer content | Content | Content |
Content | This is longer content | Content | Content |
Content | This is longer content | Content | Content |
Table Footer |
Green Table
<table class="green-table">
Table Header | |||
---|---|---|---|
Content | This is longer content | Content | Content |
Content | This is longer content | Content | Content |
Content | This is longer content | Content | Content |
Table Footer |
Black Table
<table class="black-table">
Table Header | |||
---|---|---|---|
Content | This is longer content | Content | Content |
Content | This is longer content | Content | Content |
Content | This is longer content | Content | Content |
Table Footer |
Navigation
___________
Breadcrumbs
______
Simple
Awesome
Simple
Awesome
Tabbed Structure
Side Navigation
Mobile
Coming soon
Show / Hide for Desktop, Tablet, and Mobile
______
Hide Helper | |||
Show Helper | show-mobile | show-tablet | show-desktop |