Skip to content

Latest commit

 

History

History
114 lines (80 loc) · 2.77 KB

README.md

File metadata and controls

114 lines (80 loc) · 2.77 KB
Raw

SCSS

Digital Marketplace uses the SCSS of Sass.

Support for older versions of Internet Explorer

Support for older versions of Internet Explorer is made possible by the use of the mixins in _conditionals.scss.

@include ie(8) {
  /* Block of IE8-specific SCSS */
}

Required set up

This works by using the sass-ie method which generates a separate stylesheet for each version of Internet Explorer that you need to target. Currently IE8 is the only version of Internet Explorer that we both support and requires targeting.

An example of this can be seen on the forms/summary.html page. In gh-pages/data/forms/summary.yml you can see that forms/index.css has a variant for IE8. The links to the stylesheets are wrapped in conditional comments to ensure that:

  • each version of Internet Explorer only gets its variant
  • other browsers don't request the Internet-Explorer-specific stylesheets

The SCSS file for IE8 just includes forms/index.scss while setting a few variables. The mixins from _conditionals.scss use these variables to determine whether or not to insert the block of browser-specific CSS.

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

@import "index.scss";

Styleguide

Naming

The naming of classes and ids normally follows one of these patterns:

Thing

For example .question.

Thing + type

Thing Type
.button save

For example .button-save.

Usage

All types should be built using @extend to extend a placeholder tied to the block for the base 'Thing'. This block appears in the final CSS but with a selector built from those of all types.

For example:

%summary-item-field {
  white-space: nowrap;
  vertical-align: middle;
  text-align: left;
}

.summary-item-field-name {
  @extend %summary-item-field;
  width: 50%;
  padding-right: 25px;
}

In cases where the placeholder block is used in more than one file it should be kept in the shared_placeholders folder.

Thing + what marks it out as a variation

Thing Type
.page-heading no-breadcrumb

For example .page-heading-no-breadcrumb.

Usage

Variations should use @extend to extend the base class (which will appear as a class in the final CSS).

.question,
%question {
  margin: 15px 0 0 0;
  clear: both;
}

.question-first {
  @extend %question;
  margin-top: 0;
}

Parent + thing

Thing Type
.question heading

For example .question-heading.