Resources

You can read the full documentation on the CSS and Sass components on Github

If you're worried about browser support we recommend using html5shiv to add fallback for HTML5 or Modernizr to provide basic support for CSS3 and other feature detection to keep your design from falling flat, unless you designed it that way.

Sass Supported

Centurion is built using vanilla Sass (basically no library dependencies) and comes with some custom Sass Mixins that you can attach to create your own custom blend for your site. Remove what you don't need and move on.

Pre-built Layouts

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-row">
    <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>
</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 Grid Elements

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-row">
    <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>
</div>

Center Grid Elements

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-center"></div>

Push the Grid

<div class="ctn-container">
    <div class="ctn-row">
      <div class="ctn-grid-6"></div>
      <div class="ctn-grid-6 ctn-push-6"></div>
      <div class="ctn-grid-6 ctn-push-3"></div>
      <div class="ctn-grid-6 ctn-push-6"></div>
    </div>
  </div>

Flip Grid Elements in Display

<div class="ctn-container">
    <div class="ctn-row ctn-reverse">
      <div class="ctn-grid-8"></div>
      <div class="ctn-grid-16"></div>
    </div>
    <div class="ctn-row ctn-reverse">
      <div class="ctn-grid-16"></div>
      <div class="ctn-grid-8"></div>
    </div>
  </div>

Show / Hide for Desktop, Tablet, and Mobile

______

Hide Helper	hide-mobile	hide-tablet	hide-desktop
Show Helper	show-mobile	show-tablet	show-desktop

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

<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. Anonymous

<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

Small Grey

class="small-btn"

Regular Grey

class="btn"

Large Grey

class="large-btn"

Colored Buttons

Dark Grey

class="dark-grey-btn"

Purple

class="purple-btn"

Red

class="red-btn"

Green

class="green-btn"

Blue

class="blue-btn"

Orange

class="orange-btn"

Bordered Buttons

Dark Grey

class="dark-grey-btn"

Purple

class="purple-btn"

Red

class="red-btn"

Green

class="green-btn"

Blue

class="blue-btn"

Orange

class="orange-btn"

Forms

______

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 2 for callout

Headline 3 for callout

Text for the callout

Headline 1 for callout

Text for the callout

Headline 2 for callout

Headline 3 for callout

Text for the callout

Headline 1 for callout

Text for the callout

Headline 2 for callout

Headline 3 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