Headings

Body

Add a class of .two-columns through .five-columns to create a multi-column layout.

Note: All multi-column layouts default to single-column on mobile.

Flexbox

The Corpus grid system uses Flexbox and defaults to equal width columns. Add gutters to to any .row or .column parent container by adding the class .gutters

Percentage Widths

Because flex items default to filling their parent container equally, you can use, for example, a .max-w25 class to create offset layouts.

Viewport Heights

Viewport height utility classes include .vh5, .vh10 and so on through .vh100.

Percentage Heights

To size an element relative to it’s container, use a percentage-based height with .h5, .h10 and so on through .h100.

To add padding and margin, there are classes like .m1, which would be margin: 1rem all around. Or .pt3, which is padding-top: 3rem;

There are a few basic positioning utility classes

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }

Also, you can add the following classes to flex items to position them within their respective containers.

Alternatively, you can add any of the above classes to a parent .row or .column to align it's content.

Distribute items with .space-between

or .space-around

You can layer absolutely positioned elements from back to front with classes depth-1 through depth-10.

Color

Background Color

Border Color

Add a 1px border with the shorthand class .b1. For specific sides and widths, use the same convention, i.e. .br2 for a right border 2px thick, or .bt3 for a top border of 3px. Change the color with border-accent with the desired color.

For both background and inline images, Corpus provides a few utility classes for sizing, postitioning and attachment.

//====================================================
//  Background/Image Size & Position
//====================================================

.bg-no-repeat { background-repeat: no-repeat; }
.bg-cover     { background-size: cover; }
.bg-contain   { background-size: contain; }
.bg-center    { background-position: center; }
.bg-top       { background-position: top; }
.bg-right     { background-position: right; }
.bg-bottom    { background-position: bottom; }
.bg-left      { background-position: left; }

.bg-fixed     { background-attachment: fixed; }
.bg-local     { background-attachment: local; }

.img-cover      { object-fit: cover; }
.img-contain    { object-fit: contain; }
.img-fill       { object-fit: fill; }
.img-scale-down { object-fit: scale-down; }

Prism.js with Predawn

Wrap your code blocks with <pre><code> tags and Prism will guess what language it is and add the appropriate class. Or, manually add a class of language-* to ensure the proper syntax. For numbering, add the class line-numbers.

How to enable highlighting

<pre class="language-markup line-numbers"><code>
  <!-- Your code content here. Likely you'll need to encode any html enitities. -->
</code></pre>

Example of markup highlighting

<p class="mb2">Distribute items with <code>.space-between</code>
<div class="row gutters h-auto bg-white center space-between relative mb2">
  <div class="column max-quarter-width p1 bg-silver">Item 1</div>
  <div class="column max-quarter-width p1 bg-silver">Item 2</div>
</div>

Corpus comes with three breakpoint mixins: small, medium and large:

$small-break: 480px !default;
$medium-break: 800px !default;

@mixin small() {
  @media screen and (max-width: $small-break) {
    @content;
  }
}

@mixin medium() {
  @media screen and (max-width: $medium-break) {
    @content;
  }
}

@mixin large() {
  @media screen and (min-width: $small-break) {
    @content;
  }
}

You can use them like so…

// If sidebar exists, offset <main> by $sidebar-width
.sidebar + main {
  margin-left: $sidebar-width;
  @include small {
    margin-left: 0;
  }
}

//====================================================
//  Display
//====================================================

.hidden       { display: none; }
.block        { display: block; }
.flex         { display: flex; }
.inline       { display: inline; }
.inline-block { display: inline-block; }
.inline-flex  { display: inline-flex; }

.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-auto   { overflow: auto; }

.hide-on-small  { @include small { display: none !important; }}
.hide-on-medium { @include medium { display: none !important; }}
.hide-on-large  { @include large { display: none !important; }}

//====================================================
//  Text wrap
//====================================================

.pre       { white-space: pre; }
.nowrap    { white-space: nowrap; }

//====================================================
//  Scrolling
//====================================================

.scroll-horizontal {
  overflow-x: scroll;
  overflow-y: hidden;
}

.scroll-vertical {
  overflow-x: hidden;
  overflow-y: scroll;
}

.no-scrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;
}

//====================================================
//  Textareas
//====================================================

.resize-none       { resize: none; }
.resize-vertical   { resize: vertical; }
.resize-horizontal { resize: horizontal; }

//====================================================
//  Misc.
//====================================================

.no-pointer-events {
  pointer-events: none;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

Keyframe animations with corresponding classes

Click on each box below to see the animation

Overwrite the default variables

Each file has it’s own !default variables related to that module. To overrwrite them, simply redefine any of the following variables somewhere in your project.

//====================================================
//  _typography.scss
//====================================================

@font-face { font-family: 'Office Code Pro'; src: url('../fonts/OfficeCodePro-Regular.woff'); }
$base-font: 'Helvetica Neue', Helvetica, sans-serif;
$mono-font: 'Office Code Pro', Monaco, Consolas, monospace;
$base-font-size: 1rem;
$base-line-height: 1.6;

$h1: $base-font-size * 2.25;
$h2: $base-font-size * 1.75t;
$h3: $base-font-size * 1.5;
$h4: $base-font-size * 1.25;
$h5: $base-font-size * 1.125;
$h6: $base-font-size;

//====================================================
//  _sizing.scss
//====================================================

$container-width: 1000px;

//====================================================
//  _sidebar.scss
//====================================================

$sidebar-width: 300px;

//====================================================
//  _colors.scss
//====================================================

$accent:    #F18260;
$white:     #fff;
$silver:    #F4F4F4;
$lightgrey: #ececec;
$grey:      #ccc;
$midgrey:   #777;
$darkgrey:  #444;
$black:     #222;
$trueblack: #000;

//====================================================
//  _syntax.scss
//====================================================

// Cools
$paleblue:   #BDDCDC;
$blue:       #92BFBF;
$slate:      #5F777E;
$palegreen:  #D0EDA7;
$green:      #B4D388;
$darkgreen:  #809161;

// Warms
$paleyellow: #F5F5AE;
$yellow:     #EDE480;
$orange:     #F49D62;
$red:        #CF5340;
$darkred:    #893121;
$maroon:     #55201B;

//====================================================
//  _whitespace.scss
//====================================================

$padding: 2%;
$padding:   1rem;
$margin:  2%;
$margin:    1rem;

//====================================================
//  _borders.scss
//====================================================

$border-style: solid;
$border-color: rgba(0,0,0,0.1);
$border-radius: 3px;

$border-1: 1px;
$border-2: 2px;
$border-3: 3px;

//====================================================
//  _breakpoints.scss
//====================================================

$small-break: 480px;
$medium-break: 800px;

@mixin small() {
  @media screen and (max-width: $small-break) {
    @content;
  }
}

@mixin medium() {
  @media screen and (max-width: $medium-break) {
    @content;
  }
}

@mixin large() {
  @media screen and (min-width: $small-break) {
    @content;
  }
}