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-font-size

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

Absolute height of body text, in pixels

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

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.