Base Styles

Global base styles are applied here. Aside from outputting some base styles for your projects, this component applies overrides to core BaseWeb mixins. Next, it removes margin and padding from <html> and <body>, prevent automatic text resizing on mobile devices and set HTML5 elements to display block.

// Remove margins and padding from HTML and Body elements
html, body {
  margin: 0;
  padding: 0;
}

// Prevents automatic text resizing on mobile devices.
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

// Make HTML5 elements act like blocks
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

We also set the default box layout model on <html> to $box-sizing where border-box is the default. Then we apply a natural box layout model to all elements, while still allowing components to change. This method was originally conceived by Paul Irish and improved on by Chris Coyier.

html {
  box-sizing: $box-sizing;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Custom text highlight color is added if a color is set in $bg-selection.

@if $bg-selection {
  ::selection {
    background: $bg-selection;
    text-shadow: none;
  }
}

Lastly, the grid system is also applied based on the output values set in $grid.

// Check if we should output grid system
@if map-get($grid, 'output') {

  // Check if we should output mobile grid system
  @if map-get($grid, 'output-mobile') {
    @include build-grid-system('mobile');
  }

  @include media-min('medium') {
    @include build-grid-system();
  }

}

Classes

Base classes are primarily element and block neutral classes that can apply to anything. They are typically utility classes for commonly used CSS techniques (such as a clearfix or floats).

.clearfix

Use this class to clear an element that contains floats. Whether or not this class is output depends on the $class-clearfix and if set to null will not output the class styles.

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

Example Usage

<div class="wrapper clearfix">
  <aside class="sidebar">
  ...
  </aside>
  <div class="content">
  ...
  </div>
</div>

.remove-clearfix

Use this class to remove the styles that would clear an element. Whether or not this class is output depends on the $class-remove-clearfix and if set to null will not output the class styles. This class is typically used when a clearfix is inherited on an element and you’d like it removed.

<div class="remove-clearfix"></div>

.float-left

A quick way for floating an element to the left. If global variable $class-float-left is set to null, no class styles will be output.

<div class="float-left"></div>

.float-right

A quick way for floating an element to the right. If global variable $class-float-right is set to null, no class styles will be output.

<div class="float-right"></div>

.show and .hide

Utility show and hide classes along with media based toggles. These are created using the values set in the $breakpoints and named based on the values set in the global settings:

Variable Default
$class-show 'show'
$class-hide 'hide'
$class-show-hide-min 'down'
$class-show-hide-max 'up'

Available Classes

show
show
hide
hide
show-small-down
show-small-down
hide-small-down
hide-small-down
show-medium-down
show-medium-down
hide-medium-down
hide-medium-down
show-large-down
show-large-down
hide-large-down
hide-large-down
show-huge-down
show-huge-down
hide-huge-down
hide-huge-down
show-small-up
show-small-up
hide-small-up
hide-small-up
show-medium-up
show-medium-up
hide-medium-up
hide-medium-up
show-large-up
show-large-up
hide-large-up
hide-large-up
show-huge-up
show-huge-up
hide-huge-up
hide-huge-up

Resize your browser window to see how the above HTML example toggles between the utility classes.