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