1.1 sizes

variables

mq--mobile

Since 1.0.0
$mq--mobile: 332px;
View source

Description

Media query definition for mobile devices, used in css-locks.

Example

@include css-locks(font-size, $mq--mobile, $mq--desktop, $font-size--mobile, $font-size--desktop);

Author

mq--desktop

Since 1.0.0
$mq--desktop: 660px;
View source

Description

Media query definition for desktop devices, used in css-locks.

Example

@include css-locks(font-size, $mq--mobile, $mq--desktop, $font-size--mobile, $font-size--desktop);

Author

font-size--mobile

Since 1.0.0
$font-size--mobile: 14px;
View source

Description

Default font size on mobile devices, used in css-locks.

Example

@include css-locks(font-size, $mq--mobile, $mq--desktop, $font-size--mobile, $font-size--desktop);

Used by

Author

font-size--desktop

Since 1.0.0
$font-size--desktop: 18px;
View source

Description

Default font size on desktop devices, used in css-locks.

Example

@include css-locks(font-size, $mq--mobile, $mq--desktop, $font-size--mobile, $font-size--desktop);

Used by

Author

line-height

Since 1.0.0
$line-height: 1.6;
View source

Description

Default line height applied on every element

Example

line-height: $line-height;

Author

modularscale

Since 1.0.0
$modularscale: (
  base: 1rem,
  ratio: $minor-second
);
View source

Description

Configuration for modular scale

Example

@include css-locks(font-size, $mq--mobile, $mq--desktop, $font-size--mobile, $font-size--desktop);

Links

Author

mq-breakpoints

Since 1.0.0
$mq-breakpoints: (
  mobile:  $mq--mobile,
  desktop: $mq--desktop
);
View source

Description

Configuration for media queries

Example

@include mq($from: mobile, $until: desktop) {
  color: $color-alpha;
}

Links

Author

wrapper

Since 1.0.0
$wrapper: 640px;
View source

Description

Configuration for wrapper width

Example

max-width: $wrapper;

Author

1.2 colors

variables

color-alpha

Since 1.0.0
$color-alpha: #ba1ada;
View source

Description

Color from starter-project palette

Example

color: $color-alpha;

Author

color-beta

Since 1.0.0
$color-beta: #d91a79;
View source

Description

Color from starter-project palette

Example

color: $color-beta;

Author

color-gamma

Since 1.0.0
$color-gamma: #1ed9d9;
View source

Description

Color from starter-project palette

Example

color: $color-gamma;

Author

color-delta

Since 1.0.0
$color-delta: #1ebada;
View source

Description

Color from starter-project palette

Example

color: $color-delta;

Author

color-text

Since 1.0.0
$color-text: #383738;
View source

Description

Color for text from starter-project palette

Example

color: $color-text;

Author

color1

Since 1.0.0
$color1: #e01258;
View source

Description

Color from SB palette

Example

color: $color-alpha;

Author

white

Since 1.0.0
$white: #fff;
View source

Description

Color from SB palette

Example

color: $color-beta;

Author

black

Since 1.0.0
$black: #232323;
View source

Description

Color from SB palette

Example

color: $color-gamma;

Author

mail

Since 1.0.0
$mail: $color-alpha;
View source

Description

Color from SB palette

Example

color: $mail;

Author

twitter

Since 1.0.0
$twitter: #55acee;
View source

Description

Color from Social palette

Example

color: $twitter;

Author

linkedin

Since 1.0.0
$linkedin: #0077b5;
View source

Description

Color from Social palette

Example

color: $linkedin;

Author

facebook

Since 1.0.0
$facebook: #3b5998;
View source

Description

Color from Social palette

Example

color: $facebook;

Author

medium

Since 1.0.0
$medium: #00ab6b;
View source

Description

Color from Social palette

Example

color: $medium;

Author

github

Since 1.0.0
$github: #2f2f2f;
View source

Description

Color from Social palette

Example

color: $github;

Author

codepen

Since 1.0.0
$codepen: #212121;
View source

Description

Color from Social palette

Example

color: $codepen;

Author

lastfm

Since 1.0.0
$lastfm: #c3000d;
View source

Description

Color from Social palette

Example

color: $lastfm;

Author

google-plus

Since 1.0.0
$google-plus: #dc4e41;
View source

Description

Color from Social palette

Example

color: $google-plus;

Author

1.3 transitions

variables

trd

Since 1.0.0
$trd: 0.225s;
View source

Description

Transition duration

Example

transition-duration: $tra;

Author

tra

Since 1.0.0
$tra: cubic-bezier(0.3, 0.6, 0.5, 0.81);
View source

Description

Transition animation default

Example

transition-duration: $tra;

Author

font-alpha-subset

Since 1.0.0
$font-alpha-subset: 'Vollkorn Subset';
View source

Description

Vollkorn Subset

Example

font-family: $font-alpha-subset;

Author

font-alpha

Since 1.0.0
$font-alpha: 'Vollkorn';
View source

Description

Vollkorn

Example

font-family: $font-alpha;

Author

font-beta-subset

Since 1.0.0
$font-beta-subset: 'Playfair Display Bold Subset';
View source

Description

Playfair Display Bold Subset

Example

font-family: $font-beta-subset;

Author

font-beta

Since 1.0.0
$font-beta: 'Playfair Display Bold';
View source

Description

Playfair Display Bold

Example

font-family: $font-beta;

Author

font-gamma

Since 1.0.0
$font-gamma: 'Courier New', Courier, monospace;
View source

Description

Courier New', Courier, monospac

Example

font-family: $font-gamma;

Author

2.1 locks

functions

strip-unit

Since 1.0.0
@function strip-unit($value) { ... }
View source

Description

Function for stripping units

Parameters

NameDescriptionTypeDefault value
$value

A value with unit (e.g. 20px)

Unit—

Returns

Integer —

Returns a value without unit

Example

font-size: strip-unit(20px);

Used by

Links

Author

mixins

css-locks

Since 1.0.0
@mixin css-locks($properties, $min-vw, $max-vw, $min-value, $max-value) { ... }
View source

Description

Mixin for creating CSS Locks

Parameters

NameDescriptionTypeDefault value
$properties

A property (e.g. font-size)

String—
$min-vw

A minimal view width (e.g. 480px)

Unit—
$max-vw

A maximal view width (e.g. 960px)

Unit—
$min-value

A minimal value for lock (e.g. 14px)

Unit—
$max-value

A maximum value for lock (e.g. 20px)

Unit—

Example

@include css-locks(font-size, 480px, 960px, 14px, 20px);

Requires

Links

Author

3.1 helpers

functions

rem

Since 1.0.0
@function rem($size, $media: 'desktop') { ... }
View source

Description

Function for converting a value to rem unit

Parameters

NameDescriptionTypeDefault value
$size

A value with unit (e.g. 20px)

Unit—
$media

A media, (e.g. 'desktop' or 'mobile')

String'desktop'

Returns

Unit —

Returns a value converted in rem; returns 1rem if media is not 'desktop' or 'mobile'

Example

font-size: rem(20px, 'mobile');

Requires

Author