Layout

Layout modules are more complex than utilities and are tied to markup structure. They are designed to be highly reusable and to inter-operate with other styles.

Grid

basscss-grid v0.0.15

basscss.com

The utility-based grid allows a lot of flexibility in creating complex layouts.

Start by using a .clearfix container. Optionally use a .container to set a max-width. Adjust the container width with the --container-width variable.

<div class="container">
  <div class="clearfix">
  </div>
</div>

Add columns using the .col and grid width .col-N classes. .col floats elements left and sets box-sizing to border-box. .col-N sets width according to a 12 column grid. The total number of columns in a row should add up to 12.

.col.col-6
.col.col-6
<div class="clearfix outline-blue">
  <div class="col col-6">.col.col-6</div>
  <div class="col col-6">.col.col-6</div>
</div>

Responsive Grid

Use breakpoint-prefixed column utilities to change the grid at different screen widths. Each breakpoint applies to that screen width and up. Unprefixed styles apply to all screen widths.

Start the grid from the small breakpoint and up with the .sm-col and .sm-col-6 utilities.

.sm-col.sm-col-6
.sm-col.sm-col-6
<div class="clearfix outline-blue">
  <div class="sm-col sm-col-6">.sm-col.sm-col-6</div>
  <div class="sm-col sm-col-6">.sm-col.sm-col-6</div>
</div>

Add grid width adjustments for larger breakpoints.

.sm-col.sm-col-6.md-col-5.lg-col-4
.sm-col.sm-col-6.md-col-7.lg-col-8
<div class="clearfix outline-blue">
  <div class="sm-col sm-col-6 md-col-5 lg-col-4">.sm-col.sm-col-6.md-col-5.lg-col-4</div>
  <div class="sm-col sm-col-6 md-col-7 lg-col-8">.sm-col.sm-col-6.md-col-7.lg-col-8</div>
</div>

Gutters

Use padding and negative margin utilities to create gutters based on the white space scale. When using negative margin, be sure to compensate for the extra width created with a padded parent element or by using overflow hidden. Otherwise, horizontal scrolling may occur.

Create gutters with a width of 2 on the white space scale using mxn2 and px2.

.px2
.px2
<div class="clearfix mxn2 outline-blue">
  <div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div>.px2</div></div>
  <div class="sm-col sm-col-6 md-col-7 lg-col-8 px2"><div>.px2</div></div>
</div>

For larger or smaller gutters, use any of the white space utilities.

.px1
.px1
.px3
.px3
<div class="clearfix mxn1 outline-blue">
  <div class="col col-6 px1"><div>.px1</div></div>
  <div class="col col-6 px1"><div>.px1</div></div>
</div>
<div class="clearfix mxn3 outline-blue">
  <div class="col col-6 px3"><div>.px3</div></div>
  <div class="col col-6 px3"><div>.px3</div></div>
</div>

Nesting

Nest whole grid structures within columns to created nested grids.

Unnested
Nested
Nested
<div class="clearfix mxn2 outline-blue">
  <div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div>Unnested</div></div>
  <div class="sm-col sm-col-6 md-col-7 lg-col-8 px2">
    <div class="clearfix mxn2">
      <div class="col col-6 px2"><div>Nested</div></div>
      <div class="col col-6 px2"><div>Nested</div></div>
    </div>
  </div>
</div>

Reversed

To reverse the order of columns, use the .col-right class to float right

.col-right.col-6
.col.col-6
<div class="clearfix outline-blue">
  <div class="col-right col-6">.col-right.col-6</div>
  <div class="col col-6">.col.col-6</div>
</div>

Centering Columns

Use the .mx-auto class to center columns within their containers.

Centered Column
<div class="clearfix mxn2 outline-blue">
  <div class="col-8 px2 mx-auto">
    <div>Centered Column</div>
  </div>
</div>

Breakpoint Based Floats

Column float utilities can be used independently of width utilities.

.sm-col
.overflow-hidden
<div class="clearfix border border-blue">
  <div class="sm-col p2 border border-blue">.sm-col</div>
  <div class="overflow-hidden border border-blue">.overflow-hidden</div>
</div>

Width Utilities

Column width utilities can also be used independently to add percentage based widths to any block or inline-block element.

.sm-col-6.md-col-4

Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.

<div class="border border-blue">
  <div class="right sm-col-6 md-col-4 p2 border border-blue">.sm-col-6.md-col-4</div>
  <p>Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.</p>
</div>

CSS Source

58 Rules
58 Selectors
68 Declarations
7 Properties
/* Basscss Grid */

.container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
}

.col {
  float: left;
  box-sizing: border-box;
}

.col-right {
  float: right;
  box-sizing: border-box;
}

.col-1 {
  width: calc(1/12 * 100%);
}

.col-2 {
  width: calc(2/12 * 100%);
}

.col-3 {
  width: calc(3/12 * 100%);
}

.col-4 {
  width: calc(4/12 * 100%);
}

.col-5 {
  width: calc(5/12 * 100%);
}

.col-6 {
  width: calc(6/12 * 100%);
}

.col-7 {
  width: calc(7/12 * 100%);
}

.col-8 {
  width: calc(8/12 * 100%);
}

.col-9 {
  width: calc(9/12 * 100%);
}

.col-10 {
  width: calc(10/12 * 100%);
}

.col-11 {
  width: calc(11/12 * 100%);
}

.col-12 {
  width: 100%;
}

@media (--breakpoint-sm) {
  .sm-col {
    float: left;
    box-sizing: border-box;
  }

  .sm-col-right {
    float: right;
    box-sizing: border-box;
  }

  .sm-col-1 {
    width: calc(1/12 * 100%);
  }

  .sm-col-2 {
    width: calc(2/12 * 100%);
  }

  .sm-col-3 {
    width: calc(3/12 * 100%);
  }

  .sm-col-4 {
    width: calc(4/12 * 100%);
  }

  .sm-col-5 {
    width: calc(5/12 * 100%);
  }

  .sm-col-6 {
    width: calc(6/12 * 100%);
  }

  .sm-col-7 {
    width: calc(7/12 * 100%);
  }

  .sm-col-8 {
    width: calc(8/12 * 100%);
  }

  .sm-col-9 {
    width: calc(9/12 * 100%);
  }

  .sm-col-10 {
    width: calc(10/12 * 100%);
  }

  .sm-col-11 {
    width: calc(11/12 * 100%);
  }

  .sm-col-12 {
    width: 100%;
  }
}

@media (--breakpoint-md) {
  .md-col {
    float: left;
    box-sizing: border-box;
  }

  .md-col-right {
    float: right;
    box-sizing: border-box;
  }

  .md-col-1 {
    width: calc(1/12 * 100%);
  }

  .md-col-2 {
    width: calc(2/12 * 100%);
  }

  .md-col-3 {
    width: calc(3/12 * 100%);
  }

  .md-col-4 {
    width: calc(4/12 * 100%);
  }

  .md-col-5 {
    width: calc(5/12 * 100%);
  }

  .md-col-6 {
    width: calc(6/12 * 100%);
  }

  .md-col-7 {
    width: calc(7/12 * 100%);
  }

  .md-col-8 {
    width: calc(8/12 * 100%);
  }

  .md-col-9 {
    width: calc(9/12 * 100%);
  }

  .md-col-10 {
    width: calc(10/12 * 100%);
  }

  .md-col-11 {
    width: calc(11/12 * 100%);
  }

  .md-col-12 {
    width: 100%;
  }
}

@media (--breakpoint-lg) {
  .lg-col {
    float: left;
    box-sizing: border-box;
  }

  .lg-col-right {
    float: right;
    box-sizing: border-box;
  }

  .lg-col-1 {
    width: calc(1/12 * 100%);
  }

  .lg-col-2 {
    width: calc(2/12 * 100%);
  }

  .lg-col-3 {
    width: calc(3/12 * 100%);
  }

  .lg-col-4 {
    width: calc(4/12 * 100%);
  }

  .lg-col-5 {
    width: calc(5/12 * 100%);
  }

  .lg-col-6 {
    width: calc(6/12 * 100%);
  }

  .lg-col-7 {
    width: calc(7/12 * 100%);
  }

  .lg-col-8 {
    width: calc(8/12 * 100%);
  }

  .lg-col-9 {
    width: calc(9/12 * 100%);
  }

  .lg-col-10 {
    width: calc(10/12 * 100%);
  }

  .lg-col-11 {
    width: calc(11/12 * 100%);
  }

  .lg-col-12 {
    width: 100%;
  }
}

@custom-media --breakpoint-sm (min-width: 40em);

@custom-media --breakpoint-md (min-width: 52em);

@custom-media --breakpoint-lg (min-width: 64em);

:root {
  --container-width: 64em;
}

Flex Object

flex-object v1.0.7

The flex-object is a powerful suite of utilities based on the flexible box layout module. These utilities can replace the need for a grid system in many instances, but can also be combined with the Basscss grid for even more possibilities.

Note: browser support for the flexible box layout module is limited. See http://caniuse.com/#feat=flexbox

.flex

To begin, add the .flex class to a parent element. This sets the element to display: flex and enables a flex context for all direct child elements.

Hamburger
Hamburger
<div class="flex">
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="px2 py1 border border-blue">Hamburger</div>
</div>

.flex-wrap

To wrap elements, use the .flex-wrap utility.

Hamburger
Hamburger
Hamburger
Hamburger
Hamburger
Hamburger
Hamburger
Hamburger
<div class="flex flex-wrap">
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="px2 py1 border border-blue">Hamburger</div>
</div>

.flex-column

To arrange items vertically, use the .flex-column utility.

Hamburger
Hamburger
Hamburger
<div class="flex flex-column">
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="px2 py1 border border-blue">Hamburger</div>
</div>

Alignment

Use these utilities to control vertical alignment of child elements.

.flex-center

To vertically center child elements, add the .flex-center class to the parent element.

Hamburger

Hot dog
<div class="flex flex-center">
  <div class="flex-auto px2 py4 blue border border-blue">
    <h1 class="m0">Hamburger</h1>
  </div>
  <div class="px2 blue border border-blue">Hot dog</div>
</div>

.flex-stretch

To stretch all elements to fill the height of the parent, use the .flex-stretch utility.

Hamburger

Hot dog
<div class="flex flex-stretch">
  <div class="flex-auto px2 py4 blue border border-blue">
    <h1 class="m0">Hamburger</h1>
  </div>
  <div class="px2 blue border border-blue">Hot dog</div>
</div>

.flex-stretch with nested content

To ensure nested elements stretch as well, add the .flex class to relevant elements.

Hamburger

Hot dog
<div class="flex flex-stretch">
  <div class="flex-auto px2 py4 blue border border-blue">
    <h1 class="m0">Hamburger</h1>
  </div>
  <div class="flex blue border border-blue">
    <div class="px2 white bg-blue">
      Hot dog
    </div>
  </div>
</div>

.flex-baseline

To align child elements to their baseline, use the .flex-baseline utility.

Hamburger

Hot dog
<div class="flex flex-baseline blue border-bottom border-blue">
  <div class="flex-auto px2">
    <h1 class="m0">Hamburger</h1>
  </div>
  <div class="px2">Hot dog</div>
</div>

.flex-start

To align child elements to the top, use the .flex-start utility.

Hamburger

Hot dog
<div class="flex flex-start blue border-top border-blue">
  <div class="flex-auto px2">
    <h1 class="m0">Hamburger</h1>
  </div>
  <div class="px2">Hot dog</div>
</div>

.flex-end

To align child elements to the bottom, use the .flex-end utility.

Hamburger

Hot dog
<div class="flex flex-end blue border-bottom border-blue">
  <div class="flex-auto px2">
    <h1 class="m0">Hamburger</h1>
  </div>
  <div class="px2">Hot dog</div>
</div>

Responsive Utilities

To set display flex only at certain breakpoints and up, use the breakpoint-prefixed versions of .flex. All other utilities will only work at the set breakpoint.

.sm-flex

Hamburger
Hamburger

.md-flex

Hamburger
Hamburger

.lg-flex

Hamburger
Hamburger
<div class="sm-flex flex-center mb2 blue">
  <div class="p1 border border-blue">
    <h2 class="m0">.sm-flex</h2>
  </div>
  <div class="flex-auto p1 border border-blue">Hamburger</div>
  <div class="p1 border border-blue">Hamburger</div>
</div>
<div class="md-flex flex-center mb2 blue">
  <div class="p1 border border-blue">
    <h2 class="m0">.md-flex</h2>
  </div>
  <div class="flex-auto p1 border border-blue">Hamburger</div>
  <div class="p1 border border-blue">Hamburger</div>
</div>
<div class="lg-flex flex-center mb2 blue">
  <div class="p1 border border-blue">
    <h2 class="m0">.lg-flex</h2>
  </div>
  <div class="flex-auto p1 border border-blue">Hamburger</div>
  <div class="p1 border border-blue">Hamburger</div>
</div>

Child elements

To control the size and behavior of child elements, use these utilities.

.flex-auto

To make an element grow or shrink as needed, use the .flex-auto utility.

Hamburger
Hamburger
Hamburger
<div class="flex">
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="flex-auto blue border border-blue"></div>
  <div class="px2 py1 border border-blue">Hamburger</div>
</div>

.flex-grow

To make an element grow, but not shrink, use the .flex-grow utility.

Hamburger
Hamburger
Hamburger
<div class="flex">
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="flex-grow blue border border-blue"></div>
  <div class="px2 py1 border border-blue">Hamburger</div>
</div>

.flex-none

To prevent an element from growing or shrinking, use the .flex-none utility.

Hamburger
Hamburger
Hamburger
<div class="flex">
  <div class="flex-auto px2 py1 border border-blue">Hamburger</div>
  <div class="flex-auto px2 py1 border border-blue">Hamburger</div>
  <div class="flex-none px2 py1 border border-blue">Hamburger</div>
</div>

Ordering

To change the order of child elements, use the .flex-first and .flex-last utilities.

.flex-first

Hamburger
First Hamburger
Hamburger
<div class="flex">
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="flex-first px2 py1 border border-blue">First Hamburger</div>
  <div class="px2 py1 border border-blue">Hamburger</div>
</div>

.flex-last

Hamburger
Last Hamburger
Hamburger
<div class="flex">
  <div class="px2 py1 border border-blue">Hamburger</div>
  <div class="flex-last px2 py1 border border-blue">Last Hamburger</div>
  <div class="px2 py1 border border-blue">Hamburger</div>
</div>

Parent Element Utilities

.flex          { display: flex }
.flex-column   { flex-direction: column }
.flex-wrap     { flex-wrap: wrap }
.flex-center   { align-items: center }
.flex-baseline { align-items: baseline }
.flex-stretch  { align-items: stretch }
.flex-start    { align-items: flex-start }
.flex-end      { align-items: flex-end }

Child Element Utilities

.flex-first { order: -1 }
.flex-last  { order: 1024 }
.flex-auto  { flex: 1 1 auto }
.flex-grow  { flex: 1 0 auto }
.flex-none  { flex: none }

CSS Source

20 Rules
20 Selectors
20 Declarations
7 Properties
/*
 * Basscss Flex Object
 */

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-center {
  align-items: center;
}

.flex-baseline {
  align-items: baseline;
}

.flex-stretch {
  align-items: stretch;
}

.flex-start {
  align-items: flex-start;
}

.flex-end {
  align-items: flex-end;
}

.flex-first {
  order: -1;
}

.flex-last {
  order: 1024;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-grow {
  flex: 1 0 auto;
}

.flex-none {
  flex: none;
}

.flex > div {
  box-sizing: border-box;
}

@media (--breakpoint-sm) {
  .sm-flex {
    display: flex;
  }

  .sm-flex > div {
    box-sizing: border-box;
  }
}

@media (--breakpoint-md) {
  .md-flex {
    display: flex;
  }

  .md-flex > div {
    box-sizing: border-box;
  }
}

@media (--breakpoint-lg) {
  .lg-flex {
    display: flex;
  }

  .lg-flex > div {
    box-sizing: border-box;
  }
}

@custom-media --breakpoint-sm (min-width: 40em);

@custom-media --breakpoint-md (min-width: 52em);

@custom-media --breakpoint-lg (min-width: 64em);