Core Grid

Core Grid System v1.10.1

Core Grid is a dynamic mobile first Sass/CSS grid. Core grid uses traditional float based columns to provide the best browser support. In addition helper classes for flexbox are included that can progressively enhance UI layouts.

Primary Grid

The first primary default is optimized for single column mobile first layout. All columns start at a width of 100%. Use the specified class name to trigger columns at the corresponding container width. The class structure is the following (.column-width-breakpoint)

Example ".col-6-md"

• ".col" defines that you want a column.
• "-6" defines how many columns you want the column to span.
• "-md" defines the default breakpoint you would like your column width to be triggered at.

Dynamic Layouts

Core Grid allows dynamic changing of column sizes. Example below we have four containers. By default they are 100% in width. At our "-sm" breakpoint they will span the width of 6 columns. The second class "-lg" defines our second change that will occur at the large breakpoint. This will trigger the columns to span 3 columns wide.

Grid Layout

Containing Classes (max-width)

Using containing classes you can contain elements width proportionally to the max width of the ".container" class. This allows columns to be created that are flexible but do not scale with the view port. Example if we add a ".col-6-contain" the element max width will be half of the ".container" class width. (1100/2 = 550px). This can be useful for setting a max width on objects such as forms.

Utilities

By leveraging Sass we can have a true mobile first responsive grid and still support older IE versions. Using special Sass mixins we can create a separate old IE style sheet for a fixed grid for our media queries to support ie8 and below. To read more on this please read Jake Archibalds great blog post here.

Core Grid contains multiple helper classes to show and hide content to the corresponding grid breakpoints.

Flexbox Helpers

Flexbox is the new standard for CSS layout. Flexbox is only used in core grid for minor layout enhancements as browser support for flexbox is still not widely supported (ie11+). The flexbox helper classes can help achieve same column heights and vertical alignment with the core grid. Flexbox helpers should not be used for critical layout features unless ie10+ is suitable with the project. Learn about flexbox

/* --- Flexbox helpers included --- */
.flex 
.flex-row 
.flex-vertical-align 
.flex-horizontal-align 
.flex-full-height 

Flexbox Examples

Here are some simple examples of what the flexbox helpers can accomplish.

Flexbox horizontal and vertical centering

Layout Helpers

Layout helpers are for elements or small modules that only need a small layout change such as display: inline to display: block;. Layout helper classes should not be used on modules or elements that have Sass modules or classes already applied.

/* --- Layout helpers --- */
.display-none {
    display: none;
}
.display-none-important {
    display: none !important;
}
.display-block {
    display: block;
}
.display-inline-block {
    display: inline-block;
}
.visible-hidden {
    visibility: hidden;
}
.block-center {
    margin-left: auto;
    margin-right: auto;
    display: block;
    float: none;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.full-width {
    width: 100%;
}
.clear-both {
    clear: both;
}
     
/* Line Hight Set http://csswizardry.com/2012/06/single-direction-margin-declarations/ */
html {
    font-size: 16px;
    line-height: 1.5rem;
}
     
h1, h2, h3, h4, h5, h6, hgroup,
ul, ol, dl, blockquote, p, address,
table, fieldset, figure, pre, .header, img {
    margin: 0;
    margin-bottom: 1.5rem;
}
      
/* Margin and Padding Helpers */
.margin-top {
    margin-top: 24px;
}
     
.margin-bottom {
    margin-bottom: 24px;
}
     
.margin-top-small {
    margin-top: 12px;
}
     
.margin-bottom-small {
    margin-bottom: 12px;
}
     
.padding-bottom-none {
    padding-bottom: 0;
}