css3

mixins

animation

@mixin animation($args) { 
    -webkit-animation: $args;
    -moz-animation: $args;
    animation: $args;
 }
@mixin animation($args) { ... }

Description

animation prefixer.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$args none Any none

Links

animation-delay

@mixin animation-delay($args) { 
    -webkit-animation-delay: $args;
    -moz-animation-delay: $args;
    animation-delay: $args;
 }
@mixin animation-delay($args) { ... }

Description

animation-delay prefixer.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$args none Any none

Links

background-size

@mixin background-size($args...) { 
    -webkit-background-size: $args;
    -moz-background-size: $args;
    background-size: $args;
 }
@mixin background-size($args...) { ... }

Description

background-size prefixer.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$args none Arglist none

Links

border-radius

@mixin border-radius($radius: 5px) { 
    // If we want to draw a circle, output a pixel value instead,
    // as older versions of WebKit do not support % in border-radius
    @if $radius == 50% {
        $radius: 1000px;
    }
    
    @if function-exists(rem) {
        -webkit-border-radius: rem($radius);
        border-radius: rem($radius);
    } @else {
        -webkit-border-radius: $radius;
        border-radius: $radius;
    }
 }
@mixin border-radius($radius: 5px) { ... }

Description

border-radius prefixer.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$radius none Number 5px

Links

box-shadow

@mixin box-shadow($args...) { 
    -webkit-box-shadow: $args;
    -moz-box-shadow: $args;
    box-shadow: $args;
 }
@mixin box-shadow($args...) { ... }

Description

box-shadow prefixer.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$args none Arglist none

Links

box-sizing

@mixin box-sizing($box) { 
    -webkit-box-sizing: $box;
    -moz-box-sizing: $box;
    box-sizing: $box;
 }
@mixin box-sizing($box) { ... }

Description

box-sizing prefixer.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$box none String none

Links

column-width

@mixin column-width($box) { 
    @if function-exists(rem) {
        -webkit-column-width: rem($value);
        -moz-column-width: rem($value);
        column-width: rem($value);
    } @else {
        -webkit-column-width: $value;
        -moz-column-width: $value;
        column-width: $value;
    }
 }
@mixin column-width($box) { ... }

Description

column-width prefixer. Uses rem if defined.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$box none String none

Links

flex

@mixin flex($flex-grow: 0, $flex-shring: 1, $flex-basis: auto) { 
    -webkit-box-flex: $flex-grow;
    -moz-box-flex: $flex-grow;
    -webkit-flex: $flex-grow $flex-shrink $flex-basis;
    -ms-flex: $flex-grow $flex-shrink $flex-basis;
    flex: $flex-grow $flex-shrink $flex-basis;
 }
@mixin flex($flex-grow: 0, $flex-shring: 1, $flex-basis: auto) { ... }

Description

flex prefixer.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$flex-grow none Number 0
$flex-shring none Number 1
$flex-basis none Number, String auto

Links

flex-direction

@mixin flex-direction($direction) { 
    -webkit-flex-direction: $direction;
    -ms-flex-direction: $direction;
    flex-direction: $direction;
 }
@mixin flex-direction($direction) { ... }

Description

flex-direction prefixer.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$direction

row | row-reverse | column | column-reverse

String none

Links

flex-basis

@mixin flex-basis($value: auto) { 
    -webkit-flex-basis: $value;
    -moz-flex-basis: $value;
    -ms-flex-preferred-size: $value;
    flex-basis: $value;
 }
@mixin flex-basis($value: auto) { ... }

Description

flex-basis prefixer.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$value none Number, String auto

Used by

Links

flex-display

@mixin flex-display() { 
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
 }
@mixin flex-display() { ... }

Description

display: flex prefixer.

Parameters

None.

Links

flex-grow

@mixin flex-grow($value: 0) { 
    -webkit-box-flex: $value;
    -webkit-flex-grow: $value;
    -moz-flex-grow: $value;
    -ms-flex-positive: $value;
    flex-grow: $value;
 }
@mixin flex-grow($value: 0) { ... }

Description

flex-grow prefixer.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$value none Number 0

Used by

Links

keyframes

@mixin keyframes($name) { 
    @-webkit-keyframes $name {
        @content;
    }
    @-moz-keyframes $name {
        @content;
    }
    @keyframes $name {
        @content;
    }
 }
@mixin keyframes($name) { ... }

Description

@keyframes prefixer.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$name none String none

Links

rotate

@mixin rotate($angle) { 
    @include transform(rotate($angle));
 }
@mixin rotate($angle) { ... }

Description

transform: rotate() prefixer.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$angle none Number none

Links

sticky

@mixin sticky() { 
    position: -webkit-sticky; // iOS 6+
    position: -moz-sticky;
    position: -ms-sticky;
    position: sticky;
 }
@mixin sticky() { ... }

Description

position: sticky prefixer. Support is very limited but should be used in iOS. Note that Blink temporarily dropped support until they get their "scrolling and compositing house in order"

Parameters

None.

Links

transform

@mixin transform($args) { 
    -webkit-transform: $args;
    -moz-transform: $args;
    -ms-transform: $args;
    -o-transform: $args;
    transform: $args;
 }
@mixin transform($args) { ... }

Description

transform prefixer.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$args none Any none

Links

transform-origin

@mixin transform-origin($args) { 
    -webkit-transform-origin: $args;
    -moz-transform-origin: $args;
    -ms-transform-origin: $args;
    -o-transform-origin: $args;
    transform-origin: $args;
 }
@mixin transform-origin($args) { ... }

Description

transform-origin prefixer.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$args none Any none

Links

transition

@mixin transition($args...) { 
    -webkit-transition: $args;
    -moz-transition: $args;
    transition: $args;
 }
@mixin transition($args...) { ... }

Description

transition prefixer. Do not use when transitionning prefixed properties to avoid impossible code like -moz-transition: -webkit-border-radius 1s.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$args none Arglist none

Links

forms

mixins

guss-forms-fix-ie8-password-field-webfonts-display

@mixin guss-forms-fix-ie8-password-field-webfonts-display() { 
    [type=password] {
        font-family: sans-serif !important;
    }
 }
@mixin guss-forms-fix-ie8-password-field-webfonts-display() { ... }

Description

Fix a bug Internet Explorer 8 where text in password fields would become invisible when font-family references a webfont.

Parameters

None.

guss-forms-defaults

@mixin guss-forms-defaults() { 
    .form {
        margin-top: $gs-baseline*2;
        margin-bottom: $gs-baseline*2;
    }

    .form__heading {
        @include fs-bodyHeading(3);
        margin-left: 0;
        margin-right: 0;
    }

    .form__note,
    .form-field__note {
        font-family: $guss-forms-fields-font-family;
        font-size: 14px;
        margin-bottom: 8px;
    }

    .fieldset {
        border: 0;
        border-top: $guss-forms-fieldset-border-top;
        display: table;
        padding: (($gs-baseline/3)*4 - 1) 0 ($gs-baseline*2);
        margin: 0;
    }

    @include mq(desktop) {
        .fieldset__heading {
            display: table-cell;
            padding-right: $gs-gutter*5;
            width: gs-span(3);
            vertical-align: top;
        }

        .fieldset__fields {
            display: table-cell;
            vertical-align: top;
            width: gs-span(6);
        }
    }

    .form-fields-group .form-field {
        margin-bottom: 0;
    }

    .form-field {
        list-style: none;
        margin: 0 0 $gs-baseline*2;
        padding: 0;
    }

    .form-field__submit {
        .form-field__note {
            margin: 0 0 $gs-baseline*2;

            @include mq(desktop) {
                float: right;
                width: 60%;
                margin: 0;
            }
        }
    }

    .form-field--no-margin {
        margin: 0;
    }

    .form-field--error {
        .label {
            color: $guss-forms-error-colour;
        }

        .text-input,
        .text-input:focus {
            border-color: $guss-forms-error-field-border-colour;
        }
    }

    .form__error {
        @include fs-data(4);
        background-color: $guss-forms-error-background;
        border-bottom: 1px solid $guss-forms-error-border-colour;
        border-top: 1px solid $guss-forms-error-border-colour;
        color: $guss-forms-error-colour;
        margin-top: 6px;
        padding: 7px ($gs-baseline/3)*2;
    }

    .form__success {
        @include fs-data(4);
        background-color: $guss-forms-success-background;
        border-bottom: 1px solid $guss-forms-success-border-colour;
        border-top: 1px solid $guss-forms-success-border-colour;
        color: $guss-forms-success-colour;
        margin-top: $gs-baseline/2;
        padding: 7px ($gs-baseline/3)*2;
    }

    .form-field__error {
        color: $guss-forms-error-colour;
        margin-top: $gs-baseline/2;
    }

    .form-field__note--below {
        margin-bottom: 0;
        margin-top: $gs-baseline/2;
    }

    .form-field__note--left {
        float: left;
    }

    .form-field__note--right {
        float: right;
        margin-left: $gs-gutter;
    }

    .form-fields__inline {
        ul {
            margin: 0;
            padding: 0;

            .form-field {
                display: inline-block;
            }
        }

        .form-fields__heading {
            @include fs-bodyHeading(3, true);
            margin: 0 0 $gs-baseline;
            display: block;
        }
    }

    .form-fields--date-of-birth .form-field {
        margin: 0 18px 0 0;
    }

    .label {
        cursor: pointer;
        display: block;
        margin-bottom: 6px;
    }

    .text-input,
    .textarea {
        border: 1px solid $guss-forms-fields-border-colour;
        @include box-shadow(none);
        @include box-sizing(border-box);
        color: $guss-forms-fields-colour;
        display: inline-block;
        font-family: $guss-forms-fields-font-family;
        padding: 8px 8px 7px;
        font-size: 16px;
        line-height: 1.4;
        outline: none;
        @include border-radius(0);
        width: 100%;
        -webkit-appearance: none;

        &:focus {
            border-color: $guss-forms-fields-border-colour-focus;
        }

        @include mq(tablet) {
            font-size: 14px;
        }
    }

    .textarea {
        resize: vertical;
    }

    .textarea--no-resize {
        min-height: ($gs-baseline/3)*20;
        resize: none;
    }

    .textarea--mid {
        min-height: $gs-baseline*9;
    }

    .textarea--long {
        min-height: ($gs-baseline/3)*40;
    }

    .submit-input {
        background: $guss-forms-submit-background;
        border: 0 none;
        color: #ffffff;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        margin: 0 $gs-gutter 0 0;
        min-width: gs-span(2);
        padding: 11px $gs-gutter/2;
        outline: none;
        text-align: center;

        &:hover,
        &:focus {
            background: $guss-forms-submit-background-focus;
        }

        &:active {
            background: $guss-forms-submit-background-active;
        }
    }

    .submit-input[disabled] {
        background: $guss-forms-submit-background-disabled;
    }

    .check-label,
    .radio-label {
        display: block;
        font-family: $guss-forms-fields-font-family;
        font-size: 14px;
        margin-bottom: $gs-baseline/3;
        padding-left: $gs-gutter;
    }

    .check-label--helper {
        display: inline-block;
        vertical-align: middle;
    }

    [type=checkbox],
    [type=radio] {
        float: left;
        height: 13px;
        margin-left: -$gs-gutter;
        margin-top: 2px;
        width: 13px;
    }
 }
@mixin guss-forms-defaults() { ... }

Description

Default form styles

Parameters

None.

variables

guss-forms-fieldset-border-top

$guss-forms-fieldset-border-top: 1px solid guss-colour(neutral-7) !default;

Description

Fieldset's border-top style.

Type

List

Requires

guss-forms-fields-font-family

$guss-forms-fields-font-family: $f-sans-serif-text !default;

Description

Text fields' font-family.

Type

List

Requires

guss-forms-fields-colour

$guss-forms-fields-colour: guss-colour(neutral-1) !default;

Description

Text fields' color.

Type

Color

Requires

guss-forms-fields-border-colour

$guss-forms-fields-border-colour: guss-colour(neutral-4) !default;

Description

Text fields' border-color.

Type

Color

Requires

guss-forms-fields-border-colour-focus

$guss-forms-fields-border-colour-focus: guss-colour(neutral-2) !default;

Description

Text fields' border-color when field is focused.

Type

Color

Requires

guss-forms-error-colour

$guss-forms-error-colour: guss-colour(error) !default;

Description

Form error color.

Type

Color

Requires

Used by

guss-forms-error-background

$guss-forms-error-background: #fdf4f3 !default;

Description

Form error background-color.

Type

Color

guss-forms-error-border-colour

$guss-forms-error-border-colour: lighten($guss-forms-error-colour, 35%) !default;

Description

Form error border-color.

Type

Color

guss-forms-error-field-border-colour

$guss-forms-error-field-border-colour: $guss-forms-error-colour !default;

Description

Form error fields border-color.

Type

Color

Requires

guss-forms-success-colour

$guss-forms-success-colour: guss-colour(success) !default;

Description

Form success color.

Type

Color

Requires

guss-forms-success-background

$guss-forms-success-background: lighten($guss-forms-success-colour, 70%) !default;

Description

Form success background-color.

Type

Color

guss-forms-success-border-colour

$guss-forms-success-border-colour: lighten($guss-forms-success-colour, 35%) !default;

Description

Form success border-color.

Type

Color

guss-forms-submit-background

$guss-forms-submit-background: guss-colour(tone-news-1) !default;

Description

Submit button background-color.

Type

Color

Requires

Used by

guss-forms-submit-background-focus

$guss-forms-submit-background-focus: darken($guss-forms-submit-background, 5%) !default;

Description

Submit button background-color when focused.

Type

Color

Requires

guss-forms-submit-background-active

$guss-forms-submit-background-active: guss-colour(neutral-1) !default;

Description

Submit button background-color when active.

Type

Color

Requires

guss-forms-submit-background-disabled

$guss-forms-submit-background-disabled: guss-colour(neutral-5) !default;

Description

Submit button background-color when disabled.

Type

Color

Requires

grid-system

mixins

gs-container

@mixin gs-container() { 
    position: relative;
    margin: 0 auto;
    max-width: gs-span(14) + $gs-gutter * 2;

    @include mq(wide) {
        max-width: gs-span($gs-max-columns) + $gs-gutter * 2;
    }
 }
@mixin gs-container() { ... }

Description

Grid container. Snaps to $gs-max-columns columns at the wide breakpoint.

Parameters

None.

Requires

Used by

gs-helpers

@mixin gs-helpers() { 
    @for $n from 1 through $gs-max-columns {
        .gs-span-#{$n} {
            width: gs-span($n);
        }
    }
 }
@mixin gs-helpers() { ... }

Description

Grid columns helper classes, useful for quick prototyping.

Parameters

None.

Example

<div class="gs-span-3"></div>

Requires

grid-system

@mixin grid-system() { 
    .gs-container {
        @include gs-container;
    }
 }
@mixin grid-system() { ... }

Description

Grid system.

Parameters

None.

Requires

variables

gs-gutter

$gs-gutter: 20px !default;

Description

Gutter width.

Type

Number

Used by

gs-baseline

$gs-baseline: 12px !default;

Description

Baseline size.

Type

Number

Used by

gs-column-width

$gs-column-width: 60px !default;

Description

Column width.

Type

Number

Used by

gs-row-height

$gs-row-height: 36px !default;

Description

Row height.

Type

Number

Used by

gs-max-columns

$gs-max-columns: 16 !default;

Description

Number of columns.

Type

Number

Used by

functions

gs-span

@function gs-span($n-columns) { 
    @return $n-columns * $gs-column-width + $gs-gutter * ($n-columns - 1);
 }
@function gs-span($n-columns) { ... }

Description

Grid span. Compute the width of a given number of grid columns.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$n-columns none Number none

Returns

Number

Example

.element {
  width: gs-span(3);
}

Requires

Used by

gs-height

@function gs-height($n-rows) { 
    @return $n-rows * $gs-row-height + $gs-baseline * ($n-rows - 1);
 }
@function gs-height($n-rows) { ... }

Description

Grid height. Compute the height of a given number of vertical grid units.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$n-rows none Number none

Returns

Number

Example

.element {
  padding-top: gs-height(2);
}

Requires

layout

mixins

guss-columns

@mixin guss-columns($base-class, $column-min-width: $guss-column-min-width, $column-gap: $guss-column-gap, $columns-fallback-width: $guss-columns-fallback-width, $columns-fallback-columns: $guss-columns-fallback-columns, $css3-columns-support: $browser-supports-columns) { 
    @if $css3-columns-support {
        #{$base-class} {
            -webkit-column-width: rem($column-min-width);
            -webkit-column-gap: rem($column-gap);
            -webkit-column-fill: balance;

            -moz-column-width: rem($column-min-width);
            -moz-column-gap: rem($column-gap);
            -moz-column-fill: balance;

            column-width: rem($column-min-width);
            column-gap: rem($column-gap);
            column-fill: balance;
        }
        #{$base-class}__item {
            // Fix a bug in IE where hovering items would change
            // the column container's height
            height: 100%;

            // `column-break-inside: avoid;` does not work in all browsers
            // so we use `display: inline-block;` instead
            // -webkit-column-break-inside: avoid;
            //    -moz-column-break-inside: avoid;
            //         column-break-inside: avoid;
            display: inline-block;
            width: 100%;
        }
    }
    @if not $css3-columns-support {
        #{$base-class} {
            margin-left: $column-gap / 2 * -1;
            margin-right: $column-gap / 2 * -1;

            // Micro clearfix (http://nicolasgallagher.com/micro-clearfix-hack/)
            zoom: 1;

            &:after,
            &:before {
                content: '';
                display: table;
            }
            &:after {
                clear: both;
            }
        }
        #{$base-class}__item {
            position: relative;
            display: block;
            margin-left: $column-gap / 2;
            margin-right: $column-gap / 2;

            @include mq(tablet) {
                float: left;
            }

            @if type-of($columns-fallback-width) == map {
                // Author has specified various fallbacks depending on the breakpoint.
                // Note: breakpoints refer to names given to screen sizes in sass-mq
                // 
                // @include guss-columns(
                //     (…)
                //     $columns-fallback-width: (
                //         tablet: gs-span(9),
                //         desktop: gs-span(12)
                //     ),
                //     $columns-fallback-columns: (
                //         tablet: 2,
                //         desktop: 3
                //     )
                // );
                @each $breakpoint, $fallback-width in $columns-fallback-width {

                    $number-of-fallback-columns: if(type-of($columns-fallback-columns) == map, map-get($columns-fallback-columns, $breakpoint), $columns-fallback-columns);

                    @include mq($breakpoint) {
                        width: width-of-fallback-column-item(
                                    $container-width: $fallback-width,
                                    $gap-between-columns: $column-gap,
                                    $number-of-columns: $number-of-fallback-columns
                                );

                        &:nth-child(n) {
                            clear: none;
                        }
                        &:nth-child(#{$number-of-fallback-columns}n+1) {
                            clear: both;
                        }
                    }

                }
            } @else {
                // Author specified a single fallback width, that applies to all breakpoints
                // 
                // @include guss-columns(
                //     (…)
                //     $columns-fallback-width: 290px,
                //     $columns-fallback-columns: 3
                // );
                width: width-of-fallback-column-item(
                            $container-width: $columns-fallback-width,
                            $gap-between-columns: $column-gap,
                            $number-of-columns: $columns-fallback-columns
                        );

                &:nth-child(n) {
                    clear: none;
                }
                &:nth-child(#{$columns-fallback-columns}n+1) {
                    clear: both;
                }
            }
        }
    }
 }
@mixin guss-columns($base-class, $column-min-width: $guss-column-min-width, $column-gap: $guss-column-gap, $columns-fallback-width: $guss-columns-fallback-width, $columns-fallback-columns: $guss-columns-fallback-columns, $css3-columns-support: $browser-supports-columns) { ... }

Description

A "columns pattern" fits as many "$guss-column-min-width"-wide columns in any type of context: full-width container, sidebar…

Parameters

parameter Name parameter Description parameter Type parameter Default value
$base-class none String none
$column-min-width none Number $guss-column-min-width
$column-gap none Number $guss-column-gap
$columns-fallback-width none Number $guss-columns-fallback-width
$columns-fallback-columns none Number $guss-columns-fallback-columns
$css3-columns-support none Bool $browser-supports-columns

Example

 // Usage 1: Sass mixin
 @include guss-columns('.classname');

 // Usage 2: utility class set as `$guss-columns-utility-class`
 @include guss-columns-utility;
<div class="l-columns">
    <div class="l-columns__item"></div>
    <div class="l-columns__item"></div>
    <div class="l-columns__item"></div>
    <div class="l-columns__item"></div>
    <div class="l-columns__item"></div>
    <div class="l-columns__item"></div>
    <div class="l-columns__item"></div>
</div>

Requires

Used by

Links

guss-columns-utility

@mixin guss-columns-utility() { 
    @include guss-columns($guss-columns-utility-class);
 }
@mixin guss-columns-utility() { ... }

Description

Column utility.

Parameters

None.

Requires

guss-row

@mixin guss-row($base-class) { 
    @if ($browser-supports-flexbox) {
        @include mq(tablet) {
            #{$base-class} {
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-direction: normal;
                -moz-box-direction: normal;
                -webkit-box-orient: horizontal;
                -moz-box-orient: horizontal;
                -webkit-flex-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;
                -webkit-flex-wrap: nowrap;
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
                -webkit-align-content: stretch;
                -ms-flex-line-pack: stretch;
                align-content: stretch;
                -webkit-box-align: stretch;
                -moz-box-align: stretch;
                -webkit-align-items: stretch;
                -ms-flex-align: stretch;
                align-items: stretch;
                width: 100%; // Prevent consecutive rows from flexing together in FF
            }
            #{$base-class}__item {
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
                @include flex-grow(1);
                @include flex-basis(0);
                width: 0; // Prevent items to grow out of their parent in FF
            }
            #{$base-class}__item--boost-1 { @include flex-grow(1.5); }
            #{$base-class}__item--boost-2 { @include flex-grow(2); }
        }

        // Mobile layout variation:
        // - Items are aligned horizontally, 50% each
        // - Should degrade into a vertical list
        //
        // Browser support:
        // - iOS 7+ (-webkit- prefix required)
        // - Chrome
        // - IE 11+
        // - Firefox 28+ (for flex-wrap support)
        @include mq($to: tablet) {
            #{$base-class}--layout-m {
                display: -webkit-flex;
                display: flex;
                -webkit-flex-wrap: wrap;
                flex-wrap: wrap;

                // Items fill half the width of their container
                #{$base-class}__item {
                    -webkit-flex-basis: 50%;
                    flex-basis: 50%;
                }

                // Break the flow on mobile:
                // Item will fill the whole width of its container
                #{$base-class}__item--break-m {
                    -webkit-flex: 1 100%;
                    flex: 1 100%;
                }
            }
        }
    } @else {
        #{$base-class} {
            width: $guss-row-fallback-width;

            // Micro clearfix (http://nicolasgallagher.com/micro-clearfix-hack/)
            zoom: 1;

            &:after,
            &:before {
                content: "";
                display: table;
            }
            &:after {
                clear: both;
            }
        }

        #{$base-class}__item {
            float: left;
        }
        @each $i in 2, 3, 4 {
            #{$base-class}--items-#{$i} #{$base-class}__item {
                width: $guss-row-fallback-width / $i;
            }
        }
    }
 }
@mixin guss-row($base-class) { ... }

Description

A row is an ensemble of 2, 3 or 4 items that are originally stacked vertically on mobile and flow horizontally on higher breakpoints.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$base-class none String none

Example

 // Sass Mixin
 @include guss-row('.classname');
 // Utility class set as `$guss-row-utility-class`
 @include guss-row-utility;
<div class="l-row l-row--items-<number of items contained>">
    <div class="l-row__item [l-row__item--boost-2]"></div>
    <div class="l-row__item"></div>
    <div class="l-row__item"></div>
    <div class="l-row__item [l-row__item--boost-1]"></div>
</div>
<!-- --boost-n modifiers are used to add visual importance to an item.
Note that this applies only to browsers that support flexbox. -->

Requires

Used by

Links

guss-row-utility

@mixin guss-row-utility() { 
    @include guss-row($guss-row-utility-class);
 }
@mixin guss-row-utility() { ... }

Description

Row utility.

Parameters

None.

Requires

variables

guss-column-min-width

$guss-column-min-width: 300px !default;

Description

Minimum column width.

Type

Number

Used by

guss-column-gap

$guss-column-gap: 20px !default;

Description

Column gutter.

Type

Number

Used by

guss-columns-utility-class

$guss-columns-utility-class: '.l-columns';

Description

Column utility class.

Type

String

Used by

browser-supports-columns

$browser-supports-columns: true !default;

Description

When set to false, output a simpler version with a static width.

Type

Bool

Used by

Links

guss-columns-fallback-width

$guss-columns-fallback-width: 940px !default;

Description

Fallback width when CSS3 columns support is disabled.

Type

Number

Used by

guss-columns-fallback-columns

$guss-columns-fallback-columns: 3 !default;

Description

Number of columns in the non-responsive version.

Type

Number

Used by

guss-row-utility-class

$guss-row-utility-class: '.l-row' !default;

Description

Row utility class.

Type

String

Used by

browser-supports-flexbox

$browser-supports-flexbox: true !default;

Description

When set to false, output a simpler version with a static width.

Type

Bool

Used by

Links

guss-row-fallback-width

$guss-row-fallback-width: 940px !default;

Description

Static width for older browsers.

Type

Number

Used by

functions

width-of-fallback-column-item

@function width-of-fallback-column-item($container-width, $gap-between-columns, $number-of-columns) { 
    @return ($container-width - $gap-between-columns * ($number-of-columns - 1)) / $number-of-columns;
 }
@function width-of-fallback-column-item($container-width, $gap-between-columns, $number-of-columns) { ... }

Description

Width of fallback column item.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$container-width none Number none
$gap-between-columns none Number none
$number-of-columns none Number none

Returns

Number

Used by

typography

mixins

guss-typography-defaults

@mixin guss-typography-defaults($font-family: $f-serif-text) { 
    @at-root {
        html {
            font-family: $font-family;
            -moz-osx-font-smoothing: grayscale; /* 1 */
            -webkit-font-smoothing: antialiased; /* 1 */
            font-size: 62.5%; /* 2 */
            font-size: calc(1em * .625); /* 3 */
        }
        body {
            font-size: 1.6em; /* 4 */
            line-height: 1.5; /* 5 */
        }
    }
 }
@mixin guss-typography-defaults($font-family: $f-serif-text) { ... }

Description

Default typography settings, to be included as soon as possible in the HTML

  1. Make type rendering look crisper
  2. Set baseline font size to 10px
  3. Fixes an IE11 bug where rouding with % would create scaling issues
    See http://bit.ly/1g4X0bX — thanks @7studio and @dawitti
  4. Set default text size back to 16px (at default zoom level)
  5. Set relative line spacing to 1.5 (16px * 1.5 = 24px)

Parameters

parameter Name parameter Description parameter Type parameter Default value
$font-family

Default global font

String $f-serif-text

Requires

font-size

@mixin font-size($size, $line-height: $size) { 
    font-size: convert-to-px($size);
    line-height: convert-to-px($line-height);
 }
@mixin font-size($size, $line-height: $size) { ... }

Description

Font-size and line-height shorthand

Parameters

parameter Name parameter Description parameter Type parameter Default value
$size none Number none
$line-height none Number $size

Example

 @include font-size(18, 24);

Requires

Used by

font

@mixin font($family, $weight, $size, $line-height: $size) { 
    font-family: $family;
    font-weight: $weight;
    @include font-size($size, $line-height);
 }
@mixin font($family, $weight, $size, $line-height: $size) { ... }

Description

Font styling shorthand
Note: prefer the usage of the font-scale mixins to stick to the font scale

Parameters

parameter Name parameter Description parameter Type parameter Default value
$family none String none
$weight none String none
$size none Number none
$line-height none Number $size

Example

 @include font(arial, bold, 18, 24);

Requires

f-header

@mixin f-header() { 
    font-family: $f-serif-headline;
    font-weight: 900;
 }
@mixin f-header() { ... }

Description

Header family and weight properties.

Parameters

None.

Requires

Used by

fs-header

@mixin fs-header($level, $size-only) { 
    @include font-size(get-font-size(header, $level), get-line-height(header, $level));

    @if $size-only == false {
        @include f-header;
    }
 }
@mixin fs-header($level, $size-only) { ... }

Description

Header typography settings.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$level none Number none
$size-only none Boolean none

Example

 // Output all properties (font-size, line-height, family, weight)
 @include fs-header(3);
 
 // Output font-size and line-height only
 @include fs-header(3, $size-only: true);

Requires

f-headline

@mixin f-headline() { 
    font-family: $f-serif-headline;
    font-weight: normal;
 }
@mixin f-headline() { ... }

Description

Healdine family and weight properties.

Parameters

None.

Requires

Used by

fs-headline

@mixin fs-headline($level, $size-only) { 
    @include font-size(get-font-size(headline, $level), get-line-height(headline, $level));

    @if $size-only == false {
        @include f-headline;
    }
 }
@mixin fs-headline($level, $size-only) { ... }

Description

Headline typography settings.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$level none Number none
$size-only none Boolean none

Example

 // Output all properties (font-size, line-height, family, weight)
 @include fs-headline(3);
 
 // Output font-size and line-height only
 @include fs-headline(3, $size-only: true);

Requires

f-bodyHeading

@mixin f-bodyHeading() { 
    font-family: $f-serif-text;
    font-weight: bold;
 }
@mixin f-bodyHeading() { ... }

Description

Body Heading family and weight properties.

Parameters

None.

Requires

Used by

fs-bodyHeading

@mixin fs-bodyHeading($level, $size-only) { 
    @include font-size(get-font-size(bodyHeading, $level), get-line-height(bodyHeading, $level));

    @if $size-only == false {
        @include f-bodyHeading;
    }
 }
@mixin fs-bodyHeading($level, $size-only) { ... }

Description

Body Heading typography settings.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$level none Number none
$size-only none Boolean none

Example

 // Output all properties (font-size, line-height, family, weight)
 @include fs-bodyHeading(3);
 
 // Output font-size and line-height only
 @include fs-bodyHeading(3, $size-only: true);

Requires

f-bodyCopy

@mixin f-bodyCopy() { 
    font-family: $f-serif-text;
 }
@mixin f-bodyCopy() { ... }

Description

Body Copy family property.

Parameters

None.

Requires

Used by

fs-bodyCopy

@mixin fs-bodyCopy($level, $size-only) { 
    @include font-size(get-font-size(bodyCopy, $level), get-line-height(bodyCopy, $level));

    @if $size-only == false {
        @include f-bodyCopy;
    }
 }
@mixin fs-bodyCopy($level, $size-only) { ... }

Description

Body Copy typography settings.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$level none Number none
$size-only none Boolean none

Example

 // Output all properties (font-size, line-height, family)
 @include fs-bodyCopy(3);
 
 // Output font-size and line-height only
 @include fs-bodyCopy(3, $size-only: true);

Requires

f-data

@mixin f-data() { 
    font-family: $f-data;
 }
@mixin f-data() { ... }

Description

Data family property.

Parameters

None.

Requires

Used by

fs-data

@mixin fs-data($level, $size-only) { 
    @include font-size(get-font-size(data, $level), get-line-height(data, $level));

    @if $size-only == false {
        @include f-data;
    }
 }
@mixin fs-data($level, $size-only) { ... }

Description

Data typography settings.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$level none Number none
$size-only none Boolean none

Example

 // Output all properties (font-size, line-height, family)
 @include fs-data(3);
 
 // Output font-size and line-height only
 @include fs-data(3, $size-only: true);

Requires

f-textSans

@mixin f-textSans() { 
    font-family: $f-sans-serif-text;
 }
@mixin f-textSans() { ... }

Description

Text Sans family property.

Parameters

None.

Requires

Used by

fs-textSans

@mixin fs-textSans($level, $size-only) { 
    @include font-size(get-font-size(textSans, $level), get-line-height(textSans, $level));

    @if $size-only == false {
        @include f-textSans;
    }
 }
@mixin fs-textSans($level, $size-only) { ... }

Description

Text Sans typography settings.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$level none Number none
$size-only none Boolean none

Example

 // Output all properties (font-size, line-height, family)
 @include fs-textSans(3);
 
 // Output font-size and line-height only
 @include fs-textSans(3, $size-only: true);

Requires

f-headlineSans

@mixin f-headlineSans() { 
    font-family: $f-sans-serif-headline;
 }
@mixin f-headlineSans() { ... }

Description

Headline Sans family property.
Is not currently integrated into our font scale matrix, hence no fs- mixin; currently we're just using it as a replacement font in a few places.

Parameters

None.

Requires

variables

f-data

$f-data: 'Guardian Agate Sans 1 Web', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif !default;

Description

Data font stack

Used by

f-serif-text

$f-serif-text: 'Guardian Text Egyptian Web', Georgia, serif !default;

Description

Serif font stack

Used by

f-serif-headline

$f-serif-headline: 'Guardian Egyptian Web', Georgia, serif !default;

Description

Headline font stack

Used by

f-sans-serif-text

$f-sans-serif-text: 'Guardian Text Sans Web', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif !default;

Description

Sans serif text font stack

Used by

f-sans-serif-headline

$f-sans-serif-headline: 'Guardian Sans Web', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif !default;

Description

Sans serif headline font stack

Used by

font-scale

$font-scale: (
    header: (
        1: (font-size: 16, line-height: 20),
        2: (font-size: 18, line-height: 24),
        3: (font-size: 20, line-height: 24),
        4: (font-size: 22, line-height: 28),
        5: (font-size: 24, line-height: 28),
    ),
    headline: (
        1: (font-size: 14, line-height: 18),
        2: (font-size: 16, line-height: 20),
        3: (font-size: 20, line-height: 24),
        4: (font-size: 24, line-height: 28),
        5: (font-size: 28, line-height: 32),
        6: (font-size: 32, line-height: 36),
        7: (font-size: 36, line-height: 40),
        8: (font-size: 40, line-height: 44),
        9: (font-size: 44, line-height: 48),
    ),
    bodyHeading: (
        1: (font-size: 14, line-height: 22),
        2: (font-size: 16, line-height: 24),
        3: (font-size: 18, line-height: 28),
        4: (font-size: 20, line-height: 28),
    ),
    bodyCopy: (
        1: (font-size: 14, line-height: 20),
        2: (font-size: 16, line-height: 24),
        3: (font-size: 18, line-height: 28),
    ),
    data: (
        1: (font-size: 11, line-height: 14),
        2: (font-size: 12, line-height: 14),
        3: (font-size: 13, line-height: 16),
        4: (font-size: 14, line-height: 18),
        5: (font-size: 16, line-height: 20),
        6: (font-size: 18, line-height: 22),
    ),
    textSans: (
        1: (font-size: 12, line-height: 16),
        2: (font-size: 13, line-height: 18),
        3: (font-size: 14, line-height: 20),
        4: (font-size: 14, line-height: 22),
    )
) !default;

Description

Default font scale settings See font-scale.html and font-scale.png for visual representations

Used by

functions

get-scale

@function get-scale($name, $font-scale: $font-scale) { 
    @return map-get($font-scale, $name);
 }
@function get-scale($name, $font-scale: $font-scale) { ... }

Description

Grab all levels of a font the font-scale

Parameters

parameter Name parameter Description parameter Type parameter Default value
$name

Name of the font-scale matrix (eg: headline)

String none
$font-scale none Map $font-scale

Returns

Map

Example

 font-size: get-scale(header);

Requires

Used by

get-scale-level

@function get-scale-level($name, $level, $font-scale: $font-scale) { 
    @return map-get(get-scale($name, $font-scale), $level);
 }
@function get-scale-level($name, $level, $font-scale: $font-scale) { ... }

Description

Grab info for a particular level of a font-scale

Parameters

parameter Name parameter Description parameter Type parameter Default value
$name

Name of the font-scale in the matrix (eg: headline)

String none
$level

Level in the matrix

Number none
$font-scale none Map $font-scale

Returns

Map

Example

 font-size: get-scale-level(header, 1);

Requires

Used by

get-font-size

@function get-font-size($name, $level, $font-scale) { 
    @return convert-to-px(map-get(get-scale-level($name, $level, $font-scale), font-size));
 }
@function get-font-size($name, $level, $font-scale) { ... }

Description

Get a font-size for a level in the font-scale matrix

Parameters

parameter Name parameter Description parameter Type parameter Default value
$name

Name of the font-scale in the matrix (eg: headline)

String none
$level

Level in the matrix

Number none
$font-scale

Configuration

Map none

Returns

Number

Example

 font-size: get-font-size(header, 3);

Requires

Used by

get-line-height

@function get-line-height($name, $level, $font-scale) { 
    @return convert-to-px(map-get(get-scale-level($name, $level, $font-scale), line-height));
 }
@function get-line-height($name, $level, $font-scale) { ... }

Description

Get a line-height for a level in the font-scale matrix

Parameters

parameter Name parameter Description parameter Type parameter Default value
$name

Name of the font-scale in the matrix (eg: headline)

String none
$level

Level in the matrix

Number none
$font-scale

Configuration

Map none

Returns

Number

Example

 font-size: get-line-height(header, 3);

Requires

Used by

convert-to-px

@function convert-to-px($value) { 
    @if (type-of($value) == number and $value != 0) {
        $value: if(unitless($value), $value * 1px, $value);
    }
    @return $value;
 }
@function convert-to-px($value) { ... }

Description

Turn any value into pixels

Parameters

parameter Name parameter Description parameter Type parameter Default value
$value none Number none

Returns

Number

Example

 font-size: convert-to-px(14); // 14px

Used by

General

mixins

rem

@mixin rem($properties) { 
    @each $property, $value in $properties {
        @if (type-of($value) == number and $value != 0) {
            // Turn unitless values into pixels
            $value: if(unitless($value), $value * 1px, $value);
        }

        #{$property}: $value;
        #{$property}: rem($value);
    }
 }
@mixin rem($properties) { ... }

Description

Output rem units with px fallback.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$properties none Map none

Requires

Links

variables

guss-rem-baseline

$guss-rem-baseline: 10px !default;

Description

Default rem baseline.

Type

Number

Used by

functions

rem

@function rem($value, $baseline: $guss-rem-baseline) { 
    @if $value == 0 {
        @return 0; // 0rem -> 0
    } 
    
    @if type-of($value) == list {
        $result: ();

        @each $e in $value {
            $result: append($result, rem($e, $baseline));
        }

        @return $result;
    } @else {
        @return if(type-of($value) == number and unit($value) == px, $value / $baseline * 1rem, $value);
    }
 }
@function rem($value, $baseline: $guss-rem-baseline) { ... }

Description

Transform a value into rem.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$value none Number none
$baseline none Number $guss-rem-baseline

Returns

List, Number

Requires

Used by

colours

mixins

guss-generate-colour-classes

@mixin guss-generate-colour-classes($palette: $guss-colours, $prefix: "c-", $property: "color") { 
    @each $name, $color in $palette {
        .#{unquote($prefix + $name)} {
            #{$property}: $color;
        }
    }
 }
@mixin guss-generate-colour-classes($palette: $guss-colours, $prefix: "c-", $property: "color") { ... }

Description

Generate helper classes for a given colour palette
Outputs rules such as: .c-red { color: red; }.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$palette

palette

Map $guss-colours
$prefix

prefix

String "c-"
$property

property

String "color"

Requires

variables

guss-colours

$guss-colours: (
    guardian-brand:         #005689,
    guardian-brand-light:   #94b1ca,
    guardian-brand-dark:    #00456e,

    error:                  #d61d00,
    success:                #4a7801,

    // Neutral palette (desaturized)
    neutral-1:              #333333,
    neutral-2:              #767676,
    neutral-3:              #bdbdbd,
    neutral-4:              #dcdcdc,
    neutral-5:              #dfdfdf,
    neutral-6:              #eaeaea,
    neutral-7:              #f1f1f1,
    neutral-8:              #f6f6f6,

    // Neutral palette (warm)
    neutral-1-warm:         #333333,
    neutral-2-warm:         #767676,
    neutral-3-warm:         #bdbdbd,
    neutral-4-warm:         #dcdcdc,
    neutral-5-warm:         #e3e3db,
    neutral-6-warm:         #edede7,
    neutral-7-warm:         #f4f4ee,
    neutral-8-warm:         #f6f6f6,

    // Tones
    tone-news-1:            #005689,
    tone-news-2:            #4bc6df,

    tone-features-1:        #951c55,
    tone-features-2:        #f66980,
    tone-features-3:        #B82266,
    tone-features-4:        #7d0068,

    tone-comment-1:         #e6711b,
    tone-comment-2:         #ffbb00,
    tone-comment-3:         #ffcf4c,

    tone-media-1:           #333333,
    tone-media-2:           #484848,
    tone-media-3:           #ffbb00,

    tone-live-1:            #b51800,
    tone-live-2:            #cc2b12,
);

Description

Default colour palette

Type

Map

Used by

functions

guss-colour

@function guss-colour($name, $palette: $guss-colours) { 
    @return map-get($palette, $name);
 }
@function guss-colour($name, $palette: $guss-colours) { ... }

Description

Get a colour from a given colour palette.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$name

colour to get

String none
$palette

palette

Map $guss-colours

Returns

Color, Null

Requires

Used by

webfonts

mixins

guss-at-font-face

@mixin guss-at-font-face($family, $file, $base-path, $weight: 400, $style: normal, $url: $guss-webfonts-base-url) { 
    @at-root {
        @font-face {
            font-family: $family;
            src: url('#{$url + $path + $filename}.eot'); // IE9 Compat Modes
            src: url('#{$url + $path + $filename}.eot?#iefix') format('embedded-opentype'), // IE6-IE8
                 url('#{$url + $path + $filename}.woff2') format('woff2'), // Very Modern Browsers
                 url('#{$url + $path + $filename}.woff') format('woff'), // Modern Browsers
                 url('#{$url + $path + $filename}.ttf') format('truetype'), // Safari, Android, iOS
                 url('#{$url + $path + $filename}.svg##{$filename}') format('svg'); // Legacy iOS
            font-weight: $weight;
            font-style: unquote($style);
            font-stretch: normal;
        }
    }
 }
@mixin guss-at-font-face($family, $file, $base-path, $weight: 400, $style: normal, $url: $guss-webfonts-base-url) { ... }

Description

Output a @font-face declaration at root level.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$family

List to search in

String none
$file

The filename

String none
$base-path

Directory where the font is stored

String none
$weight

CSS font-weight

Number 400
$style

CSS font-style

String normal
$url

URL

String $guss-webfonts-base-url

Requires

Used by

guss-webfonts-single-declaration

@mixin guss-webfonts-single-declaration($font-family, $properties, $overrides) { 
    $font: map-get($guss-webfonts, $font-family);
    $font-weight-override: map-get($overrides, weight);
    $font-style-override: map-get($overrides, style);

    $font-filename: compose-webfont-filename($font-family, map-get($properties, weight), map-get($properties, style));
    $full-path: compose-webfont-path($font-family);
    $font-weight: guss-font-weight(if($font-weight-override, $font-weight-override, map-get($properties, weight)));
    $font-style: if($font-style-override, $font-style-override, map-get($properties, style));

    @include guss-at-font-face(
        $family: $font-family,
        $filename: $font-filename,
        $path: $full-path,
        $weight: $font-weight,
        $style: $font-style
    );
 }
@mixin guss-webfonts-single-declaration($font-family, $properties, $overrides) { ... }

Description

Output the @font-face declaration for a Guss webfont.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$font-family

ID of the font in $guss-webfonts

Number none
$properties

weight (member of $guss-font-weights), style (normal | italic)

Map none
$overrides

weight (member of $guss-font-weights), style (normal | italic)

Map none

Requires

Used by

guss-webfonts

@mixin guss-webfonts($fonts: $guss-webfonts, $registry: $guss-webfonts) { 
    @if type-of($fonts) == 'string' {
        @each $properties in map-get($registry, $fonts) {
            @include guss-webfonts-single-declaration($fonts, $properties);
        }
    } @else {
        @if type-of($fonts) == 'list' {
            @each $font in $fonts {
                @include guss-webfonts($font);
            }
        } @else {
            @each $font-family, $font-property-sets in $fonts {
                @each $properties in $font-property-sets {
                    @if map-has-key($properties, use-as) {
                        @include guss-webfonts-single-declaration($font-family, $properties, map-get($properties, use-as));
                    } @else {
                        @include guss-webfonts-single-declaration($font-family, $properties);
                    }
                }
            }
        }
    }
 }
@mixin guss-webfonts($fonts: $guss-webfonts, $registry: $guss-webfonts) { ... }

Description

Output the @font-face declaration for Guss webfonts.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$fonts

Fonts to output

String, List, Map $guss-webfonts
$registry

Font registry

Map $guss-webfonts

Requires

Used by

variables

guss-webfonts-charset

$guss-webfonts-charset: 'original' !default;

Description

Charset

  • ascii: 256 characters only, very small
  • latin1: latin 1 character set
  • original: full character set

Type

String

Used by

guss-webfonts-hinting

$guss-webfonts-hinting: 'on' !default;

Description

Hinting

  • on: larger file, better rendering in Windows
  • off: smaller files, render well on HiDPI displays

    @type String

Used by

guss-webfonts-kerning

$guss-webfonts-kerning: 'on' !default;

Description

Kerning

  • on: larger file, better rendering
  • off: smaller files

    @type String

Used by

guss-webfonts-base-url

$guss-webfonts-base-url: './' !default;

Description

Base URL URL can be an absolute HTTP (//pasteup.guim.co.uk/fonts/) or relative (../)

Type

String

Used by

guss-webfonts-path

$guss-webfonts-path: 'webfonts/hinting-#{$guss-webfonts-hinting}_kerning-#{$guss-webfonts-kerning}/#{$guss-webfonts-charset}/' !default;

Description

Complete path

Type

String

Requires

Used by

guss-font-weights

$guss-font-weights: (
    'thin':       100,
    'light':      200,
    'book':       300,
    'regular':    400,
    'medium':     500,
    'semibold':   600,
    'bold':       700,
    'black':      800,
    'ultrablack': 900
) !default;

Description

Human-readable Font-weights

Type

Map

Used by

guss-extras-directory

$guss-extras-directory: 'GuardianExtrasWeb' !default;

Description

Extra fonts directory

Type

String

Used by

guss-webfonts-extras

$guss-webfonts-extras: 'Guardian Compact Web',
                       'Guardian Titlepiece Web',
                       'Guardian Weekend Cond Web' !default;

Description

Extra fonts list

Type

List

Used by

guss-webfonts

$guss-webfonts: (
    'Guardian Agate Sans 1 Web': (
        (weight: 'regular', style: 'normal'),
        (weight: 'regular', style: 'italic'),
        (weight: 'bold',    style: 'normal'),
        (weight: 'bold',    style: 'italic'),
    ),
    'Guardian Egyptian Web': (
        (weight: 'light',    style: 'normal'),
        (weight: 'regular',  style: 'normal'),
        (weight: 'regular',  style: 'italic'),
        (weight: 'semibold', style: 'normal'),
        (weight: 'semibold', style: 'italic'),
        (weight: 'medium',   style: 'normal'),
        (weight: 'bold',     style: 'normal'),
        (weight: 'bold',     style: 'italic'),
    ),
    'Guardian Sans Web': (
        (weight: 'light',    style: 'normal'),
        (weight: 'regular',  style: 'normal'),
        (weight: 'semibold', style: 'normal'),
    ),
    'Guardian Text Egyptian Web': (
        (weight: 'regular',  style: 'normal'),
        (weight: 'regular',  style: 'italic'),
        (weight: 'medium',   style: 'normal'),
        (weight: 'medium',   style: 'italic'),
        (weight: 'bold',     style: 'normal'),
        (weight: 'bold',     style: 'italic'),
        (weight: 'black',    style: 'normal'),
        (weight: 'black',    style: 'italic'),
    ),
    'Guardian Text Sans Web': (
        (weight: 'regular',  style: 'normal'),
        (weight: 'regular',  style: 'italic'),
        (weight: 'medium',   style: 'normal'),
        (weight: 'medium',   style: 'italic'),
        (weight: 'bold',     style: 'normal'),
        (weight: 'bold',     style: 'italic'),
        (weight: 'black',    style: 'normal'),
        (weight: 'black',    style: 'italic'),
    ),
    'Guardian Compact Web': (
        (weight: 'black',    style: 'normal'),
    ),
    'Guardian Titlepiece Web': (
        (weight: 'regular', style: 'normal'),
    ),
    'Guardian Weekend Cond Web': (
        (weight: 'black', style: 'normal'),
    )
) !default;

Description

Font registry

Type

Map

Used by

functions

guss-font-weight

@function guss-font-weight($keyword) { 
    @return map-get($guss-font-weights, $keyword);
 }
@function guss-font-weight($keyword) { ... }

Description

Machine-readable CSS font-weight.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$keyword

Human-readable keyword in $guss-font-weights

String none

Returns

CSS font-weight

Number

Example

font-weight: guss-font-weight(light);

Requires

Used by

is-extra

@function is-extra($font-family) { 
    @return contain($guss-webfonts-extras, $font-family);
 }
@function is-extra($font-family) { ... }

Description

Is this font stored in $guss-extras-directory?

Parameters

parameter Name parameter Description parameter Type parameter Default value
$font-family

Font to look for

String none

Returns

Bool

Requires

str-replace

@function str-replace($string, $search, $replace: '') { 
    $index: str-index($string, $search);

    @while $index {
        $string: str-slice($string, 1, $index - 1) + $replace + str-slice($string, $index + 1);
        $index: str-index($string, $search);
    }

    @return $string;
 }
@function str-replace($string, $search, $replace: '') { ... }

Description

Replace $search by $replace in $string.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$string

string to update

String none
$search

value to replace

String none
$replace

new value

String ''

Returns

String

Used by

Author

  • Hugo Giraudel

str-remove-white-space

@function str-remove-white-space($string) { 
    @return str-replace($string, ' ', '');
 }
@function str-remove-white-space($string) { ... }

Description

Remove white space in $string

Parameters

parameter Name parameter Description parameter Type parameter Default value
$string

string to update

String none

Returns

String

Requires

Used by

str-capitalise

@function str-capitalise($string) { 
    $string: $string + unquote(''); // Make sure $string has a type of String
    $first-letter: to-upper-case(str-slice($string, 0, 1));
    $rest-of-string: str-slice($string, 2);

    @return $first-letter + $rest-of-string;
 }
@function str-capitalise($string) { ... }

Description

Capitalise first letter of $string

Parameters

parameter Name parameter Description parameter Type parameter Default value
$string

string to update

String none

Returns

String

Used by

compose-webfont-filename

@function compose-webfont-filename($font-family, $weight, $style) { 
    $style: if($style == normal, '', str-capitalise($style));
    $weight: str-capitalise($weight);
    $font: str-remove-white-space($font-family);

    $filename: $font + '-' + $weight + $style;

    @return $filename;
 }
@function compose-webfont-filename($font-family, $weight, $style) { ... }

Description

Compose webfont filename

Parameters

parameter Name parameter Description parameter Type parameter Default value
$font-family

font family

String none
$weight

weight, member of $guss-font-weights

String none
$style

normal | italic

String none

Returns

String

Example

src: url('#{compose-webfont-filename('Guardian Text Sans Web', bold, italic)}.woff');
-> src: url("GuardianTextSansWeb-BoldItalic.eot");

Requires

Used by

compose-webfont-path

@function compose-webfont-path($font-family) { 
    $directory: if(is-extra($font-family), $guss-extras-directory, str-remove-white-space($font-family));
    $path: $guss-webfonts-path + $directory + '/';

    @return $path;
 }
@function compose-webfont-path($font-family) { ... }

Description

Compose webfont path "My Font" is in the MyFont/ directory "Extra" fonts are stored in $guss-extras-directory.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$font-family

font name

String none

Returns

Path to the font

String

Requires

Used by

contain

@function contain($haystack, $needle) { 
    @return not not index($haystack, $needle);
 }
@function contain($haystack, $needle) { ... }

Description

Look for $needle in $haystack.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$haystack

List to search in

List none
$needle

The string to look for

String none

Returns

Bool