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
- [mixin]
heading-font
heading-font-primary
use $heading-font
$heading-font-primary: $heading-font !default;
Description
The primary heading font stack
Type
String
heading-font-secondary
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
- [mixin]
normal-font
- [mixin]
italic-font
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-uswitch-navy !default;
Description
Text color for our form elements
Type
String (hex)
c-form-element-background
$c-form-element-background: $c-white !default;
Description
Background color for our form elements
Type
String (hex)
c-form-element-border
$c-form-element-border: $c-grey !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-dark-grey !default;
Description
Default border active colour for all form elements
Type
Variable
or String (pixels)
c-form-element-border-active
$c-form-element-border-active: $c-uswitch-navy !default;
Description
Hover border colour for form elements
Type
String (pixels)
c-form-element-disabled-fg
$c-form-element-disabled-fg: $c-grey !default;
Description
Active border colour for form elements
Type
String (pixels)
c-form-element-disabled-bg
$c-form-element-disabled-bg: $c-super-light-grey !default;
Description
Disabled background colour for form elements
Type
Variable
or String (pixels)
c-form-element-disabled-border
$c-form-element-disabled-border: $c-light-grey !default;
Description
Disabled border colour for form elements
Type
Variable
or String (pixels)
Used by
- [mixin]
form-element-disabled
c-form-error
$c-form-error: $c-error-red !default;
Description
Error color for form elements
Type
Variable
or String (pixels)
c-form-success
$c-form-success: $c-success-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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$input-size | Name of the size used in the form element list | String | base |
$input-sizes | List of sizes to pass through. Should contain 4 values per item, | 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$breakpoint | The breakpoint where you want the margin to be set | String | $default-grid-breakpoint |
Requires
- [mixin]
respond-to
- [variable]
gutter-width
- [variable]
gutter-width
- [variable]
gutter-width
- [variable]
gutter-width
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$cols | The number of columns to make the selected element | Number (unitless) | — none |
Requires
- [function]
col-width
- [variable]
gutter-width
- [variable]
gutter-width
Used by
- [mixin]
_grid-class
- [mixin]
_grid-class
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 Name | parameter Description | parameter Type | parameter 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 | 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
- [function]
col-width
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. DEPRECATED: Set this to true
if you do want .ie8 classes to be spat out for media queries
Type
Bool
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
- [variable]
tablet-end-width
Author
David Annez
tablet-width
$tablet-width: 768px !default;
Description
Breakpoint for tablet
Type
Number (unit)
Used by
- [variable]
small-tablet-end-width
Author
David Annez
small-tablet-width
$small-tablet-width: 600px !default;
Description
Breakpoint for small tablets
Type
Number (unit)
Used by
- [variable]
mobile-end-width
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
- [variable]
small-tablet-width
Author
David Annez
small-tablet-end-width
$small-tablet-end-width: $tablet-width - 1;
Description
Max-breakpoint for small tablets
Type
Number (unit)
Requires
- [variable]
tablet-width
Author
David Annez
tablet-end-width
$tablet-end-width: $desktop-width - 1;
Description
Max-breakpoint for tablets
Type
Number (unit)
Requires
- [variable]
desktop-width
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$device | The device to match up the media query with. Can be one from the list of | String | — none |
$ie-fallback | DEPRECATED: If set to | Bool | false |
$ie-fallback-noherit | DEPRECCATED: If attaching the mixin onto the root, then set this to | Bool | false |
Content
This mixin allows extra content to be passed (through the @content
directive).
Used by
- [mixin]
us-row
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 Name | parameter Description | parameter Type | parameter 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
- [function]
rem
- [variable]
base-font-size
- [variable]
base-font-size
normal-font
@mixin normal-font($extend: true) { ... }
Description
Returns the $normal-font
declaration either as an extend or re-declares
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$extend | If set to | Bool | true |
Requires
- [variable]
normal-font
heading-font
@mixin heading-font($extend: true) { ... }
Description
Returns the $heading-font
declaration either as an extend or re-declares
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$extend | If set to | Bool | true |
Requires
- [variable]
heading-font
Used by
- [mixin]
heading
italic-font
@mixin italic-font($extend: true) { ... }
Description
Returns the $normal-font
declaration in italic either as an extend or re-declares
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$extend | If set to | Bool | true |
Requires
- [variable]
normal-font
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$level | Set a heading level between 1-6 | Number (unitless) | — none |
$heading-font | DEPRECATED | Bool | true |
$extend | If set to | Bool | true |
Requires
- [mixin]
heading-font
- [function]
em
General
functions
rem
@function rem($pixels, $font-size: $base-font-size) { ... }
Description
Returns a rem
value from pixels
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$pixels | The pixel number you want converted to | Number (unit) | — none |
$font-size | The font-size relative to | Number (unit) | $base-font-size |
Returns
Unit
Used by
- [mixin]
baseline
em
@function em($pixels, $font-size: $base-font-size) { ... }
Description
Returns a em
value from pixels
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$pixels | The pixel number you want converted to | Number (unit) | — none |
$font-size | The font-size relative to | Number (unit) | $base-font-size |
Returns
Unit
Used by
- [mixin]
heading
col-width
@function col-width($columns) { ... }
Description
Returns a column % from $grid-columns
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$columns | The column number to convert to a % of the grid | Number (unitless) | — none |
Returns
Unit (percentage)
Requires
- [variable]
grid-columns
Used by
- [mixin]
us-col
shade
@function shade($color, $percentage) { ... }
Description
Returns a colour based on a black + $color
percentage mix
Parameters
parameter Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$width | Horizontal width of triangle | Number | 20px |
$height | Vertical height of triangle | Number | 20px |
$direction | Direction of tip of arrow | String | up |
$color | Color of triangle, if none specified inherits from font color of element | Color | false |
Author
David Annez
placeholder
@mixin placeholder() { ... }
Description
Style placeholder attributes on form elements
Parameters
None.
Used by
- [mixin]
form-element-disabled
- [mixin]
form-element-disabled
Author
Joe Green
form-element-style
@mixin form-element-style($color) { ... }
Description
Conveniently style form input pseudo-classes for different form states
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | The colour to be used for the form input's border and box-shadow | Color | — none |
Used by
- [mixin]
form-element-disabled
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | Foreground placeholder and border colour | Color | #ddd |
$background-color | Background colour of the form input | Color | #fafafa |
Requires
- [mixin]
form-element-style
- [mixin]
placeholder
- [mixin]
placeholder
- [variable]
c-form-element-disabled-border
Author
Joe Green
clearfix
@mixin clearfix() { ... }
Description
Clearfix mixin - http://nicolasgallagher.com/micro-clearfix-hack/
Parameters
None.
Author
Nicolas Gallagher
link-colors
@mixin link-colors($base-color, $hover: false, $active: false, $visited: false, $focus: false) { ... }
Description
Link colors mixin, inspired by Compass https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/typography/links/_link-colors.scss
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$base-color | The starting color for the link element | String | — none |
$hover | The color for the :hover state of the element | String | false |
$active | The color for the :active state of the element | String | false |
$visited | The color for the :visited state of the element | String | false |
$focus | The color for the :focus state of the element | String | false |
Author
Chris Eppstein