Hoisin.scss

These are a series of layout samples using Hoisin.scss grid system and its helpers. You can resize the browser window to see how they react in different screen sizes.

Go back to main page.

Desktop grid system

.col12

.col3

.col3

.col3

.col3

.col2

.col2

.col2

.col2

.col2

.col2

Nested grids

Add a new .container inside any .col* to create nested grids.

.col8

.col4 nested
.col4 nested
.col2 nested
.m-half
.col2 nested
.m-half

.col4 .m-full

Breakpoint helpers

Use extra classes to override default behaviour for the spans

.col4

.col4

.col4
.m-full

.col8
.m-2_3

.col4
.m-1_3

.col8
.m-half

.col4
.m-half

.col2
.m-1_3
.s-full

.col2
.m-1_3
.s-full

.col2
.m-1_3
.s-full

.col6
.m-full

Offset & centered columns

.col4
.pre2

.col5
.center

Inverted order columns

The colum with class .colr is placed after .col8 on large and medium screens even though it's before in the code flow, as shown on mobile

.col4 .m-1_3
.colr

.col8 .m-1_3

Color Functions

Color functions to handle simple color changes like darken and lighten, but with more granular control that native darken and lighten functions.

Red p.red

 

.red-light {
  color: dark($red, 50%);
}
          

Red p.red-dark

 

.red-light {
  color: light($red, 70%);
}
          

Lighter red p.red-light

Layout Functions

Semantic layout is easier now, by using the layout functions as grid values, no need to add class names.

Main content

 

@media (min-width: $bp-l) {
  .cont {
    width: span(8);
    float: left;
    margin: 0 ($gutter / 2);
  }
}
@media (min-width: $bp-xl) {
  .cont {
    width: span-xl(8);
    margin: 0 ($xl-gutter / 2);
  }
}
@media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {
  .box {
    margin-bottom: 10px;
  }
  .cont {
    width: span-fw(m-2_3);
    float: left;
    padding: 0 ($gutter / 4);
    @include box-sizing;
  }
}