mixins

respond-to

@mixin respond-to($min: 0, $max: 0) { ... }

Breakpoint mixin to handle responsive views.

Parameters

$min string, number Default:0: Units are required for numerical parameters.
$max number Default:0: Units are required for numerical parameters.

Example

@include response-to('small') {
    // your responsive styles ...
}

functions

get-breakpoint

@function get-breakpoint($breakpoint-name) { ... }

Get breakpoint from map list of breakpoints.

Parameters

$breakpoint-name string Required: No description available.

Returns

String, Null

variables

breakpoints

Map

$breakpoints: ();

Map of available breakpoints.

Example

$breakpoints: (
    small: "(max-width: 500px)",
    big:   "(min-width: 2000px)"
);

variables

base-line-height

Number

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

Absolute height of one line of type, in pixels

rhythm-font-unit

String

$rhythm-font-unit: px !default;

The font unit to use when returning values in rhythm functions

round-to-nearest-half-line

Boolean

$round-to-nearest-half-line: false !default;

Allows the adjust-font-size-to mixin and the lines-for-font-size function to round the line height to the nearest half line height instead of the nearest integral line height to avoid large spacing between lines.

min-line-padding

Number

$min-line-padding: 2px !default;

Ensure there is at least this many pixels of vertical padding above and below the text.

mixins

font-size

@mixin font-size($fs-map, $fs-breakpoints: $breakpoints) { ... }

Font-size mixin that calculates accurate font-size and line-height to available breakpoints.

Parameters

$fs-map map Required: No description available.
$fs-breakpoints map Default:$breakpoints: No description available.

Example

$fs-map variable example
$p-sizes: (
    null: (1em, 1.3), // null field should be always present
    small: 1.1em,
    medium: (1.2em, 1.4),
    900px: 1.5em, // it's possible to use min viewport width as key too
)

usage example
p {
    @include font-size($p-sizes);
}

make-font-size

@mixin make-font-size($fs-font-size) { ... }

Utility function for mixin font-size.

Parameters

$fs-font-size string, list Required: No description available.

px-to-rem

@mixin px-to-rem($property, $px-values) { ... }

Given pixel inputs, print rem values with pixel fallbacks. Based on Bitmanic's rem mixin (https://github.com/bitmanic/rem)

Parameters

$property String Required: The css property name
$px-values String, List, Number Required: The value or values (space-separated list) for $property, in pixels

establish-baseline

@mixin establish-baseline() { ... }

Set type size and baseline grid on the root element.

This mixin takes no parameters.

set-font-size

@mixin set-font-size($to-size, $lines) { ... }

Set the font size to the specified number of pixels while maintaining the vertical rhythm.

Parameters

$to-size Number Required: Desired font size, in pixels
$lines Number Required: Desired leading, expressed in baselines (can fractional)

set-leading

@mixin set-leading($lines) { ... }

Adjust the leading to a new multiple of the baseline

Parameters

$lines Number Required: No description available.

leader

@mixin leader($lines, $property) { ... }

Apply leading whitespace

Parameters

$lines Number Required: No description available.
$property String Required: No description available.

trailer

@mixin trailer($lines, $property) { ... }

Apply trailing whitespace

Parameters

$lines Number Required: No description available.
$property String Required: No description available.

padding-leader

@mixin padding-leader($lines) { ... }

Apply leading whitespace as padding

Parameters

$lines Number Required: No description available.

padding-trailer

@mixin padding-trailer($lines) { ... }

Apply trailing whitespace as padding

Parameters

$lines Number Required: No description available.

rhythm-spacing

@mixin rhythm-spacing($leader, $trailer, $padding-leader, $padding-trailer) { ... }

Apply leading and trailing whitespace together. Defaults to equal margins above and below and no padding.

Parameters

$leader Number Required: No description available.
$trailer Number Required: No description available.
$padding-leader Number Required: No description available.
$padding-trailer Number Required: No description available.

side-rhythm-border

@mixin side-rhythm-border($side, $lines, $border:) { ... }

Apply a border to one side of an element without throwing off the vertical rhythm. The available space ($lines) must be greater than the width of your border.

Parameters

$side String Required: No description available.
$lines Number Required: No description available.
$border: List Required: $rule-width $rule-style $rule-color

leading-border

@mixin leading-border($lines, $border:) { ... }

Apply a leading rhythm border

Parameters

$lines Number Required: No description available.
$border: List Required: $rule-width $rule-style $rule-color

trailing-border

@mixin trailing-border($lines, $border:) { ... }

Apply a trailing rhythm border

Parameters

$lines Number Required: No description available.
$border: List Required: $rule-width $rule-style $rule-color

rhythm-borders

@mixin rhythm-borders($lines, $border:) { ... }

Apply borders equally to all sides with padding to maintain the vertical rhythm

Parameters

$lines Number Required: No description available.
$border: List Required: $rule-width $rule-style $rule-color

rhythm-paddings

@mixin rhythm-paddings($lines) { ... }

Apply padding equally to all sides and maintain the verticla rhythm.

Parameters

$lines Number Required: No description available.

functions

rhythm

@function rhythm($lines) { ... }

Return the height of n baselines. Returns px or rem based on the value of $rhythm-font-unit.

Parameters

$lines Number Required: No description available.

lines-for-font-size

@function lines-for-font-size($font-size) { ... }

Calculate the number of baselines required to accomodate a given pixel-based font size.

Parameters

$font-size Number Required: No description available.

variables

browser-default-font-size

Number

$browser-default-font-size: 16px;

Most (all?) browsers use a default of 16px for type.

rem-line-height

Number

$rem-line-height: $base-line-height / $base-font-size * 1rem;

The height of one line of type, in rems.

mixins

clearfix

@mixin clearfix($extend: true) { ... }

Float clearing helper.

Parameters

$extend bool Default:true: Whether or not extend a placeholder.

columns

@mixin columns($count, $gap) { ... }

Shurtcut mixin for columns which cover all major browsers.

Parameters

$count number Required: No description available.
$gap number Required: No description available.

ellipsis

@mixin ellipsis($extend: true) { ... }

Accessibility ellipsis helper.

Parameters

$extend bool Default:true: Whether or not extend a placeholder.

placeholder-color

@mixin placeholder-color($color, $opacity: 1) { ... }

Change placeholder colour in form fields like inputs, textareas etc.

Parameters

$color color Required: No description available.
$opacity number Default:1: No description available.

position

@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) { ... }

Shorthand for positioning.

Parameters

$position string Required: Position type (either absolute, fixed or relative)
$top length Default:null: Top offset
$right length Default:null: Right offset
$bottom length Default:null: Bottom offset
$left length Default:null: Left offset

rotate

@mixin rotate($degree) { ... }

Rotate element.

Parameters

$degree number Required: No description available.

transitions

@mixin transitions($transitions...) { ... }

Transition mixin which cover all major browsers.

Parameters

$transitions arglist Required: No description available.

gradient

@mixin gradient($direction, $color-01, $color-02) { ... }

Shortcut mixin for web gradients which cover all major browsers.

Parameters

$direction Number, String Required: No description available.
$color-01 String Required: No description available.
$color-02 String Required: No description available.

grid

@mixin grid($columns, $rows: $columns, $column-gap: 0px, $row-gap: $column-gap) { ... }

Utility mixin for css grids.

Parameters

$columns String Required: No description available.
$rows String Default:$columns: No description available.
$column-gap Number Default:0px: No description available.
$row-gap Number Default:$column-gap: No description available.

grid-column

@mixin grid-column($start, $end) { ... }

Shortcut mixin for setting element position inside a grid.

Parameters

$start Number Required: No description available.
$end Number Required: No description available.

grid-row

@mixin grid-row($start, $end) { ... }

Shortcut mixin for setting element position inside a grid.

Parameters

$start Number Required: No description available.
$end Number Required: No description available.