Base

A modern framework for a modern web.

View on GitHub

Overview Grid Breakpoints Utility

Grid

At the heart of every great framework is a grid system. Base is no different.

Based on flexbox

A modern layout system that uses the latest and greatest of browser technologies.

Mobile-first

Start with a grid size for mobile and enhance for larger widths using responsive suffixes.

Written in SASS / SCSS

Integrate with your existing SCSS, extend and modify as needed.

Easy but powerful

Designed to be simple and easy to learn, but is as powerful as you need it to be.

12-column layout

The grid system is based on a 12-column, fluid-width layout. Widths of each column can be defined using fractional names (e.g. one-half, two-thirds, etc.).

Equal-width columns

You can define the number of columns using the .grid-N CSS classes, where N is the number of columns.

Responsive suffixes

Change the number of columns at different screen widths using responsive suffixes, i.e. adding -at-SCREENSIZE, where SCREENSIZE is one of: extra-small, small, medium, large, or extra-large.

Vertical positioning

By default, columns are vertically positioned at the top, but the positioning of each column can be changed by using valign-POSITION, where POSITION is one of: middle, bottom.

Content alignment

If the content doesn't fill the full width of the 12-column layout, the columns can be aligned using align-POSITION, where POSITION is one of: center, right.

Content alignment (cont.)

The remaining space can also be distributed around or between the columns using align-space-around or align-space-between.

Flushed content

To have the grid columns flushed with one another without any spacing between them, use the grid-flushed class.

Breakpoints

Base's .content container uses a fixed width at different breakpoints so that the content size is predictable.

Widths

Size	Viewport width	Content width
extra-small	>= 374px	324px
small	>= 480px	424px
medium	>= 718px	680px
large	>= 1024px	868px
extra-large	>= 1292px	1016px

SASS / SCSS helpers

Base comes with a few mixins to help generate mobile-first, responsive rules at different breakpoints.

@mixin breakpoint($selector)

.foo {
  color: red;

  @include breakpoint($breakpoint-small) {
    color: blue;
  }
}

Output

.foo {
  color: red;
}
@media (min-width: 480px) {
  .foo {
    color: blue;
  }
}

@mixin breakpoint-rule($selector)

@include breakpoint-rule(".foo") {
  color: red;
}

Output

.foo {
  color: red;
}
@media (min-width: 374px) {
  .foo-at-extra-small {
    color: red;
  }
}
@media (min-width: 480px) {
  .foo-at-small {
    color: red;
  }
}
/* etc. */

Utility classes

Base contains a bunch of utility classes to help style elements without having to write arbitrary CSS rules. For example, hide elements by adding class="hide". Utility classes contain responsive variants as well, so you can hide an element only on small screens by using class="hide show-at-medium".

Utility class	CSS equivalent
`hide`	`display: none`
`show`	`display: block`
`display-block`	`display: block`
`display-inline`	`display: inline`
`display-inline-block`	`display: inline-block`
`text-align-center`	`text-align: center`
`text-align-left`	`text-align: left`
`text-align-right`	`text-align: right`
`text-transform-capitalize`	`text-transform: capitalize`
`text-transform-lowercase`	`text-transform: lowercase`
`text-transform-none`	`text-transform: none`
`text-transform-uppercase`	`text-transform: uppercase`