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
ormobile
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 tonull
to not output global box sizing styles inscss/elements/_base.scss
-
$class-clearfix
clearfix
Set tonull
to not output the clearfix class inscss/elements/_base.scss
-
$class-remove-clearfix
remove-clearfix
Set tonull
to not output the remove-clearfix class inscss/elements/_base.scss
-
$class-float-left
float-left
Set tonull
to not output the float-left class inscss/elements/_base.scss
-
$class-float-left
float-left
Set tonull
to not output the float-left class inscss/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