Guss (Guardian Style Sheets) is a collection of universal components re-usable across Guardian web products.
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
-
guss-column-min-width -
guss-column-gap -
guss-columns-fallback-width -
guss-columns-fallback-columns -
browser-supports-columns -
width-of-fallback-column-item -
rem
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
- Make type rendering look crisper
- Set baseline font size to 10px
- Fixes an IE11 bug where rouding with % would create scaling issues
See http://bit.ly/1g4X0bX — thanks @7studio and @dawitti - Set default text size back to 16px (at default zoom level)
- 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 |
Map | — none |
$overrides |
weight (member of |
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
NumberExample
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
StringRequires
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