Intro

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, Autoprefixer, LiveReload, uilang and GitHub Pages.

typography

_typography.scss

Headings

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.

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.

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.

grid

_grid.scss

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

.column
.column
.column
.column
.column
.w100
.w75
.w25
.w65
.w35
.w50
.w50

sizing

_sizing.scss

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.

.column
.max-w25

Viewport Heights

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

.vh10
.vh25

Percentage Heights

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

.h25
.h50

whitespace

_whitespace.scss

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

positioning

_positioning.scss

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.

.top-left
.top-center
.top-right
.center-left
.center
.center-right
.bottom-left
.bottom-center
.bottom-right

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

depth

_depth.scss

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

.depth-1
.depth-2
.depth-8
.depth-10

forms

_forms.scss
Fieldset

buttons

_buttons.scss

colors

_colors.scss

Color

.color-white
.color-silver
.color-lightgrey
.color-grey
.color-midgrey
.color-darkgrey
.color-black
.color-trueblack
.color-accent

Background Color

.bg-white
.bg-silver
.bg-lightgrey
.bg-grey
.bg-midgrey
.bg-darkgrey
.bg-black
.bg-trueblack
.bg-accent

Border Color

.border-white
.border-silver
.border-lightgrey
.border-grey
.border-midgrey
.border-darkgrey
.border-black
.border-trueblack
.border-accent

borders

_borders.scss

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.

.b1
.br2
.bb3
.bl1

images

_images.scss

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; }

syntax

_syntax.scss

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>

breakpoints

_breakpoints.scss

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;
  }
}

utilities

_utilities.scss

//====================================================
//  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;
}

animation

_animation.scss

Keyframe animations with corresponding classes

Click on each box below to see the animation

fadeIn
fadeOut
fadeInUp
fadeInDown
scaleUp
scaleDown
slideUp
slideDown
slideLeft
slideRight
flipIn
rotateRight
rotateLeft
flash
shake
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"

variables

_variables.scss

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;
  }
}