Style

Normalize your styling with Wee's mixin library

The reset does the bare minimum to effectively normalize browsers to a clean, consistent foundation. Instead of generically resetting things you’ll immediately override, Wee leverages extensive variables to minimize CSS output and maximize efficiency.

Features

Location

Wee core style components are loaded into the global.scss file which is imported into the bootstrap.js file which is in turn imported into the app.js file which is the main entry point.

// Import wee-core reset and components
@import '~wee-core/styles/reset';
@import '~wee-core/styles/components/helpers';
@import '~wee-core/styles/components/buttons';
@import '~wee-core/styles/components/code';
@import '~wee-core/styles/components/forms';
@import '~wee-core/styles/components/tables';
@import './print.scss';

// Import generated media query file for screen mapping
@import '../../build/temp/responsive';

#global {
    // Global helpers and state modifiers
}

To disable a feature, simply remove the import reference.

Base

$rootFontSize: 62.5%; 

$baseColor: $darkestGray;
$baseFont: Arial, Helvetica, sans-serif;
$baseFontSize: 1.6rem;
$baseFontWeight: normal;
$baseLineHeight: 1em;

$bodyBackground: $white; 

Addresses

$addressColor: $darkestGray;
$addressFont: $baseFont;
$addressFontSize: $baseFontSize;
$addressFontWeight: normal;
$addressFontStyle: normal;
$addressLineHeight: $paragraphLineHeight;

Buttons

$buttonStyled: true;

$buttonColor: $white;
$buttonFont: $baseFont;
$buttonFontSize: $baseFontSize;
$buttonFontWeight: normal;

$buttonPaddingHorizontal: 3rem;
$buttonPaddingVertical: 1.3rem;

$buttonMarginBottom: false;

$buttonRounded: $defaultRadius; // false to disable

$buttonTransitionEnabled: false;
$buttonTransitionProperty: background-color;
$buttonTransitionDuration: $defaultDuration;

$buttonActiveTransitionEnabled: false;
$buttonActiveTransitionProperty: background-color;
$buttonActiveTransitionDuration: $defaultDuration;

$buttonBackground: $darkGray;
$buttonBackgroundHover: darken($buttonBackground, 5%);
$buttonBackgroundActive: darken($buttonBackground, 10%);

$buttonBorderColor: false; // false to disable

// Colored Buttons

$coloredButtonClassModifier: colored-button;

$coloredButtonColor: $white; // font color

$coloredButtonBackground: $linkColor;
$coloredButtonBackgroundHover: darken($coloredButtonBackground, 5%);
$coloredButtonBackgroundActive: darken($coloredButtonBackground, 10%);

$coloredButtonBorderColor: false;

// Disabled Buttons

$disabledButtonClassModifier: -disabled;

$disabledButtonColor: $darkGray;

$disabledButtonBackground: $lightGray;

$disabledButtonBorderColor: false;

$disabledButtonCursor: not-allowed;

Code

$codeColor: $darkestGray;
$codeFont: monospace;
$codeFontSize: $baseFontSize;
$codeLineHeight: 1.4em;

$codeBackground: $lighterGray;

$codeBorderColor: false;
$codeRounded: false;

$codePaddingHorizontal: .5em;
$codePaddingVertical: .2em;

$codeBlockColor: $lightestGray;
$codeBlockFont: $codeFont;
$codeBlockFontSize: 1.3rem;
$codeBlockLineHeight: $paragraphLineHeight;
$codeBlockTabSize: 4;
$codeBlockWrap: false;
$codeBlockMarginBottom: $blockMarginBottom;

$codeBlockBackground: $darkestGray;

$codeBlockBorderColor: $codeBorderColor; // false to disable
$codeBlockRounded: false;

$codeBlockPaddingHorizontal: 2rem;
$codeBlockPaddingVertical: 1.4rem;

Colors

$primary: #5789ff;
$secondary: #121212;
$tertiary: #ff9b57;
$info: #1a28ff;
$success: #2ed183;
$warning: #ff4121;

Fonts

$fontPath: '../fonts/'; // absolute or relative path
$iconFont: icons;
$woff2Enabled: true; // false to disable

Forms

// Inputs

$inputColor: $darkerGray;
$inputFont: $baseFont;
$inputFontSize: $baseFontSize;
$inputFontWeight: $baseFontWeight;

$inputBackground: $white;

$inputBorderColor: $lighterGray;
$inputBorderColorHover: darken($inputBorderColor, 10%);
$inputBorderColorFocus: darken($inputBorderColor, 20%);
$inputBorderWidth: 1px;        // false to disable
$inputRounded: $defaultRadius; // false to disable

$inputMinWidth: 20rem; // false to disable
$inputMinHeight: 3rem; // false to disable

$inputPaddingHorizontal: 1.6rem;
$inputPaddingVertical: 1rem;

$inputMarginBottom: 2rem;

$inputPlaceholderColor: lighten($inputColor, 40%);

// Invalid Inputs

$inputBackgroundInvalid: $white;
$inputBorderColorInvalid: #a41818;
$inputColorInvalid: darken($inputBorderColorInvalid, 10%);
$inputBorderColorInvalidHover: darken($inputBorderColorInvalid, 10%);
$inputBorderColorInvalidFocus: darken($inputBorderColorInvalid, 20%);
$inputBorderWidthInvalid: 1px; // false to disable

// Required Inputs

$inputBackgroundRequired: $white;
$inputBorderColorRequired: $darkGray;
$inputColorRequired: darken($inputBorderColorRequired, 10%);
$inputBorderColorRequiredHover: darken($inputBorderColorRequired, 10%);
$inputBorderColorRequiredFocus: darken($inputBorderColorRequired, 20%);
$inputBorderWidthRequired: 1px; // false to disable

// Disabled Inputs

$inputColorDisabled: $darkGray;

$inputBackgroundDisabled: $lightestGray;

$inputBorderWidthDisabled: false; // false to disable

$inputCursorDisabled: not-allowed;

$inputDisabledModifier: -disabled;
$inputDisabledCursor: not-allowed;

// Selects

$multiSelectMinHeight: 8rem;

// Checkboxes

$checkboxMarginBottom: 1rem;
$checkboxMarginRight: .5rem;

// Textareas

$textareaLineHeight: 1.3em;
$textareaMinHeight: 8rem;
$textareaResize: vertical; // none, horizontal, vertical, both
$textareaPaddingHorizontal: 1.6rem;
$textareaPaddingVertical: 1rem;

// Legends

$legendColor: $darkerGray;
$legendFont: $baseFont;
$legendFontSize: 1.8rem;

$legendMarginBottom: 1.4rem;

// Labels

$labelFontWeight: normal;
$labelLineHeight: 1.3em;

$labelMarginBottom: .4rem;
$labelMarginRight: 1rem;

Grayscale

$white: #fff;
$lightestGray: darken(#fff, 4%);
$lighterGray: darken(#fff, 10%);
$lightGray: darken(#fff, 25%);
$gray: darken(#fff, 35%);
$darkGray: darken(#fff, 55%);
$darkerGray: darken(#fff, 65%);
$darkestGray: darken(#fff, 75%);
$black: #000;

Headings

$headingColor: inherit;
$headingFont: Tahoma, Geneva, sans-serif;
$headingFontWeight: $boldFontWeight;
$headingLineHeight: 1.4em;

$headingMarginBottom: 2rem;

$h1: 3.6rem; // font sizes
$h2: 3.2rem;
$h3: 2.8rem;
$h4: 2.4rem;
$h5: 2rem;
$h6: 1.6rem;

Horizontal Rules

$ruleColor: $lightGray;
$ruleHeight: 1px;
$ruleStyle: solid;
$ruleMargin: $blockMarginBottom;

Images

$imagePath: '../images/'; // absolute or relative path
$spriteFilename: 'sprite.png'; // relative to image path above

$retinaSuffix: '-2x'; // retina filename suffix

$retinaSpriteWidth: auto;
$retinaSpriteHeight: auto;

// Margin applied when using img-left and img-right classes

$imageMarginBottom: 2rem;
$imageMarginSide: 2rem;

// Figures

$figureBorderColor: false; // false to disable
$figureRounded: false;

$figurePadding: $blockMarginBottom;

// Figure Captions

$figCaptionColor: $darkGray;
$figCaptionFontStyle: italic;
$figCaptionLineHeight: $paragraphLineHeight;

// Alignment

$imageLeftClass: img-left;
$imageRightClass: img-right;

Layout

$minWidth: false;  // min container width, false to disable
$maxWidth: 1280px; // max container width, false to disable

$bumperPadding: 6%;  // bumper padding on containers, false to disable
$padContainer: true; // enable bumperPadding on containers

$gridMargin: 5%; // default margin for spaced columns
$gridColumns: 8; // default number of columns in grid

$gridSpaceless: false; // set to true to eliminate inline grid whitespace hack

$blockMarginBottom: 4rem; // default spacing for lists, form elements, and other blocks
$linkColor: $primary;
$linkColorHover: darken($linkColor, 10%);
$linkColorActive: darken($linkColor, 20%);

$linkDecoration: none;       // none, underline
$linkDecorationHover: false; // none, underline, false

Miscellaneous

$smallFontSize: .8em;

$selectionColor: $white;
$selectionBackground: $linkColor;

$boldFontWeight: bold;
$normalFontWeight: normal;

$markColor: $baseColor;
$markBackground: yellow;

$defaultRadius: 3px;
$defaultOpacity: .2;
$defaultDuration: .2s;
$defaultTiming: ease-in-out;

$abbrUnderline: dotted; // dotted, solid, none

Paragraphs

$paragraphColor: $baseColor;
$paragraphFontWeight: $baseFontWeight;
$paragraphLineHeight: 1.7em;

$paragraphMarginBottom: 2rem;

Print

$printPageMargin: 2cm .5cm;

Quotes

$quoteColor: $darkestGray;
$quoteFont: Georgia, Times, serif;
$quoteFontSize: 2rem;
$quoteFontStyle: italic;
$quoteFontWeight: normal;
$quoteLineHeight: 1.4em;

$quotePaddingHorizontal: 2em;
$quotePaddingVertical: 1em;

// Cites

$citeColor: $gray;
$citeFont: $baseFont;
$citeFontSize: 1.8rem;
$citeFontStyle: normal;
$citeFontWeight: normal;
$citeLineHeight: 1.2em;

$citeMarginTop: 1.4rem;

$citeIndicator: '\2014\00a0';

Tables

$tableStyled: true;    // apply base styling by default
$tableBordered: false; // apply outer border by default
$tableStriped: true;   // apply striping by default

$tableFontSize: $baseFontSize;

$tableBorderedClassModifier: -bordered;
$tableStripedClassModifier: -striped;

// Table Cells

$tableCellLineHeight: $paragraphLineHeight;

$tableCellBorderColor: $lighterGray;

$tableCellPaddingHorizontal: 1.6rem;
$tableCellPaddingVertical: .6rem;

// Table Captions

$tableCaptionFontStyle: italic;

$tableCaptionBackground: $lightestGray;

$tableCaptionPaddingVertical: 1.2rem;
$tableCaptionPaddingHorizontal: $tableCellPaddingHorizontal;

// Striping

$tableStripedBackground: $lightestGray;
$tableStripedPosition: odd; // even, odd

icon

Output font icon

@mixin icon(icon, size = 'inherit', rotate = false, weight = 'normal', height = 0, sharpen = true, font = vars.icon.family)
.block {
    &::after {
        @include icon(\e901);
    }
}
.block::after {
    content: '\e901';
    font-family: 'Open Sans' sans-serif;
    font-size: inherit;
    font-weight: normal;
    line-height: 0;
    font-style: normal;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

iconModify

Modify font icon

@mixin iconModify(icon = false, size = false, rotate = false, weight = false, sharpen = false)
.block {
    &::after {
        @include iconModify(\e901);
    }
}
.block::after {
    content: '\e901';
}

placeholder

@mixin placeholder($color: $inputPlaceholderColor)
@include placeholder();
&:-moz-placeholder {
    color: #bfbfbf
}
&::-moz-placeholder {
    color: #bfbfbf
}
&:-ms-input-placeholder {
    color: #bfbfbf
}
&::-webkit-input-placeholder {
    color: #bfbfbf
}
@include placeholder(#fff);
&:-moz-placeholder {
    color: #fff
}
&::-moz-placeholder {
    color: #fff
}
&:-ms-input-placeholder {
    color: #fff
}
&::-webkit-input-placeholder {
    color: #fff
}

heading

@mixin heading($fontSize: false)
@include heading();
color: inherit;
font-family: 'Tahoma, Geneva, sans-serif';
font-weight: bold;
line-height: 1.4em;
margin-bottom: 2rem;
small {
    font-weight: normal;
}

flexContainer

@mixin flexContainer($direction: row, $wrap: nowrap, $justify: flex-start, $align: stretch, $alignContent: stretch)
@include flexContainer();
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
@include flexContainer(column, wrap, $alignContent: start);
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: start;

flex

@mixin flex($grow: 0, $shrink: 0, $basis: auto)
@include flex();
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
@include flex(1, 2);
flex-grow: 1;
flex-shrink: 2;
flex-basis: auto;

noClear

@mixin noClear();
&::-ms-clear {
    display: none
}
&::-webkit-search-cancel-button {
    -webkit-appearance: none
}

selection

@mixin selection($color: $selectionColor, $background: $selectionBackground)
@include selection();
&::selection {
    background: #349bb9;
    color: #fff;
    text-shadow: none
}
@include selection(#000, #fff);
&::selection {
    background: #fff;
    color: #000;
    text-shadow: none
}

hideText

@include hideText();
overflow: hidden;
text-indent: 110%;
white-space: nowrap;

resizable

@mixin resizable($value: both)
@include resizable();
overflow: hidden;
resize: both;
@include resizable(vertical);
overflow: hidden;
resize: vertical;

ellipsis

@mixin ellipsis(maxWidth = false)
@include ellipsis();
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@include ellipsis(10);
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 10rem;

textSharpen

@mixin textSharpen()
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

circle

@mixin circle($diameter, $crop: false, $display: block)
@include circle(.5);
background-clip: border-box;
border-radius: 0.25rem;
height: 0.5rem;
width: 0.5rem;
display: block;
@include circle(.5, true);
background-clip: border-box;
border-radius: 0.25rem;
height: 0.5rem;
width: 0.5rem;
overflow: hidden;
display: block;
@include circle(.5, $display: inline);
background-clip: border-box;
border-radius: 0.25rem;
height: 0.5rem;
width: 0.5rem;
display: inline-block;

ratio

@mixin ratio($keyword: false, $ratio: 16 / 9)
@include ratio(embed, 4/3);
display: block;
height: 0;
padding-top: 75%;
@include ratio(embed, 4/3);
overflow: hidden;
position: relative;
&:before {
    content: '';
    display: block;
    height: 0;
    padding-top: 75%
}

size

@mixin size($width, $height: false)
@include size(4rem);
width: 4rem;
height: 4rem;
@include size(4rem, 250px);
width: 4rem;
height: 250px;

triangle

@mixin triangle($keyword, $color: $darkGray, $size: 5px, $width: $size)
@include triangle(up);
content: '';
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #737373;
@include triangle(right, $color: blue, $size: 3px);
content: '';
height: 0;
width: 0;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid blue;
@include triangle(left, red, $width: 10px);
content: '';
height: 0;
width: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 5px solid red;

rounded

@mixin rounded($keyword: '', $value: $defaultRadius)
@include rounded(5px);
border-radius: 5px;
@include rounded(top, 4px);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
@include rounded(left, 2px);
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;

fixed

@mixin fixed($top: false, $right: false, $bottom: false, $left: false);
@include fixed();
position: fixed;
@include fixed($bottom: 3rem, $top: 4rem);
position: fixed;
top: 4rem;
bottom: 3rem;

absolute

@mixin absolute($top: false, $right: false, $bottom: false, $left: false)
@include absolute();
position: absolute;
@include absolute(4rem, 3rem, 2rem, 1rem);
position: absolute;
top: 4rem;
right: 3rem;
bottom: 2rem;
left: 1rem;
@include absolute(4rem, 3rem);
position: absolute;
top: 4rem;
left: 3rem;

inlineColumn

@mixin inlineColumn(keyword, share, columns = vars.grid.columns, margin = vars.grid.margin, spaceless = vars.grid.spaceless)
@include inlineColumn(spaced, 1, 4, 4%);
display: inline-block;
vertical-align: top;
margin-left: 4%;
width: 21%;
letter-spacing: normal;
@include inlineColumn(1, 5);
display: inline-block;
vertical-align: top;
width: 20%;

inlineRow

@mixin inlineRow(margin = vars.grid.margin, spaceless = vars.grid.spaceless)
@include inlineRow(4%, false);
margin-left: -4%;
max-width: 104%;
letter-spacing: -.32em;
@include inlineRow(4%, true);
margin-left: -4%;
max-width: 104%;

columnOffset

@mixin columnOffset($keyword: false, $share: false, $columns: $gridColumns, $margin: ($gridMargin / 2))
@include columnOffset(spaced, 3, 4, 5%);
margin-left: 85%;
@include columnOffset(2, 5);
margin-left: 40%;

columnPush

@mixin columnPush($share, $columns: $gridColumns)
@include columnPush(1, 2);
left: 50%;
position: relative;

columnPull

@mixin columnPull($share, $columns: $gridColumns)
@include columnPull(1, 2);
position: relative;
right: 50%;

columnReset

@mixin columnReset($resetMargin: false)
@include columnReset();
float: none;
width: auto;
@include columnReset(true);
float: none;
width: auto;
margin-left: 0;

columnModify

@mixin columnModify($keyword: false, $share: false, $columns: $gridColumns, $margin: $gridMargin)
@include columnModify(60%);
width: 60%;
@include columnModify(spaced, 1, 4, 5%);
margin-left: 5%;
width: -20%;
@include columnModify(1, 5);
width: 20%;

column

@mixin column($keyword: false, $share: false, $columns: $gridColumns, $margin: $gridMargin)
@include column();
float: left;
width: 100%;
@include column(40%);
float: left;
width: 40%;
@include column(spaced, 1, 4, 2%);
float: left;
margin-left: 2%;
width: 23%;
@include column(1, 2);
float: left;
width: 50%;

rowReset

@include rowReset();
margin-left: 0;
max-width: none;

rowModify

@mixin rowModify($margin: $gridMargin)
@include rowModify(4%);
margin-left: -4%;
max-width: 104%;

row

@mixin row($margin: $gridMargin)
@include row();
margin-left: -5%;
max-width: 105%;
&:after {
    clear: both;
    content: '';
    display: block;
}
@include row(10%);
margin-left: -10%;
max-width: 110%;
&:after {
    clear: both;
    content: '';
    display: block;
}

loadFont

@mixin loadFont(name, $file: $name, $weight: normal, $style: normal)
@include loadFont(icomoon, $weight: 500);
@font-face {
    font-family: icomoon;
    font-weight: 500;
    font-style: normal;
    src: url('../fonts/icomoon.woff2'),
        url('../fonts/icomoon.woff'),
        url('../fonts/icomoon.ttf');
}

font

@mixin font($family: $baseFont, $size, $weight, $lineHeight, $style, $spacing)
@include font('Times New Roman', 1.4, bold, 1.5, italic, 0.1);
font-family: 'Times New Roman';
font-size: 1.4rem;
font-weight: bold;
line-height: 1.5em;
letter-spacing: 0.1rem;

spacedBlock

@mixin spacedBlock($margin: $blockMarginBottom, $width: false, $height: false)
@include spacedBlock($margin-bottom: 4);
display: block;
margin-bottom: 4rem;
@includes spacedBlock(4rem, 20rem, 100px);
display: block;
margin-bottom: 4rem;
width: 20rem;
height: 100px

block

@mixin block($width, $height)
@include block();
display: block;
@include block(40rem, 100px);
display: block;
width: 40rem;
height: 100px;

bookends

@mixin bookends($value: '-', $margin: .5em, $font: false, $color: false)
@include bookends('-', .5em)
&:before {
    content: '-';
    margin-right: .5em;
}
&:after {
    content: '-';
    margin-left: .5em;
}
@include bookends('~', 1, $color: red);
&:before {
    content: '~';
    margin-right: 1rem;
    color: red;
}
&:after {
    content: '~';
    margin-left: 1rem;
    color: red;
}

suffix

@mixin suffix($value: '-', $margin: .5em, $font: false, $color: false)
@include suffix();
&:before {
    content: '-';
    margin-left: .5em;
}
@include suffix('~', 1em, $color: blue);
&:before {
    content: '~';
    margin-left: em;
    color: blue;
}

prefix

@mixin prefix($value: '-', $margin: .5em, $font: false, $color: false)
@include prefix();
&:before {
    content: '-';
    margin-right: .5em;
}
prefix('~', 1rem, $color: blue);
&:before {
    content: '~';
    margin-right: 1rem;
    color: blue;
}

centeredBlock

@mixin centeredBlock($maxWidth: false, $margin: false)
@include centeredBlock();
display: block;
margin-left: auto;
margin-right: auto;
@include centeredBlock(80rem, 2rem);
display: block;
margin-left: auto;
margin-right: auto;
width: 80rem;
margin-bottom: 2rem;

inlineBlock

@mixin inlineBlock(width, height)
@include inlineBlock();
display: inline-block;
@include inlineBlock(40rem, 30rem);
display: inline-block;
width: 40rem;
height: 30rem;
@include inlineBlock($height: 100px);
display: inline-block;
height: 100px;

clearfix

@include clearfix();
&:after {
    clear: both;
    content: '';
    display: block;
}

Container

Create a centered container based on $width.min, $width.max, and $bumper.padding

.container {
    @if ($padContainer == true) {
        padding-left: $bumperPadding;
        padding-right: $bumperPadding;
    }
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-sizing: content-box;
    @if ($maxWidth != false) {
        max-width: $maxWidth;
    }

    @if ($minWidth != false) {
        min-width: $minWidth;
    }
}

JS Hide

Used by the core Wee script to toggle visibility

.js-hide {
    display: none !important;
}

Image Align

Perfect for alignment of images in content blocks

Left

.img-left {
    float: left;
    margin-top: .32em;
    margin-right: $imageMarginSide;
    margin-bottom: $imageMarginBottom;
}

Right

.img-left {
    float: right;
    margin-top: .32em;
    margin-bottom: $imageMarginBottom;
    margin-left: $imageMarginSide;
}

Not Printed

If print styling is enabled exclude elements from being printed

<h1 class="not-printed">This won't be output when printing.</h1>