Corpus is yet another CSS toolkit. It’s basically a collection of the things I find myself returning to for each new project. It uses Flexbox for the grid system, viewport-based heights and percentage-based widths, is heavily influenced by Basscss’s White Space module, and has a few useful greyscale color utilities. For syntax highlighting I'm using Prism.js and my own Predawn color scheme, with code set in Office Code Pro. Styles are written in SCSS.

Download on GitHub
In addition to Corpus, this site was built with Sublime Text, Jekyll, Gulp, BrowserSync, uilang and GitHub Pages.




h1: A collection of written texts

h2: The entire works of a particular author

h3: A body of writing on a particular subject

h4: The main body or mass of a structure

h5: A collection of written material in machine-readable form
h6: Assembled for the purpose of studying linguistic structures, frequencies, etc.


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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Sed posuere consectetur est at lobortis. Fusce dapibus, /.meteor/packages tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.




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;

.mlr1 .p2
.ml2 .p1



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.

Item 1
Item 2

Distribute items with .space-between

Item 1
Item 2

or .space-around

Item 1
Item 2



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










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

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>



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) {

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

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

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

clicking on ".fadeIn-demo" toggles class "fadeIn" on ".fadeIn-demo" clicking on ".fadeOut-demo" toggles class "fadeOut" on ".fadeOut-demo" clicking on ".fadeInUp-demo" toggles class "fadeInUp" on ".fadeInUp-demo" clicking on ".fadeInDown-demo" toggles class "fadeInDown" on ".fadeInDown-demo" clicking on ".scaleUp-demo" toggles class "scaleUp" on ".scaleUp-demo" clicking on ".scaleDown-demo" toggles class "scaleDown" on ".scaleDown-demo" clicking on ".slideUp-demo" toggles class "slideUp" on ".slideUp-demo" clicking on ".slideDown-demo" toggles class "slideDown" on ".slideDown-demo" clicking on ".slideLeft-demo" toggles class "slideLeft" on ".slideLeft-demo" clicking on ".slideRight-demo" toggles class "slideRight" on ".slideRight-demo" clicking on ".flipIn-demo" toggles class "flipIn" on ".flipIn-demo" clicking on ".rotateRight-demo" toggles class "rotateRight" on ".rotateRight-demo" clicking on ".rotateLeft-demo" toggles class "rotateLeft" on ".rotateLeft-demo" clicking on ".flash-demo" toggles class "flash" on ".flash-demo" clicking on ".shake-demo" toggles class "shake" on ".shake-demo"



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) {

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

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