Skip to content

Latest commit

 

History

History
626 lines (433 loc) · 20.7 KB

mixins.md

File metadata and controls

626 lines (433 loc) · 20.7 KB

Mixin-sets

Grid layout

Grid helpers to enable easy cross browser grids. The grids use absolute widths in older versions of IE or percentage based widths in modern browsers.

  • %site-width-container creates a 960px wide elastic container for you site content block
  • %grid-row container for a row of columns
  • @mixin grid-column($width, $full-width: tablet) a mixin to create grid columns of fraction width

These three grid helpers are designed to be used together and aren't guaranteed to work or behave in a predictable way if used in isolation.

There is also an %outdent-to-full-width selector which can be extended to outdent and element and cause it to take up the edge gutters and butt up to the edge of smaller screens.

Usage:

#page-container {
  @extend %site-width-container;
}
.grid-row {
  @extend %grid-row;

  .column-third {
    @include grid-column( 1/3 );
  }
  .column-two-thirds {
    @include grid-column( 2/3 );
  }
}
.hero-image {
  @extend %outdent-to-full-width;
}


<div id="page-container">
  <div class="grid-row">
    <div class="column-two-thirds">
      Main content
    </div>
    <div class="column-third">
      Sidebar
    </div>
  </div>

  <div class="hero-image">
    <img ...>
  </div>
</div>

Conditionals

Media query and IE helpers. These make producing responsive layouts and attaching IE specific styles to elements really easy.

To use the IE conditionals you will need to add extra stylesheets for each IE which look like:

// BASE STYLESHEET FOR IE 6 COMPILER

$is-ie: true;
$ie-version: 6;

@import "application.scss";

Where application.scss is the name of your base stylesheet.

media

Description

@mixin media($size: false, $max-width: false, $min-width: false)

Parameters

note: the parameters are mutually exclusive and the first one found will be used.

$size

size can be one of desktop, tablet, mobile. desktop and tablet should be used to add styles to a mobile first stylesheet. mobile should be used to add styles to a desktop first stylesheet.

It is recommended that you primarily use desktop for new stylesheets to enhance mobile first when serving to mobile devices.

$min-width $max-width

These should be set to an absolute pixel value. They will get added directly to their respective @media queries.

$ignore-for-ie

Styles that would normally be wrapped in @media queries by this mixin will be instead added to the main block if the $is-ie variable is true.

Setting $ignore-for-ie to true means those styles will not be added.

Usage
div.columns {
  border: 1px solid;

  @include media(desktop){
    width: 30%;
    float: left;
  }
  @include media($min-width: 500px){
    width: 25%;
  }
  @include media($max-width: 400px){
    width: 25%;
  }
}

ie-lte

Conditially send CSS to IE browsers less than or equal to the named version.

Description

@include ie-lte($version)

Parameters

$version

version is an integer value. Possible values are 6, 7, 8.

Usage
div.columns {
  border: 1px solid;

  @include ie-lte(7){
    border: 0;
  }
}

ie

Send CSS to a named IE version.

Description

@include ie($version)

Parameters

$version

version is an integer value. Possible values are 6, 7, 8.

Usage
div.columns {
  border: 1px solid;

  @include ie(6){
    border: 0;
  }
}

Colours

A collection of colour variables.

Departmental colours

  • $treasury
  • $cabinet-office
  • $department-for-education
  • $department-for-transport
  • $home-office
  • $department-of-health
  • $ministry-of-justice
  • $ministry-of-defence
  • $foreign-and-commonwealth-office
  • $department-for-communities-and-local-government
  • $department-for-energy-and-climate-change
  • $department-for-culture-media-and-sport
  • $department-for-environment-food-and-rural-affairs
  • $department-for-work-and-pensions
  • $department-for-business-innovation-and-skills
  • $department-for-international-development
  • $government-equalities-office
  • $attorney-generals-office
  • $scotland-office
  • $wales-office

Standard palette, colours

  • $purple
  • $purple-50
  • $purple-25
  • $mauve
  • $mauve-50
  • $mauve-25
  • $fuschia
  • $fuschia-50
  • $fuschia-25
  • $pink
  • $pink-50
  • $pink-25
  • $baby-pink
  • $baby-pink-50
  • $baby-pink-25
  • $red
  • $red-50
  • $red-25
  • $mellow-red
  • $mellow-red-50
  • $mellow-red-25
  • $orange
  • $orange-50
  • $orange-25
  • $brown
  • $brown-50
  • $brown-25
  • $yellow
  • $yellow-50
  • $yellow-25
  • $grass-green
  • $grass-green-50
  • $grass-green-25
  • $green
  • $green-50
  • $green-25
  • $turquoise
  • $turquoise-50
  • $turquoise-25
  • $light-blue
  • $light-blue-50
  • $light-blue-25

Standard palette, greys

  • $black
  • $grey-1
  • $grey-2
  • $grey-3
  • $grey-4
  • $white

Semantic colour names

  • $link-colour
  • $link-active-colour
  • $link-hover-colour
  • $link-visited-colour
  • $text-colour: $black
  • $secondary-text-colour
  • $border-colour
  • $panel-colour
  • $canvas-colour
  • $highlight-colour
  • $page-colour

Usage:

.column {
  background: $green;
}

Typography

A collection of font-mixins. There are two different types of font mixins.

  1. Heading and Copy styles which are the font with added paddings to ensure a consistent baseline vertical grid.
  2. Core styles which are base font styles with no extra padding.

Heading and Copy styles

The following heading and copy styles exist:

  • heading-80
  • heading-48
  • heading-36
  • heading-27
  • heading-24
  • copy-19
  • copy-16
  • copy-14
Usage
h2 {
  @include heading-27;
}

Core styles

The following core styles exist:

  • core-80
  • core-48
  • core-36
  • core-27
  • core-24
  • core-19
  • core-16
  • core-14
Description

@include core-[size]($line-height, $line-height-640)

Parameters

$line-height and $line-height-640 are both optional. When used it is recomended to pass a fraction in for readability.

Usage
h1 {
  @include core-48;
}
h2 {
  @include core-24($line-height: (50/24), $line-height-640: (18/16));
}

Tabular numbers

Tabular numbers have numerals of a standard fixed width. As all numbers have the same width, sets of numbers may be more easily compared. We recommend using them where different numbers are likely to be compared, or where different numbers should line up with each other, eg in tables.

$tabular-numbers is an optional variable that may be passed to the heading, copy and core styles to use (or explicitly not use) tabular numbers. When no variable is passed, the default is non-tabular.

Usage
h1 {
  @include core-48;
}
h2 {
  @include core-24($tabular-numbers: true);
}

See an example of tabular numbers in a table

external links

external-link-default sets up the background image for all external links. This should be included on the default link style for a project.

After setting the default, apply includes from the following for different font sizes:

  • external-link-12
  • external-link-12-no-hover
  • external-link-13
  • external-link-13-no-hover
  • external-link-14
  • external-link-14-bold-no-hover
  • external-link-16
  • external-link-16-bold-no-hover
  • external-link-19
  • external-link-19-no-hover

external-link-heading is a unique style a background image for headings to groups of external links.

This uses the file-url helper which will by default output an image-url to be used with Compass or Rails Asset Pipeline, if you want to use a static path then set the $path variable to point to the public location of the toolkit image assets.

Description

For a set style:

@include external-link-[style]

For a specific font size:

@include external-link-[size]-[weight]-[no-hover]

Usage

/* Default link style */
a[rel="external"] {
  @include external-link-default;
  @include external-link-19;
}

th.external-link {
  @include external-link-heading;
}

.inner a[rel="external"] {
  @include external-link-16;
}

.departments a[rel="external"] {
 @include external-link-16-bold-no-hover;
}

css3

CSS3 helpers to abstract vendor prefixes.

border-radius

Description

@mixin border-radius($radius)

Parameters

$radius a pixel value.

Usage
.column {
  @include border-radius(5px);
}

box-shadow

Description

@mixin box-shadow($shadow)

Parameters

$shadow a value set to pass into box-shadow.

Usage
.column {
  @include box-shadow(0 0 5px black);
}

translate

Description

@mixin translate($x, $y)

Parameters

$x and $y are css values.

Usage
.column {
  @include translate(2px, 3px);
}

gradient

This can currently only handle linear top to bottom gradients.

Description

@mixin gradient($from, $to)

Parameters

$from and $to are colour values.

Usage
.column {
  @include gradient(#000, #fff);
}

transition

Description

@mixin transition($property, $duration, $function, $delay:0s)

Parameters

Match up with the respective properties from transition.

Usage
.column {
  @include transition(left, 3s, ease);
}

box-sizing

Description

@mixin box-sizing($type)

Parameters

$type is one of border-box, content-box and padding-box.

Usage
.column {
  @include box-sizing(border-box);
}

calc

Description

@mixin calc($property, $calc)

Parameters

$property the property to apply the calc to. $calc the calculation to.

Usage
.column {
  @include calc(width, "300% - 20px");
}

Buttons

A mixin for creating buttons in the GOV.UK style.

Description

@mixin button($colour)

Parameters

$colour the background colour of the button (default is $green).

Usage
.button{
  @include button;
}
.button-secondary{
  @include button($grey-3);
}
.button-warning{
  @include button($red);
}
Notes

The button text colour is set by the mixin to either light or dark, depending on the button background colour.

If you're applying these styles to non form elements, adding a class of 'disabled' to the element will emulate the disabled button style.

Phase banner

A mixin to create a GOV.UK Phase banner, with alpha/beta tag inside.

Description

@mixin phase-banner($state)

$state is either alpha or beta.

$state sets the background colour of the phase tag to the appropriate alpha or beta colour.

Phase banner - Alpha
.phase-banner  {
  @include phase-banner(alpha);
}

<div class="phase-banner">
  <p>
    <strong class="phase-tag">ALPHA</strong>
    <span>This is a new service – your <a href="#">feedback</a> will help us to improve it.</span>
  </p>
</div>
Phase banner - Beta
.phase-banner  {
  @include phase-banner(beta);
}

<div class="phase-banner">
  <p>
    <strong class="phase-tag">BETA</strong>
    <span>This is a new service – your <a href="#">feedback</a> will help us to improve it.</span>
  </p>
</div>

Phase tags

A mixin to create an alpha/beta tag.

Description

@mixin phase-tag($state)

$state is either alpha or beta.

$state sets the background colour of the phase tag to the appropriate alpha or beta colour.

Phase tag - Alpha
.alpha-tag{
  @include phase-tag(alpha);
}
<h2>
  Apply using the new service <span class="alpha-tag">ALPHA</span>
</h2>
Phase tag - Beta
.beta-tag{
  @include phase-tag(beta);
}
<h2>
  Apply using the new service <span class="beta-tag">BETA</span>
</h2>