Currently v1.2.0 Download BaseWeb

Settings

This is where we store all of our global project variables and maps. Variables and maps that are used in core modules, multiple element and/or block modules go here.

BaseWeb is designed so that elements or blocks with specific variables are stored locally within that modules file. This is to keep your code organization consistent with its scope.

Palette Variables

Where our framework colors are defined. There are a total of three primary colors, three secondary colors and six tertiary colors which are the combination of a primary and secondary color. There are also five modifiers that can apply to any color: light, lighter, dark, darker and pale.

In combination with our gray scale, that is a total of 80 unique color variables. To make them easy to remember, every color's naming schema follows this pattern: color name then the modifier (if any is used). For the color name itself, if it's a tertiary color, it starts with the primary color first, then the secondary that it's mixed with.

// $[primary]-[modifier]
$blue-light

// $[secondary]-[modifier]
$orange-darker

// $[primary]-[secondary]-[modifier]
$yellow-green-lighter

The degree variables are what's used to determine the amount that each base color is either lightened or darkened. The gray scale is the only exception to this.

  • Degree Modifiers
  • $light-deg 5%
  • $lighter-deg 10%
  • $dark-deg 5%
  • $darker-deg 10%
  • Black & White
  • $black
  • $white

Media Query Variables

Where media query breakpoints are defined. Global media breakpoints are set within the $breakpoints map while the $tweakpoints map is defined but no values are set. Any number of breakpoints can be added to the $breakpoints map and called on using the media query mixins.

  • Tweakpoints Map
  • $tweakpoints() ...
  • Breakpoints Map
  • $breakpoints('small') 480px
  • $breakpoints('medium') 760px
  • $breakpoints('large') 990px
  • $breakpoints('huge') 1380px

Setting Tweakpoint Maps

Tweakpoints are media queries that are used to finesse page elements without making any major changes to the layout. These points are usually component specific so there are none set by default. Instead, if a tweakpoint is needed, it should be defined at the top of a component file that requires it, then reset at the bottom of that component's file.

// Inside `_some_component.scss`
// Set our component specific tweakpoints
$tweakpoints: ({
  'inline': 300px,
  'block': 500px
});

// Your component code goes here...

// Reset tweak points so it doesn't 
// leak to our next component file
$tweakpoints: ();

For more information on the tweakpoints method, make sure you checkout Hugo Giraudel's article over at Sitepoint: Breakpoints and Tweakpoints in Sass.

Grid System Variables

All grid variables are defined within the $grid and $mini-grid maps and are used as the default settings for all grid system mixins and functions. You can modify these settings directly to effect all grid systems, or pass in a custom map to specific mixins.

  • Global Grid Settings
  • $grid('type') normal

    Set the grid type to normal or mobile to output their respective grid styles.

  • $grid('total-width') 100%

    Use same unit type as $grid('gutter-width').

  • $grid('gutter-width') 0

    Use same unit type as $grid('total-width'). Used to set left and right margin of columns.

  • $grid('inner-gutter-width') 20px

    Used to set using left and right padding of columns.

  • $grid('columns') 12
  • Container Settings
  • $grid('container-margin') auto
  • $grid('container-padding') 20px
  • $grid('container-min-width') none
  • $grid('container-max-width') 1000px
  • Grid Class Names
  • $grid('class-container') container
  • $grid('class-row') row
  • $grid('class-column') col
  • $grid('class-prefix') prefix

    Set to none to disable output

  • $grid('class-suffix') suffix

    Set to none to disable output

  • Mini Grid System
  • $mini-grid('fractions') 12

    Used to determine the number of fraction classes to output.

  • $mini-grid('class-has') has

    Class name for mini-grid parent classes.

  • $mini-grid('class-is') is

    Class name for mini-grid children classes.

Typography Variables

The default typographic settings. These dictate the base typographic styles for headings, body text, inline text elements and links as well as modifier classes.

  • Font Families
  • $font-family-sans "Helvetica Neue", "HelveticaNeue", helvetica, arial, sans-serif
  • $font-family-serif georgia, "Times New Roman", times, serif
  • $font-family-mono Menlo, Monaco, Consolas, "Courier New", monospace
  • Base Font Styles
  • $base-font-family $font-family-sans
  • $base-font-size 16px
  • $base-line-height 1.5em
  • $base-font-weight normal
  • Header Styles
  • $font-family-heading inherit
  • $line-height-heading 1.25em
  • $font-weight-heading bold
  • Text Color Assignment
  • $color
  • $color-light
  • $color-dark
  • $color-header
  • Links
  • $color-link
  • $color-link-hover
  • Header Links
  • $color-link-heading
  • $color-link-heading-hover
  • Miscellaneous
  • $letter-spacing 1px

Global Variables

The rest of the global variables used in BaseWeb. These mainly deal with things like general framework settings, mixin defaults and structure or scaffolding colors.

  • Framework Settings
  • $global-box-sizing border-box Set to null to not output global box sizing styles in scss/elements/_base.scss
  • $class-clearfix clearfix Set to null to not output the clearfix class in scss/elements/_base.scss
  • $class-remove-clearfix remove-clearfix Set to null to not output the remove-clearfix class in scss/elements/_base.scss
  • $class-float-left float-left Set to null to not output the float-left class in scss/elements/_base.scss
  • $class-float-left float-left Set to null to not output the float-left class in scss/elements/_base.scss
  • Mixin Defaults
  • $box-sizing border-box
  • $box-shadow 0 1px 3px rgba($black, 0.1)
  • $border-radius 3px
  • $transition all 0.25s linear
  • $transition-property all
  • $transition-duration 0.25s
  • $transition-timing-function linear
  • $transition-delay 0.25s
  • Scaffolding
  • $bg-color
  • $bg-selection
  • $border-color
  • $border-color-hover