fonts

variables

heading-font

$heading-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;

Description

The primary heading font stack

Type

String

Used by

heading-font-primary

Deprecated!

use $heading-font

$heading-font-primary: $heading-font !default;

Description

The primary heading font stack

Type

String

heading-font-secondary

Deprecated!

use $heading-font

$heading-font-secondary: $heading-font !default;

Description

The secondary heading font stack

Type

String

normal-font

$normal-font: $heading-font;

Description

The default sans-serif font stack

Type

String

Used by

forms

variables

form-element-base-height

$form-element-base-height: 37px !default;

Description

The base height for all our form elements

Type

Number (pixels)

form-element-base-padding

$form-element-base-padding: .35em .5em !default;

Description

Padding that is shared across form elements

Type

Number (em)

form-element-base-height--large

$form-element-base-height--large: 48px !default;

Description

The base height for any large elements

Type

Number (pixels)

form-element-base-padding--large

$form-element-base-padding--large: .55em .5em !default;

Description

Padding that is shared across large form elements

Type

Number (em)

form-element-sizes

$form-element-sizes: (
  (base, $form-element-base-height, $form-element-base-padding, 1em),
  (large, $form-element-base-height--large, $form-element-base-padding--large, 1.2em)
) !default;

Description

Form sizing map for inputs

Type

List

c-form-element-text

$c-form-element-text: $c-typegrey !default;

Description

Background color for our form elements

Type

String (hex)

c-form-element-background

$c-form-element-background: #fff !default;

Description

Background color for our form elements

Type

String (hex)

c-form-element-border

$c-form-element-border: $c-inputgrey !default;

Description

Default border color for all form elements

Type

Variable or String (pixels)

c-form-element-border-hover

$c-form-element-border-hover: $c-typecyan !default;

Description

Default border active colour for all form elements

Type

Variable or String (pixels)

c-form-element-disabled-fg

$c-form-element-disabled-fg: #ddd !default;

Description

Disabled foreground colour for form elements

Type

String (pixels)

c-form-element-disabled-bg

$c-form-element-disabled-bg: #fafafa !default;

Description

Disabled background colour for form elements

Type

Variable or String (pixels)

c-form-error

$c-form-error: $c-red !default;

Description

Error color for form elements

Type

Variable or String (pixels)

c-form-success

$c-form-success: $c-green !default;

Description

Success color for form elements

Type

Variable or String (pixels)

mixins

input-sizing

@mixin input-sizing($input-size: base, $input-sizes: $form-element-sizes) { ... }

Description

Creates a larger version of a form input, allows us to set the styles in a responsive manner

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$input-size

Name of the size used in the form element list

Stringbase
$input-sizes

List of sizes to pass through. Should contain 4 values per item, (size-name, height, padding, font-size)

List$form-element-sizes

Author

  • David Annez

grid

mixins

us-row

@mixin us-row($breakpoint: $default-grid-breakpoint) { ... }

Description

Adds a negative left and right margin of $gutter-width / 2 to normalise the outer padding of columns

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$breakpoint

The breakpoint where you want the margin to be set

String$default-grid-breakpoint

Requires

Author

  • David Annez

us-col

@mixin us-col($cols) { ... }

Description

The grid column builder for uSwitch - floats, sets a % width and adds left and right padding for column gutters

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$cols

The number of columns to make the selected element

Number (unitless) none

Requires

Used by

Author

  • David Annez

[private] _grid-class

@mixin _grid-class($selector, $cols, $html-classes: $html-grid-classes) { ... }

Description

Grid class and extend generator for ease of class/no-class use

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$selector

The CSS selector to use for building the the grid placeholders and classes

String none
$cols

The number of columns for the $selector

Number (unitless) none
$html-classes

If set to false will only output placeholder classes for selective CSS generation

Bool$html-grid-classes

Requires

Author

  • David Annez

variables

html-grid-classes

$html-grid-classes: true !default;

Description

If set to false will not give you CSS classes for your grid like .us-col-6 but rather the placeholder class instead

Type

Bool

col-width

$col-width: 70px !default;

Description

Column width for calculating the uSwitch grid

Type

Number (unit)

gutter-width

$gutter-width: 30px !default;

Description

Gutter width for calculating the uSwitch grid

Type

Number (unit)

Used by

grid-columns

$grid-columns: 12 !default;

Description

Number of columns for large screens

Type

Number (unitless)

Used by

grid-columns-desktop

$grid-columns-desktop: 10 !default;

Description

Number of columns for desktop screens

Type

Number (unitless)

grid-columns-tablet

$grid-columns-tablet: 8 !default;

Description

Number of columns for tablet screens and below

Type

Number (unitless)

default-grid-breakpoint

$default-grid-breakpoint: tablet !default;

Description

The device breakpoint that all ustyle elements respond to

Type

String

icons

variables

icon-colors

$icon-colors: "white", "typegrey", "inputgrey", "typecyan", "custom" !default;

Description

List of the supported SVG sprite colours

Type

List

icon-colors--svg

$icon-colors--svg: (
  ("white", #fff),
  ("typegrey", $c-typegrey),
  ("inputgrey", $c-inputgrey),
  ("typecyan", $c-typecyan),
  ("custom", $c-navy)
) !default;

Description

Legacy support for icon coloring on SVGs

Type

List

icon-sizes

$icon-sizes: (
  (small, 16px, 16px),
  (medium, 32px, 32px),
  (large, 64px, 64px)
) !default;

Description

List of the icon sizes and their respective names

Type

List

csss

// scss-lint:disable QualifyingElement // Overrides normalize.css // Stops icon clipping in Firefox svg:not(:root)

// scss-lint:disable QualifyingElement

// Overrides normalize.css
// Stops icon clipping in Firefox
svg:not(:root) { ... }

Description

Returns a background position for the number of $icon-colors

Author

  • David Annez

media-queries

variables

media-query-legacy-support

$media-query-legacy-support: false !default;

Description

IE8 is no longer supported, but on an opt-in basis for applications. Set this to true if you do want .ie8 classes to be spat out for media queries

Type

Bool

Used by

Author

  • David Annez

extra-large-desktop-width

$extra-large-desktop-width: 1600px !default;

Description

Breakpoint for extra large desktops

Type

Number (unit)

Author

  • David Annez

large-desktop-width

$large-desktop-width: 1200px !default;

Description

Breakpoint for large desktops

Type

Number (unit)

Author

  • David Annez

desktop-width

$desktop-width: 992px !default;

Description

Breakpoint for desktop

Type

Number (unit)

Used by

Author

  • David Annez

tablet-width

$tablet-width: 768px !default;

Description

Breakpoint for tablet

Type

Number (unit)

Used by

Author

  • David Annez

small-tablet-width

$small-tablet-width: 600px !default;

Description

Breakpoint for small tablets

Type

Number (unit)

Used by

Author

  • David Annez

mobile-width

$mobile-width: 480px !default;

Description

Breakpoint for mobile

Type

Number (unit)

Author

  • David Annez

mobile-end-width

$mobile-end-width: $small-tablet-width - 1;

Description

Max-breakpoint for mobiles

Type

Number (unit)

Requires

Author

  • David Annez

small-tablet-end-width

$small-tablet-end-width: $tablet-width - 1;

Description

Max-breakpoint for small tablets

Type

Number (unit)

Requires

Author

  • David Annez

tablet-end-width

$tablet-end-width: $desktop-width - 1;

Description

Max-breakpoint for tablets

Type

Number (unit)

Requires

Author

  • David Annez

min-breakpoints

$min-breakpoints: (small-tablet, $small-tablet-width), (tablet, $tablet-width), (desktop, $desktop-width), (large-desktop, $large-desktop-width), (extra-large-desktop, $extra-large-desktop-width) !default;

Description

A list containing the devices for min-width media-query breakpoints

Type

List

Author

  • David Annez

max-breakpoints

$max-breakpoints: (mobile, $mobile-end-width), (to-small-tablet, $small-tablet-end-width), (to-tablet, $tablet-end-width) !default;

Description

A list containing the devices for max-width media-query breakpoints

Type

List

Author

  • David Annez

mixins

respond-to

@mixin respond-to($device, $ie-fallback: false, $ie-fallback-noherit: false) { ... }

Description

Output a media query block for the targeted device and a potential internet explorer fallback

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$device

The device to match up the media query with. Can be one from the list of $min-breakpoints (small-tablet, tablet, desktop etc.) or $max-breakpoints (mobile, to-small-tablet, to-tablet)

String none
$ie-fallback

If set to true will return a .ie8 {content} fallback to ensure IE8 gets the supporting styling

Boolfalse
$ie-fallback-noherit

If attaching the mixin onto the root, then set this to true to ensure Sass builds the correct styles

Boolfalse

Content

This mixin allows extra content to be passed (through the @content directive).

Requires

Used by

Author

  • David Annez

typography

variables

establish-type-rules

$establish-type-rules: true !default;

Description

By default we establish normalised type rules for body. Certain projects won't need this or would rather override, so set this to false if you don't want the default typography rules to kick in

Type

Bool

base-font-size

$base-font-size: 16px !default;

Description

The base font size where every other type setting inherits from

Type

Number (pixels)

Used by

base-line-height

$base-line-height: 24px !default;

Description

The base line height for mapped for the $base-font-size

Type

Number (pixels)

base-cap-height

$base-cap-height: .6 !default;

Description

The cap height for the uSwitch fonts (average)

Type

Number (unitless)

base-line-ratio

$base-line-ratio: 1.618 !default;

Description

The line ratio for establishing a baseline - set as the golden ratio

Type

Number (unitless)

heading-font-sizes

$heading-font-sizes: 36px, 30px, 24px, 18px, 16px, 16px !default;

Description

A list containing the 6 heading font sizes used across uStyle

Type

List

heading-line-heights

$heading-line-heights: 1.3, 1.3, 1.25, 1.25, .95, .95 !default;

Description

A list with the 6 corresponding line heights for headings

Type

List

mixins

baseline

@mixin baseline($font-size: $base-font-size, $line-height: $base-line-ratio, $scale: $base-scale, $cap-height: $base-cap-height) { ... }

Description

Baseline mixin for cascading typographical elements. It calculates the adequate top and bottom pushes for the selected font size and line height. Will vary from font to font, has been set to our defaults

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$font-size

The font size for the element

Number (unit)$base-font-size
$line-height

The line height ratio

Number (unit)$base-line-ratio
$scale

Base scale for baseline

Number (unit)$base-scale
$cap-height

The cap height of the font being used on the element

Number (unit)$base-cap-height

Requires

normal-font

@mixin normal-font($extend: true) { ... }

Description

Returns the $normal-font declaration either as an extend or re-declares

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

If set to false will redeclare the $normal-font family

Booltrue

Requires

heading-font

@mixin heading-font($extend: true) { ... }

Description

Returns the $heading-font declaration either as an extend or re-declares

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

If set to false will redeclare the $heading-font family

Booltrue

Requires

Used by

italic-font

@mixin italic-font($extend: true) { ... }

Description

Returns the $normal-font declaration in italic either as an extend or re-declares

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

If set to false will redeclare the $normal-font family and set the font to italic

Booltrue

Requires

heading

@mixin heading($level, $heading-font: true, $extend: true) { ... }

Description

Builds the heading font size with pre-defined sizes and line-heights from $heading-font-sizes and $heading-line-heights respecively

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$level

Set a heading level between 1-6

Number (unitless) none
$heading-font

DEPRECATED

Booltrue
$extend

If set to false will redeclare the font-family settings

Booltrue

Requires

General

functions

rem

@function rem($pixels, $font-size: $base-font-size) { ... }

Description

Returns a rem value from pixels

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$pixels

The pixel number you want converted to rem

Number (unit) none
$font-size

The font-size relative to rems

Number (unit)$base-font-size

Returns

Unit

Used by

em

@function em($pixels, $font-size: $base-font-size) { ... }

Description

Returns a em value from pixels

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$pixels

The pixel number you want converted to em

Number (unit) none
$font-size

The font-size relative to ems

Number (unit)$base-font-size

Returns

Unit

Used by

col-width

@function col-width($columns) { ... }

Description

Returns a column % from $grid-columns

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$columns

The column number to convert to a % of the grid

Number (unitless) none

Returns

Unit (percentage)

Requires

Used by

shade

@function shade($color, $percentage) { ... }

Description

Returns a colour based on a black + $color percentage mix

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The colour you want to darken

String none
$percentage

The percentage amount to mix of black with the colour

Number (unit) none

tint

@function tint($color, $percentage) { ... }

Description

Returns a colour based on a white + $color percentage mix

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The colour you want to darken

String none
$percentage

The percentage amount to mix of white with the colour

Number (unit) none

opposite-direction

@function opposite-direction($directions) { ... }

Description

Returns the opposite direction of each direction in a list

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$directions

List of initial directions

List none

Returns

List

List of opposite directions

mixins

arrow

@mixin arrow($width: 20px, $height: 20px, $direction: up, $color: false) { ... }

Description

Returns a CSS arrow generated by border styles

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$width

Horizontal width of triangle

Number20px
$height

Vertical height of triangle

Number20px
$direction

Direction of tip of arrow

Stringup
$color

Color of triangle, if none specified inherits from font color of element

Colorfalse

Author

  • David Annez

placeholder

@mixin placeholder() { ... }

Description

Style placeholder attributes on form elements

Parameters

None.

Used by

Author

  • Joe Green

form-element-style

@mixin form-element-style($color) { ... }

Description

Conveniently style form input pseudo-classes for different form states

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The colour to be used for the form input's border and box-shadow

Color none

Used by

Author

  • Joe Green

form-element-disabled

@mixin form-element-disabled($color: #ddd, $background-color: #fafafa) { ... }

Description

Visually make disabled form inputs look like they can't be interacted with

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Foreground placeholder and border colour

Color#ddd
$background-color

Background colour of the form input

Color#fafafa

Requires

Author

  • Joe Green

clearfix

@mixin clearfix() { ... }

Description

Parameters

None.

Author

  • Nicolas Gallagher