Currently v1.2.0 Download BaseWeb

Core

This is the heart and soul of BaseWeb. At a bear minimum, the Settings and Core files are required for BaseWeb to function. Core files do not output styles directly but are a collection of global functions and mixins.

Functions

This is where we define custom functions for our framework. These functions are global and don't apply specifically to a single element/block component.

  • map-extend

    jQuery-style extend function for when `map-merge()` is not enough. Use when you need to merge more than two mixins and/or need our merge to be recursive.

    @function map-extend( $map, $maps..., $deep )
    // @param $map
    //   @type first map
    // @param $maps
    //   @type list of maps
    // @param $deep
    //   @type boolean
    //   @desc Whether or not to enable recursive mode.
    // @return merged map value

    Example Usage

    
    $grid-configuration-default: (
      'columns': 12,
      'layouts': (
        'small': 800px,
        'medium': 1000px,
        'large': 1200px,
      ),
    );
    
    $grid-configuration-custom: (
      'layouts': (
        'large': 1300px,
        'huge': 1500px
      ),
    );
    
    $grid-configuration-user: (
      'direction': 'ltr',
      'columns': 16,
      'layouts': (
        'large': 1300px,
        'huge': 1500px
      ),
    );
    
    // Not deep
    $grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user);
    // -> ("columns": 16, "layouts": (("large": 1300px, "huge": 1500px)), "direction": "ltr")
     
    // Deep
    $grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user, true);
    // -> ("columns": 16, "layouts": (("small": 800px, "medium": 1000px, "large": 1300px, "huge": 1500px)), "direction": "ltr")
    
  • map-fetch

    An easy way to fetch a value in a multi-level map. Works much like map-get() except that you pass multiple keys as the second variable argument to go down multiple levels in the nested map.

    @function map-fetch( $map, $keys... )
    // @param $map
    //   @type map
    // @param $keys
    //   @type list
    // @return map value

    Example Usage

    
    $grid-configuration: (
      'columns': 12,
      'layouts': (
        'small': 800px,
        'medium': 1000px,
        'large': 1200px,
      ),
    );
    
    // Without `map-fetch`
    $medium: map-get(map-get($grid-configuration, 'layouts'), 'medium');
    
    // With `map-fetch`
    $medium: map-fetch($grid-configuration, 'layouts', 'medium');
    
  • map-set

    An easy to to set a deep value in a multi-level map. This by passing in a map, value and keys to the original map value you want changed.

    @function map-set( $map, $value, $keys... )
    // @param $map
    //   @type map
    // @param $value
    //   @type value
    // @param $keys
    //   @type list
    // @return updated map value

    Example Usage

    
    $grid-configuration: (
      'columns': 12,
      'layouts': (
        'small': 800px,
        'medium': 1000px,
        'large': 1200px,
      ),
    );
     
    // Without `map-set`
    $grid-configuration: map-merge($grid-configuration, map-merge(map-get($grid-configuration, 'layouts'), ('large': 1300px)));
     
    // With `map-set`
    $medium: map-set($grid-configuration, 1300px, 'layouts' 'medium');
    
  • strip-units

    Strips the unit from a value. For example, if you pass it 12px, it will strip off the px unit and return the number 12.

    @function strip-units( $val )
    // @param $val
    //   @type unit (pixel, em, percent, number)
    // @return number
  • px-to-em

    Converts a pixel value to ems. By default it'll use the base font size, but can be passed a custom base font size.

    @function px-to-em( $px, $base )
    // @param $px
    //   @type unit (pixel, number)
    // @param $base-font-size
    //   @type unit (pixel, number)
    //   @default $base-font-size
    // @return unit (em)
  • px-to-rem

    Converts a pixel value to rems. Rem units use the base font size set on the <html> element which BaseWeb uses $base-font-size to set.

    @function px-to-rem( $px )
    // @param $px
    //   @type unit (pixel, number)
    // @return unit (rem)
  • em-to-px

    Converts an em value to pixels. By default it'll use the base font size, but can be passed a custom base font size.

    @function em-to-px( $em, $base )
    // @param $px
    //   @type unit (em, number)
    // @param $base-font-size
    //   @type unit (pixel, number)
    //   @default $base-font-size
    // @return unit (px)

Mixins

Global mixins for our framework. These mixins are global and don't apply specifically to a single element/block component.

  • clearfix

    Allows you to clear an element that contains floats.

    @mixin clearfix()

    Example Usage

    // SCSS
    .wrapper {
      @include clearfix();
    }
    
    // CSS Output
    .wrapper:after {
      content: '';
      display: table;
      clear: both;
    }
  • remove-clearfix

    Removes the clearfix styles from an element. This is typically used when a clearfix is inherited on an element and you'd like it removed.

    @mixin remove-clearfix()
  • float-modifiers

    Adds the float modifier classes to an element.

    @mixin float-modifiers( $left, $right )
    // @param $left
    //   @type class name
    //   @default $class-float-left
    // @param $right
    //   @type class name
    //   @default $class-float-right

    Example Usage

    // SCSS
    .button-group-wrapper .button-group {
      float: left;
      @include float-modifiers();
    }
    
    // CSS Output
    .button-group-wrapper .button-group {
      float: left;
    }
    .button-group-wrapper .button-group.float-left {
      float: left;
    }
    .button-group-wrapper .button-group.float-right {
      float: right;
    }
    
  • size

    Shorthand for adding width and height dimensions to an element. If you only pass in a width, the height will be set to equal the width and create a square. If either the width or height are unit-less, it defaults to pixels.

    @mixin size( $height, $width )
    // @param $width
    //   @type unit (number, pixel, percentage)
    // @param $height
    //   @type unit (number, pixel, percentage, false)
    //   @default false -> $width

    Example Usage

    // SCSS
    .my-special-box {
      @include size(100px, 50px);
      ...
    }
    
    // CSS Output
    .my-special-box {
      width: 100px;
      height: 50px;
      ...
    }
    
  • vertical-center

    Centers an element vertically within it's parent. Parent element may need to have transform-style set to `preserve-3d` to prevent half pixel bluring.

    @mixin vertical-center()

    Example Usage

    // SCSS
    .vertical-center {
      @include vertical-center();
    }
    
    // CSS Output
    .vertical-center {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
  • scrollable

    Makes touch devices use momentum-based scrolling for the given element.

    @mixin scrollable()
  • box-sizing

    The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements.

    @mixin box-sizing( $box-sizing )
    // @param $box-sizing
    //   @type box-sizing value (content-box, padding-box, border-box, inherit)
    //   @default $box-sizing
  • box-shadow

    The box-shadow CSS property describes one or more shadow effects as a comma-separated list.

    @mixin box-shadow( $shadow... )
    // @param $shadow
    //   @type box-shadow value ([horizontal offset] [vertical offset] [blur radius] [spread radius] [color])
    //   @default $box-shadow
  • border-radius

    Define border radius using mixin shorthand and global defaults.

    @mixin border-radius( $radius )
    // @param $radius
    //   @type unit (pixel, percent)

    Example Usage

    // SCSS
    .box-1 {
      @include border-radius();
    }
    .box-2 {
      @include border-radius-left(20px);
    }
    .box-3 {
      @include border-radius-top(50%);
    }
    
    // CSS Output
    .box-1 {
      border-radius: 3px;
    }
    .box-2 {
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
    }
    .box-3 {
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
    }

    Available Mixins

    • border-radius()
    • border-radius-top()
    • border-radius-top-left()
    • border-radius-top-right()
    • border-radius-bottom()
    • border-radius-bottom-left()
    • border-radius-bottom-right()
    • border-radius-left()
    • border-radius-left-top()
    • border-radius-left-bottom()
    • border-radius-right()
    • border-radius-right-top()
    • border-radius-right-bottom()

    For the list above of available mixins, I'm passing in a border-radius of 50% so the effect is more obvious.

  • transform

    The CSS transform property lets you modify the coordinate space of the CSS visual formatting model.

    @mixin transform( $function... )
    // @param $function
    //   @type transform-function ([matrix] [perspective] [rotate] [scale] [skew] [translate])

    Example Usage

    // SCSS
    .demo-transform-skew {
      ...
      @include transform(skew(30deg, 10deg));
    }
    
    // CSS Output
    .demo-transform-skew {
      ...
      -webkit-transform: skew(30deg, 10deg);
      -ms-transform: skew(30deg, 10deg);
      transform: skew(30deg, 10deg);
    }

    For a full list of transform functions, checkout the CSS documentation at MDN.

  • transform-style

    The transform-style CSS property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element.

    @mixin transform-style( $style... )
    // @param $style
    //   @type transform style (flat, preserve-3d, inherit)
  • rotate

    Adds transform rotate styles using a degree and the transform mixin.

    @mixin rotate( $deg )
    // @dependency mixin transform()
    // @param $deg
    //   @type unit (degree)

    Example Usage

    // SCSS
    .demo-rotate {
      @include rotate(45deg);
    }
    
    // CSS Output
    .demo-rotate {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  • transition

    The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

    @mixin transition( $transition... )
    // @param $transition
    //   @type transition value ([transition-property] [transition-duration] [transition-timing-function] [transition-delay])
    //   @default $transition

    Example Usage

    // SCSS
    .demo-transition {
      background-color: $blue-green-darker;
      @include transition();
    }
    .demo-transition:hover {
      background-color: $red-violet;
    }
    
    // CSS Output
    .demo-transition {
      background-color: #3da96d;
      -webkit-transition: all 0.25s linear;
      transition: all 0.25s linear;
    }
    .demo-transition:hover {
      background-color: #d25992;
    }

    Available Mixins

    You can also set transition properties separately using the transition property, duration, timing-function and delay mixins.

    @mixin transition-property( $transition-property )
    // @param $transition-property
    //   @type property name
    //   @default $transition-property
    
    @mixin transition-duration( $transition-duration )
    // @param $transition-duration
    //   @type time value (seconds, milliseconds)
    //   @default $transition-duration
    
    @mixin transition-timing-function( $transition-timing-function )
    // @param $transition-timing-function
    //   @type timing function (linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end)
    //   @default $transition-timing-function
    
    @mixin transition-delay( $transition-delay )
    // @param $transition-delay
    //   @type time value (seconds, milliseconds)
    //   @default $transition-delay
  • keyframes

    The @keyframes CSS at-rule lets you control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached during the animation.

    @mixin keyframes( $name )
    // @param $name
    //   @type animation name
    // @param @content (passed in brackets)
    //   @type style block

    Example Usage

    // SCSS
    @include keyframes('example') {
      0%   { background-color: $red; }
      100% { background-color: $blue; }
    }
    
    // CSS Output
    @-webkit-keyframes example {
      0% {
        background-color: #de5151;
      }
      100% {
        background-color: #2ab0ea;
      }
    }
    @keyframes example {
      0% {
        background-color: #de5151;
      }
      100% {
        background-color: #2ab0ea;
      }
    }
  • animation

    The animation CSS property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state.

    @mixin animation( $animation... )
    // @param $animation
    //   @type animation value ([animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state])

    Example Usage

    // SCSS
    .demo-animation {
      ...
      @include animation(example 10s linear 1s infinite normal);
    }
    
    // CSS Output
    .demo-animation {
      ...
      -webkit-animation: example 10s linear 1s infinite normal;
      animation: example 10s linear 1s infinite normal;
    }

    Available Mixins

    You can also set animation properties separately using the animation name, duration, timing-function, delay, iteration, direction, fill mode and play stay mixins.

    @mixin animation-name( $name... )
    // @param $name
    //   @type animation name
    
    @mixin animation-duration( $duration... )
    // @param $duration
    //   @type time value (seconds, milliseconds)
    
    @mixin animation-timing-function( $timing-function... )
    // @param $timing-function
    //   @type timing function (linear, ease, ease-in, ease-out, ease-in-out)
    
    @mixin animation-delay( $delay... )
    // @param $delay
    //   @type time value (seconds, milliseconds)
    
    @mixin animation-iteration-count( $iteration-count... )
    // @param $iteration-count
    //   @type unit (number, infinite)
    
    @mixin animation-direction( $direction... )
    // @param $direction
    //   @type direction (normal, reverse, alternate, alternate-reverse)
    
    @mixin animation-fill-mode( $fill-mode... )
    // @param $fill-mode
    //   @type fill mode (none, forwards, backwards, both, initial, inherit)
    
    @mixin animation-play-stay( $play-stay... )
    // @param $play-state
    //   @type play state (running, paused)
  • linear-gradient

    Creates an image which represents a linear gradient of colors.

    @mixin linear-gradient( $gradient... )
    // @param $gradient
    //   @type gradient ([side-or-corner] [angle] [color-stop])

    Example Usage

    // SCSS
    .demo-linear-gradient {
      @include linear-gradient(left, $green, $blue, $violet);
    }
    
    // CSS Output
    .demo-linear-gradient {
      background-image: -webkit-linear-gradient(left, #8ecb25, #2ab0ea, #bc6bd3);
      background-image: -moz-linear-gradient(left, #8ecb25, #2ab0ea, #bc6bd3);
      background-image: -ms-linear-gradient(left, #8ecb25, #2ab0ea, #bc6bd3);
      background-image: linear-gradient(left, #8ecb25, #2ab0ea, #bc6bd3);
    }
  • radial-gradient

    Creates an image which represents a gradient of colors radiating from an origin, the center of the gradient.

    @mixin radial-gradient( $gradient... )
    // @param $gradient
    //   @type gradient ([position] [shape] [size] [color-stop] [color-stop] [extent-keyword])

    Example Usage

    // SCSS
    .demo-radial-gradient {
      @include radial-gradient(circle, $violet, $violet-darker);
    }
    
    // CSS Output
    .demo-radial-gradient {
      background-image: -webkit-radial-gradient(circle, #bc6bd3, #aa44c7);
      background-image: -moz-radial-gradient(circle, #bc6bd3, #aa44c7);
      background-image: -ms-radial-gradient(circle, #bc6bd3, #aa44c7);
      background-image: radial-gradient(circle, #bc6bd3, #aa44c7);
    }
  • font-weight

    Output the font weight using the weight key to output the number weight.

    @mixin font-weight( $weight )
    // @param $weight
    //   @type font-weight keyword (thing, hairline, light, regular, medium, semi-bold, bold, extra-bold, black)

    Example Usage

    // SCSS
    h1 {
      @include font-weight('light');
    }
    
    //CSS
    h1 {
      font-weight: 300;
    }
  • text-truncate

    Truncates text with an ellipsis. Element this is applied to must be block or inline-block.

    @mixin text-truncate()
    // @param $display
    //   @type display property (block, inline-block)
    //   @default block

    Example Usage

    // SCSS
    .demo-text-truncate {
      @include text-truncate();
    }
    
    // CSS Output
    .demo-text-truncate {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    This is some text that will get truncated
  • reverse-index

    Sets the index of a set of elements to stack in reverse order.

    @mixin reverse-index( $items )
    // @param $items
    //   @type number
    //   @desc The number of elements in the set.

    Example Usage

    
    ul.example-reverse-index li {
      @include reverse-index( 3 );
    }
    
    
    ul.example-reverse-index li:nth-child(1) {
      z-index: 1;
    }
    ul.example-reverse-index li:nth-child(2) {
      z-index: 2;
    }
    ul.example-reverse-index li:nth-child(3) {
      z-index: 3;
    }
    
  • text-hide

    Hides text from an element. This is most commonly used as an image replacement technique for hiding text in an element to reveal a background image.

    @mixin text-hide()

    Example Usage

    // SCSS
    .demo-logo-image {
      ...
      @include text-hide();
    }
    
    // CSS Output
    .demo-logo-image {
      ...
      font-size: 0;
      line-height: 0;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
    }
    <div class="demo-logo-image">Demo Logo Image Replace</div>
    Demo Logo Image Replace
  • make-text-mask

    Lets you easily create text masks using background-clip.

    @mixin make-text-mask( $bg-image, $text-color )
    // @param $big-image
    //   @type background-image property
    //   @default null
    // @param $text-color
    //   @type transparent color
    //   @default transparent
    // @param @content
    //   @type style block
    //   @desc use this to set custom background styles (such as gradients).

    Example Usage

    // SCSS
    // Applied to a wrapping text element
    .demo-text-mask {
      @include make-text-mask(url('../img/demo-mask.jpg'), rgba($black, 0.25));
      
      // Style text, or whatever...
      p {
        ...
      }
    }
    
    // CSS Output
    .demo-text-mask {
      -webkit-text-fill-color: rgba(0, 0, 0, 0.25);
      -webkit-background-clip: text;
      background-clip: text;
      background-image: url('../img/demo-mask.jpg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
    }
    
    
    <div class="demo-text-mask">
      <p>Demo Text Mask</p>
    </div>
    

    Demo Text Mask

  • make-triangle

    Uses the 0*0 element with borders trick to draw arrows. The base styles for creating CSS triangles must be applied either through mixin, class or extend.

    @mixin make-triangle-base()
    @mixin make-triangle( $size, $color, $direction )
    // @param $size
    //   @type unit (pixel, em, rem)
    // @param $color
    //   @type color
    // @param $direction
    //   @type string ('up', 'right', 'down', 'left', 'up-right', 'up-left', 'down-right', 'down-left')
    //   @desc The direction that the triangle will point.

    Example Usage

    // SCSS
    %triangle {
      @include make-triangle-base();
    }
    .example-triangle-1 {
      @extend %triangle;
      @include make-triangle( 14px, $blue-darker, 'left' );
    }
    .example-triangle-2 {
      @extend %triangle;
      @include make-triangle( 14px, $blue-violet-darker, 'down' );
    }
    .example-triangle-3 {
      @extend %triangle;
      @include make-triangle( 14px, $violet-darker, 'right' );
    }
    
    // CSS Output
    .example-triangle-1,
    .example-triangle-2,
    .example-triangle-3 {
      content: '';
      display: inline-block;
      width: 0;
      height: 0;
      border: 0 none;
      border-style: solid;
      border-color: transparent;
    }
    .example-triangle-1 {
      border-width: 14px 14px 14px 0;
      border-right-color: #1495cd;
    }
    .example-triangle-2 {
      border-width: 14px 14px 0 14px;
      border-top-color: #4469da;
    }
    .example-triangle-3 {
      border-width: 14px 0 14px 14px;
      border-left-color: #aa44c7;
    }

Media Queries

The core framework mixins that deal with media queries. These break down to three primary mixins for setting minimum width, maximum width and retina display mixins.

  • media-min

    A media query mixin that deifnes a query using min-width. You can pass in the key to the $teakpoints() or $breakpoints() maps to access that value, or pass a value to create your media query.

    @mixin media-min( $point ) { @content }
    // @param $point
    //   @type map key | unit (pixel)
    // @param @content (passed in brackets)
    //   @type style block

    Example Usage

    // SCSS
    .something {
      width: 100%;
    }
    @include media-min('medium') {
      .something {
        width: 300px;
      }
    }
    
    // CSS Output
    .something {
      width: 100%;
    }
    @media (min-width: 760px) {
      .something {
        width: 300px;
      }
    }
  • media-max

    A media query mixin that deifnes a query using max-width. You can pass in the key to the $teakpoints() or $breakpoints() maps to access that value, or pass a value to create your media query.

    This mixin will shave a pixel off your breakpoint value so that it never overlaps with a breakpoint that might be used in the media-min mixin except when a value is passed directly.

    @mixin media-max( $point ) { @content }
    // @param $point
    //   @type map key | unit (pixel)
    // @param @content (passed in brackets)
    //   @type style block

    Example Usage

    // SCSS
    .something {
      width: 300px;
    }
    @include media-max('medium') {
      .something {
        width: 100%;
      }
    }
    
    // CSS Output
    .something {
      width: 300px;
    }
    @media (max-width: 759px) {
      .something {
        width: 100%;
      }
    }
  • media-retina

    Media query mixin can be used for setting styles specifically to retina screens. Used when setting higher resolution background images.

    @mixin media-retina() { @content }
    // @param @content (passed in brackets)
    //   @type style block

    Example Usage

    // SCSS
    .logo {
      background-image: src('logo.png');
    }
    
    @include media-retina {
      .logo {
        background-image: src('logo-2x.png');
        background-size: 100px 50px;
      }
    }
    
    // CSS Output
    .logo {
      background-image: src('logo.png');
    }
    
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .logo {
        background-image: src('logo-2x.png');
        background-size: 100px 50px;
      }
    }

Grid System

BaseWeb is built with a very flexible grid system. Out of the box, you can use the default classes and settings to have a basic twelve column flexible grid. The basic things to know when using the base grid system is the markup structure.

<div class="container">
  <div class="row">
    <div class="col col-4"><p>...</p></div>
    <div class="col col-4"><p>...</p></div>
    <div class="col col-4"><p>...</p></div>
  </div>
  <div class="row">
    <div class="col col-6"><p>...</p></div>
    <div class="col col-6"><p>...</p></div>
  </div>
  <div class="row">
    <div class="col col-12"><p>...</p></div>
  </div>
</div>

.col-4

.col-4

.col-4

.col-6

.col-6

.col-12

The class based grid system is generated using: build-grid-system(). By default it's going to generate all the classes for the container, row and columns based on the grid variables. You can also pass in a map to override any default grid map settings based on different media breakpoints.

You can also set the grid type by passing a non-map parameter build-grid-system(mobile) which will make columns staked at 100% width.

@include build-grid-system(mobile);

@include media-min('medium') {
  @include build-grid-system(('total-width': 740px));
}

@include media-min('large') {
  @include build-grid-system(('total-width': 960px));
}

Semantic Grids

The BaseWeb grid system also supports the use of semantic grids. That means you can define a grid without having to use grid classes and instead use mixins to define grid elements directly in your stylesheets.

.wrapper {
  @include make-container();
  
  .content {
    @include make-row();
    
    .aside {
      @include make-column(4);
    }
    .article {
      @include make-column(8);
    }
  }
}

There are also a set of functions that you can use for setting column and spacing widths. These can be used along with make-column-base() to define multiple columns and set the widths separately to reduce our CSS output.

.wrapper {
  @include make-container();
  
  .content {
    @include make-row();
    
    .aside,
    .article {
      @include make-column-base();
    }
    .aside {
      width: column-width(4);
    }
    .article {
      width: column-width(8);
    }
  }
}

Prefix and Suffix

You can also create spacing on columns using the prefix and suffix modifiers. These classes are used by adding the prefix and suffix class with the appropriate amount of column spacing you want to be added before or after a column.

<div class="container">
  <div class="row">
    <div class="col col-4 suffix-3">...</div>
    <div class="col col-3 prefix-2">...</div>
  </div>
  <div class="row">
    <div class="col col-5 prefix-4 suffix-3">...</div>
  </div>
</div>

The semantic grid system equivalent would use the add-prefix() and add-suffix mixins.

.aside {
  @include make-column(4);
  @include add-suffix(3);
}
.article {
  @include make-column(3);
  @include add-prefix(2);
}
.section {
  @include make-column(5);
  @include add-prefix(4);
  @include add-suffix(3);
}

.suffix-3

.prefix-2

.prefix-4 .suffix-3

Nested Columns

You can created nested columns in your grid system by adding a new row element inside a column. It's important to note that the first element inside a row should always be a column. Otherwise, you'll need to either manually remove the gutter margin or use the .col-no-gutter modifier class.

When using a fluid grid (percent based) the sum of columns in a row must equal the total column value $grid('columns'). But when using a fixed grid (pixel based), the sum must equal the column span of it's parent column element. If you want to mix fixed and fluid grids between breakpoints, it's recommended to use the semantic grid method.

<div class="container">
  <div class="row">
    <div class="col col-6">
      ...
      <div class="row">
        <div class="col col-6">...</div>
        <div class="col col-6">...</div>
      </div>
    </div>
    <div class="col col-6">
      ...
      <div class="row">
        <div class="col col-4">...</div>
        <div class="col col-4">...</div>
        <div class="col col-4">...</div>
      </div>
    </div>
  </div>
</div>

.col-6

.col-6

.col-6

.col-6

.col-4

.col-4

.col-4

By default, our grid system uses inner-gutter-width (padding) instead of gutter-width (margins). So we're able to keep absolute gutters with a fluid grid for nested elements. But if you used margin gutters with a fluid grid, gutters would need to be percentage based.

Mini Grid System

The Mini Grid System works independently of the core Grid System. It's output using the build-mini-grid-system() mixin and takes the $mini-grid map as a parameter to customize the classes it outputs.

.has-#

The .has-# class is applied to the parent element where # represents the number of children it wraps. The parent receives a clearfix and all children are given equal widths to span their container.


<div class="has-3">
  ...
</div>
<div class="has-6">
  ...
</div>
<div class="has-9">
  ...
</div>
1 2 3
1 2 3 4 5 6
1 2 3 4 5 6 7 8 9

.is-1-of-#

The .is-1-of-# class is applied as a child element to represent a fraction of its parent container. Just keep in mind that .is-1-of-# elements get floated so its parent should receive a clearfix..


<div>
  <span class="is-1-of-3">1/3</span>
  ...
</div>

<div>
  <span class="is-1-of-3">1/3</span>
  <span class="is-1-of-9">1/9</span>
  <span class="is-1-of-9">1/9</span>
  <span class="is-1-of-9">1/9</span>
  <span class="is-1-of-3">1/3</span>
</div>

<div>
  <span class="is-1-of-5">1/5</span>
  ...
</div>
1/3 1/3 1/3
1/3 1/9 1/9 1/9 1/3
1/5 1/5 1/5 1/5 1/5

Grid Functions

These functions are used to calculate specific grid maths such as the width a set number of columns should span. These are used within grid mixins and are often used when defining semantic grid systems.

  • column-width

    A function that returns the width of a column span.

    @function column-width( $index, $options: () )
    // @param $index
    //   @type integer
    //   @desc The number of column span you want returned.
    // @param $options
    //   @type map
    //   @default $grid map
    // @return unit (pixel, percentage)
  • spacing-width

    A function that returns the spacing of a column span.

    @function spacing-width( $index, $options: () )
    // @param $index
    //   @type integer
    //   @desc The number of column spacing you want returned.
    // @param $options
    //   @type map
    //   @default $grid map
    // @return unit (pixel, percentage)

Grid Mixins

These mixins are used to output styles that define a grid system's components. Such as grid containers, rows and columns as well as modifier classes like prefix and suffix spacing. They are also used for outputting the class based grid system.

  • make-container

    Outputs all the styles needed to make an element a grid container.

    @mixin make-container( $options: () )
    // @param $options
    //   @type map
    //   @default $grid map
  • make-row

    Outputs all the styles needed to make an element a grid row.

    @mixin make-row( $options: () )
    // @param $options
    //   @type map
    //   @default $grid map
  • make-column-base

    Creates the base styles for a column but excludes setting the width.

    @mixin make-column-base( $options: () )
    // @param $options
    //   @type map
    //   @default $grid map
  • make-column

    Creates all the styles for a column and sets its width.

    @mixin make-column( $index, $options: () )
    // @param $index
    //   @type integer
    //   @desc The number of column span you want set.
    // @param $options
    //   @type map
    //   @default $grid map
  • add-prefix

    Creates the base styles for a column and sets its width.

    @mixin add-prefix( $index, $options: () )
    // @param $index
    //   @type integer
    //   @desc The number of column prefix spacing you want set.
    // @param $options
    //   @type map
    //   @default $grid map
  • add-suffix

    Creates the base styles for a spacing suffix.

    @mixin add-suffix( $index, $options: () )
    // @param $index
    //   @type integer
    //   @desc The number of column suffix spacing you want set.
    // @param $options
    //   @type map
    //   @default $grid map
  • build-grid-system

    Outputs all the classes and styles for the class based grid system. You can either pass in a map that overrides the grid map defaults, or a single grid type parameter to trigger normal or mobile grid systems.

    @mixin build-grid-system( $grid-type | $options: () )
    // @param $grid-type | $options
    //   @type string | map
    //   @default $grid map

    Example Usage

    The most basic use of build-grid-system() is to output mobile styles and within a media query output our standard grid system. This is present in your custom/_custom.scss file by default.

    // Output our mobile grid system classes.
    @include build-grid-system(mobile);
    
    // Media query for styles that target tablet sized devices and above.
    @include media-min('medium') {
      // Output our standard grid system using all our default settings.
      @include build-grid-system();
    }

    Classes Output

    These are all the default classes that become available when generating your grid. Keep in mind that class names can be changed using the class name variables in our $grid map.

    <div class="container">
      <div class="row">
        <div class="col col-4">
          ...
        </div>
        <div class="col col-8">
          ...
        </div>
      </div>
      <div class="row">
        <div class="col col-4 suffix-2">
          ...
        </div>
        <div class="col col-4 prefix-2">
          ...
        </div>
      </div>
    </div>

    .col-4

    .col-8

    .col-4

    .col-4

    You can disabled the output of prefix and suffix classes by setting their class name variables to none in $grid map or passing it directly to the mixin manually.

  • build-mini-grid-system

    Outputs all the classes for a mini-grid system using the $mini-grid map to set default parameters. You can also pass a custom map to customize the output or create multiple mini grid systems.

    @mixin build-grid-system( $options: () )
    // @param $options
    //   @type map
    //   @default $mini-grid map

    Example Usage

    The mini grid system is called in your custom/_custom.scss file by default.

    @include build-mini-grid-system();
    <!-- .has-# Classes -->
    <div class="has-4">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
    </div>
    
    <!-- .is-1-of-# Classes -->
    <div>
      <span class="is-1-of-3">1/3</span>
      <span class="is-1-of-3">1/3</span>
      <span class="is-1-of-3">1/3</span>
    </div>
    
    1 2 3 4
    1/3 1/3 1/3

    There may be modules who's features are dependent on a mini-grid system being output (such as the button groups module). Make sure that you're outputting one if the modules you use have a mini-grid as a dependency.