Grid system

Argos Style includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

Look to the examples for applying these principles to your code.

Media queries

We use the following media queries in our Less files to create the key breakpoints in our grid system.


  /* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Containers

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.


<div class="container">
  ...
</div>

Use .container-fluid for a full width container, spanning the entire width of your viewport.


<div class="container-fluid">
  ...
</div>

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 970px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~81px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
  

Example: Fluid container

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.


  <div class="container-fluid">
    <div class="row">
      ...
    </div>
  </div>><

Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-6">.col-xs-6</div>
  </div>

Example: Mobile, tablet, desktop

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  </div>

Typography

Fonts

Font example Font class Font SASS mixins
Argos Ultra Light .font-argos-normal-light argos-normal-ultra-light($text-transform)
Argos Normal .font-argos-normal argos-normal-normal($text-transform)
Argos Bold .font-argos-normal-bold argos-normal-bold($text-transform)
Argos Extra Bold .font-argos-normal-extra-bold argos-normal-extra-bold($text-transform)
Argos Condensed Book .font-argos-condensed-book argos-condensed-book($text-transform)
Argos Compressed Bold .font-argos-compressed-bold argos-compressed-bold($text-transform)
Argos Condensed Extra Bold .font-argos-condensed-extra-bold argos-condensed-extra-bold($text-transform)

Global headings & body text

Elements Heading Tags Fonts Size Classes
<h1> -

Heading

Argos Condensed Book 30px .h1
<h2> -

Heading

Argos Condensed Book 24px .h2
<h3> -

Heading

Argos Condensed Book 20px .h3
<h3> -

Heading alt

Argos Condensed Book 20px h3.alt (class must be applied to an H3 tag)
<p> -

Subtitle

Argos Bold 15px
<p> -

Paragraph

Argos Book 15px .argosbook-body

Help page headings & body text

Elements Heading Tags Fonts Size Classes
<h1> -

Heading

Argos Condensed Book 30px <div class="help-page-body">
<h1>Header</h1>
</div>

or
h1.help (class must be applied to an H1 tag)

Product description page headings & body text

Elements Heading Tags Fonts Size Classes
<h1> -

Main product title

Argos Condensed Book 35px <div class="pdp-body">
<h1>Header</h1>
</div>

or
h1.pdp (class must be applied to an H1 tag)
<h2> -

Section headings

Argos Compressed Bold 28px <div class="pdp-body">
<h2>Header</h2>
</div>

or
h2.pdp (class must be applied to an H2 tag)
<h3> -

heading

Argos Compressed Bold 22px <div class="pdp-body">
<h3>Header</h3>
</div>

or
h3.pdp (class must be applied to an H3 tag)
Elements

<h1>h1. heading</h1>
<h2>h2. heading</h2>
<h3>h3. heading</h3>
<h4>h4. heading</h4>
<h5>h5. heading</h5>
<h6>h6. heading</h6>
Classes

<h1 class="h6">h1. heading</h1>
<h2 class="h5">h2. heading</h2>
<h3 class="h4">h3. heading</h3>
<h4 class="h3">h4. heading</h4>
<h5 class="h2">h5. heading</h5>
<h6 class="h1">h6. heading</h6>

Prices

Argos stylesheet contains various styles for prices. For each price style to work a .price class should be act as a container for the price styles. Example can be seen below.
Price Types Example Code
Default Size
(Main PDP Price)
  • £999.99
  • Save £1000.00 was £1999.99
  • 1 special offer
<ul class="prices">
    <li class="price-now">£999.99</li>
    <li class="price-align">
       <span class="price-was">was £1999.99</span>
       <span class="price-save">Save £1000.00</span>
    </li>
    <li class="price-special-offer">1 special offer</li>
</ul>
Other Scenario
  • £999.99
  • Save £1000.00
  • 1 special offer
<ul class="prices">
    <li class="price-now">£999.99</li>
    <li class="price-was">was £1999.99</li>
    <li class="price-special-offer">1 special offer</li>
</ul>

or

<ul class="prices">
    <li class="price-now">£999.99</li>
    <li class="price-save">Save £1000.00</li>
    <li class="price-special-offer">1 special offer</li>
</ul>
Product Card / Carousel
  • £999.99
  • Save £1000.00 was £1999.99
<ul class="prices price-sm">
    <li class="price-now">£999.99</li>
    <li class="price-align">
       <span class="price-was">was £1999.99</span>
       <span class="price-save">Save £1000.00</span>
    </li>
</ul>
Small prices
(Special Offers)
  • £999.99
<ul class="prices price-sm">
    <li class="price-now">£999.99</li>

Inline text elements

Elements Description Code Example
Text overflow For one liner text which overflows the container and replaces the overflow with an elipsis. .text-overflow

For example:
<p class="text-overflow"> ... </p>

Example of the overflow text classs.

Marked text For highlighting a run of text due to its relevance in another context. <mark> ... </mark> Example of highlight text.
Deleted text For indicating blocks of text that have been deleted. <del> ... </del> Example of deleted text.
Strikethrough text For indicating blocks of text that are no longer relevant. <s> ... </s> Example of strike through text
Inserted text For indicating additions to the document. <ins> ... </ins> Example of ins.
Underlined text To underline text <u> ... </u> Example of underline.
Small text For de-emphasizing inline or blocks of text. tag to set text at 85% the size of the parent. <small> ... </small> Example of small text.
Bold For emphasizing a snippet of text with a heavier font-weight. <strong> ... </strong>
or
<b> ... </b>
Example of bold text
Italics For emphasizing a snippet of text with italics. <em> ... </em>
or
<i> ... </i>
Example italicized text.
Abbreviations Provides additional context on hover and to users of assistive technologies. <abbr title="attribute"> ... </abbr> Example of Abbreviations.
Initialism Add .initialism to an abbreviation for a slightly smaller font-size. <abbr class="initialism"> ... </abbr> Example of Initialism.
Lowercased text. Add .text-lowercase for a lowercased text. <p class="text-lowercase">...</p> Example of Lowercased text.
Uppercased text. Add .text-uppercase for a uppercase text. <p class="text-uppercase">...</p> Example of Uppercased text.
Capitalized text. Add .text-capitalize for a capitalize text. <p class="text-capitalize">...</p> Example of Capitalized text.
Address <address> ... </address>
Twitter, Inc.
1355 Market Street
Phone:
(123) 456-7890
Unordered List A list of items in which the order does not explicitly matter. <ul>
  <li>...</li>
  <li>
     <ul>
       <li>...</li>
     </ul>
  </li>
</ul>
  • Example
  • Example
    • Example
    • Example
Ordered List A list of items in which the order does explicitly matter. <ol>
   <li>...</li>
</ol>
  1. Example
  2. Example
Unstyled List Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well. <ul class="list-unstyled">
   <li>...</li>
</ul>
Unordered Inline List Place all list items on a single line with display: inline-block; and some light padding. <ul class="list-inline">
   <li>...</li>
</ul>
  • Example.
  • Example.
  • Example.
Description A list of terms with their associated descriptions. <dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>
Title
Description paragraph.
Title
Description paragraph.
Title
Description paragraph.
Horizontal description Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these. <dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>
Title
Description paragraph.
Title
Description paragraph.
Title
Description paragraph.

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

Code

  <p class="text-left">Left aligned text.</p>
  <p class="text-center">Center aligned text.</p>
  <p class="text-right">Right aligned text.</p>
  <p class="text-justify">Justified text.</p>
  <p class="text-nowrap">No wrap text.</p>
        

Buttons

Use the button classes on an <a>, <button>, or <input> element.

NOTE: to use button link in text elements, do not add class .btn with the optional button style. This will enable the button style to inherit the font size, font style and remove padding.

Name Example Active Disabled
Primary <button type="button" class="btn btn-primary">...</button>
Primary Fullwidth <button type="button" class="btn btn-primary btn-block">...</button>
Secondary <button type="button" class="btn btn-secondary">...</button>
Secondary Fullwidth <button type="button" class="btn btn-secondary btn-block">...</button>
Mini button <button type="button" class="btn btn-secondary btn-xs">...</button>
Link <button type="button" class="btn btn-link">...</button>
Chevron Link <button type="button" class="btn btn-link-chev">...</button>
Hero Link <button type="button" class="btn btn-link-hero">...</button>

Links acting as buttons for accessibility purposes

If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

Conveying meaning to assistive technologies

Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the .sr-only class.

Cross-browser compatibility

If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.

Forms

Text fields


      <form class="col-xs-6">
        <div class="form-group">
          <label for="exampleInput1">Default field</label>
          <div class="form-validation">
            <input type="text" class="form-control" id="exampleInput1">
          </div>
        </div>
        <div class="form-group form-inline">
          <label for="exampleInput2">Short field name</label>
          <div class="form-validation">
            <input type="text" class="form-control" id="exampleInput2">
          </div>
        </div>
        <div class="form-group">
          <label for="exampleInput2">Password field type</label>
          <div class="form-validation">
            <input type="password" class="form-control" id="exampleInput3">
          </div>
        </div>
        <div class="form-group is-disabled">
          <label for="exampleInput1">Disabled field</label>
          <div class="form-validation">
            <input type="text" class="form-control" id="exampleInput1" disabled>
          </div>
        </div>
        <div class="form-group">
          <label for="exampleInput1">Default textarea</label>
          <div class="form-validation">
            <textarea type="textarea" class="form-control" id="exampleInput1"></textarea>
          </div>
        </div>
        <div class="form-group is-disabled">
          <label for="exampleInput1">Disabled textarea</label>
          <div class="form-validation">
            <textarea type="textarea" class="form-control" id="exampleInput1" disabled></textarea>
          </div>
        </div>
      </form>

Validation

<form class="col-md-6">
      <div class="form-group has-error">
        <label for="error-validation">Error field</label>
        <label for="error-validation" class="help-block">An error message</label>
        <div class="form-validation">
          <div class="input-wrapper-feedback">
            <input type="text" class="form-control" id="error-validation">
          </div>
        </div>
      </div>
      <div class="form-group has-success">
        <label for="validation-success">Success field</label>
        <div class="form-validation">
          <div class="input-wrapper-feedback">
            <input type="text" class="form-control" id="validation-success">
          </div>
        </div>
      </div>
    </form>

Checkbox

Simple checkbox markup. Labels must be placed in parallel to the checkbox input element so the styled checkbox's status can change correctly.

Checkboxes Roles Example Code
Checkbox Without Background
<form>
  <div class="checkbox">
    <input id="checkbox-example-1" type="checkbox">
    <label for="checkbox-example-1">Checkbox 1</label>
  </div>
  <div class="checkbox">
    <input id="checkbox-example-2" type="checkbox">
    <label for="checkbox-example-2">Checkbox 2</label>
  </div>
  <div class="checkbox">
    <input id="checkbox-example-3" type="checkbox">
    <label for="checkbox-example-3">Checkbox 3</label>
  </div>
</form>
Checkbox With Background
<form>
  <div class="checkbox checkbox-inverse">
    <input id="checkbox-example-1" type="checkbox">
    <label for="checkbox-example-1">Checkbox 1</label>
  </div>
  <div class="checkbox checkbox-inverse">
    <input id="checkbox-example-2" type="checkbox">
    <label for="checkbox-example-2">Checkbox 2</label>
  </div>
  <div class="checkbox checkbox-inverse">
    <input id="checkbox-example-3" type="checkbox">
    <label for="checkbox-example-3">Checkbox 3</label>
  </div>
</form>

Radio

Simple radio markup. Labels must be placed in parallel to the radio input element so the styled radio's status can change correctly.

Radio Button Roles Example code
Radio Without Background
<form>
  <div class="radio">
    <input id="radio-example-1" name="radio-example" type="radio">
    <label for="radio-example-1">Radio 1</label>
  </div>
  <div class="radio">
    <input id="radio-example-2" name="radio-example" type="radio">
    <label for="radio-example-2">Radio 2</label>
  </div>
  <div class="radio">
    <input id="radio-example-3" name="radio-example" type="radio">
    <label for="radio-example-3">Radio 3</label>
  </div>
</form>
Radio With Background
<form>
  <div class="radio radio-inverse">
    <input id="radio-example-1" name="radio-example" type="radio">
    <label for="radio-example-1">Radio 1</label>
  </div>
  <div class="radio radio-inverse">
    <input id="radio-example-2" name="radio-example" type="radio">
    <label for="radio-example-2">Radio 2</label>
  </div>
  <div class="radio radio-inverse">
    <input id="radio-example-3" name="radio-example" type="radio">
    <label for="radio-example-3">Radio 3</label>
  </div>
</form>

Filter Radio Buttons & Checkboxes

NOTE: This is section is visual purpose only for designers. For DEVELOPERS, use the HTML markup above for Radio Buttons/Checkboxes WITHOUT background

This is a simple markup to show specifically checkboxes and radio buttons to be used in filter panel for findability team.

Radio Without Background Example
Filter Radio Buttons
Filter Checkboxes

Select

Simple select markup.

<form>
    <div class="form-group">
      <label for="select-exmaple">Select example</label>
      <div class="form-inline">
        <div class="form-validation">
          <select id="select-exmaple" class="form-control">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
        </div>
      </div>
    </div>
  </form>

Toggle

Toggle

<form>
  <div class="form-group">
    <label for="toggleExample">Toggle example</label>
    <div class="checkbox-wrapper">
      <input type="checkbox" id="toggleExample" />
      <div class="checkbox-toggle">
        <span class="indicator-container">
          <i></i>
          <span class="indicator-off"></span>
          <span class="indicator-on">
            <span class="indicator-on-inner"></span>
          </span>
        </span>
      </div>

      <span class="indicator-text" aria-hidden="true">No</span>
      <span class="indicator-text" aria-hidden="true">Yes</span>
    </div>
  </div>
</form>

Alerts

Alert Messages Preview Code
Box Error <div role="alert" class="alert alert-box-error">
    Enter a valid email address
</div>
Box Success <div role="alert" class="alert alert-box-sucess">
    Enter a valid email address
</div>
Text Success <div role="alert" class="alert alert-error">
    Enter a valid email address
</div>
Text Error <div role="alert" class="alert alert-success">
    Enter a valid email address
</div>
Alert Wrapper
<div class="well"> ... </div>

Loading Spinner

Responsive loader

To see the loader below respond, adjust the browser size.


<div class="loader-container" role="alert">
  <div class="loader-svg">
    <p class="invisible">Loading...</p>
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none"/>
    </svg>
  </div>
</div>

Loader sizes

Below are the three sizes that will be used in it's responsive form. From mobile to tablet to desktop. For developers, you can use these sizes in its static size by adding in class .containedwithin the loader-container with the ability to specify the it's static size e.g. .loader-svg-* (sm, md, lg). This turns the loader container fix position into an absolute position.

Mobile Size


<div class="loader-container contained" role="alert">
  <div class="loader-svg loader-svg-sm">
    <p class="invisible">Loading...</p>
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none"/>
    </svg>
  </div>
</div>

Tablet Size


<div class="loader-container contained" role="alert">
  <div class="loader-svg loader-svg-md">
    <p class="invisible">Loading...</p>
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none"/>
    </svg>
  </div>
</div>

Desktop Size


<div class="loader-container contained" role="alert">
  <div class="loader-svg loader-svg-lg">
    <p class="invisible">Loading...</p>
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none"/>
    </svg>
  </div>
</div>

Iconography

Available icons

To use an icon, simply put a class of argos-icon and the name of the icon listed below.

Example: <span class="argos-icon icon-UIE-Location"></span>

  • icon-CP-Clearance
  • icon-CP-Credit
  • icon-CP-Delivery
  • icon-CP-FreeMessaging
  • icon-CP-OneClickReserve
  • icon-CP-OneManDelivery
  • icon-CP-PriceCuts_1
  • icon-CP-PriceCuts_2
  • icon-CP-TwoManDelivery
  • icon-Category-BabyAndNursery
  • icon-Category-Clothing
  • icon-Category-Gift_2
  • icon-Category-HealthBeauty_2
  • icon-Category-HomeGarden_1
  • icon-Category-JewelleryWatches
  • icon-Category-SportLeisure
  • icon-Category-Technology
  • icon-Category-Toys_2
  • icon-Event-Christmas
  • icon-Event-Easter
  • icon-Event-FathersDay
  • icon-Event-MothersDay
  • icon-Event-ValentinesDay
  • icon-UIE-Account
  • icon-UIE-ApplyByTelephone
  • icon-UIE-ApplyInStore
  • icon-UIE-Browse
  • icon-UIE-Browse_2
  • icon-UIE-Browse_3
  • icon-UIE-Catalogue
  • icon-UIE-Controls-Arrow-Left
  • icon-UIE-Controls-Arrow-Right
  • icon-UIE-Controls-Chevron-Down
  • icon-UIE-Controls-Chevron-Left
  • icon-UIE-Controls-Chevron-Right
  • icon-UIE-Controls-Chevron-Up
  • icon-UIE-Controls-Cross-Thick
  • icon-UIE-Controls-Cross-Thin
  • icon-UIE-Controls-Tick-Thick
  • icon-UIE-Controls-Tick-Thin
  • icon-UIE-Controls-ZoomIn
  • icon-UIE-Controls-ZoomOut
  • icon-UIE-DeliveryInstructions
  • icon-UIE-Edit
  • icon-UIE-Email
  • icon-UIE-Information
  • icon-UIE-LeaveFeedback
  • icon-UIE-Location
  • icon-UIE-MenuHamburger_2
  • icon-UIE-More
  • icon-UIE-OpenInNewWindow
  • icon-UIE-Options
  • icon-UIE-OrderSummary_1
  • icon-UIE-Refine
  • icon-UIE-Refresh
  • icon-UIE-ReviewStarEmpty
  • icon-UIE-ReviewStarFull
  • icon-UIE-ReviewStarHalf
  • icon-UIE-SavedCards
  • icon-UIE-Search
  • icon-UIE-Secure
  • icon-UIE-Share
  • icon-UIE-ShopOnline
  • icon-UIE-SmileyFace
  • icon-UIE-Sort
  • icon-UIE-TandC
  • icon-UIE-Telephone
  • icon-UIE-TimeSlot
  • icon-UIE-Trolley
  • icon-UIE-Video
  • icon-UIE-Warning
  • icon-UIE-WishList
  • icon-UIE-WriteToUs
  • icon-UIE-YourDetails
  • icon-UIE-Shield
  • icon-UIE-Calendar
  • icon-UIE-Filter

More information...

Normalize.css

For improved cross-browser rendering, we use Normalize.css, a project by Nicolas Gallagher and Jonathan Neal.

Helper classes

Quick floats

Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.


    <div class="pull-left">...</div>
    <div class="pull-right">...</div>
  

  // Classes
  .pull-left {
    float: left !important;
  }
  .pull-right {
    float: right !important;
  }

  // Usage as mixins
  .element {
    .pull-left();
  }
  .another-element {
    .pull-right();
  }
  

Not for use in navbars

To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.

Center content blocks

Set an element to display: block and center via margin. Available as a mixin and class.


  <div class="center-block">...</div>
  
    
  // Class
  .center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  // Usage as a mixin
  .element {
    .center-block();
  }
  

Clearfix

Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.


    <!-- Usage as a class -->
    <div class="clearfix">...</div>
  
    
  // Mixin itself
  .clearfix() {
    &:before,
    &:after {
      content: " ";
      display: table;
    }
    &:after {
      clear: both;
    }
  }

  // Usage as a mixin
  .element {
    .clearfix();
  }
  

Showing and hiding content

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.


    <div class="show">...</div>
    <div class="hidden">...</div>
  
    
  // Classes
  .show {
    display: block !important;
  }
  .hidden {
    display: none !important;
  }
  .invisible {
    visibility: hidden;
  }

  // Usage as mixins
  .element {
    .show();
  }
  .another-element {
    .hidden();
  }
  

Screen reader and keyboard navigation content

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.


  <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
  
    
  // Usage as a mixin
  .skip-navigation {
    .sr-only();
    .sr-only-focusable();
  }
  

Image replacement

Utilize the .text-hide class or mixin to help replace an element's text content with a background image.


  <h1 class="text-hide">Custom heading</h1>
  
    
  // Usage as a mixin
  .heading {
    .text-hide();
  }