Web Development.md

Web Development guidance for the Integration Hub

CSS

When copying CSS rules from the prototype bear in mind that what you see in the browser is the output of the prototype's CSS preprocessor, not the original source code written by the prototype's developers. As such the in-browser CSS may not exemplify best practices, and it may be possible to write the rules in a more maintainable way when including them in the application.scss file.

Some guidelines when adding new CSS rules:

Class names

Prefix all class names with hip- and use BEM naming conventions.

For example, rather than

<div class="apiFilterActive"> 

use

<div class="hip-api-filter--active"> 

Scoping

SCSS allows you to nest rules within other rules. We should take advantage of this in order to improve the specificity of selectors and group related rules together within the application.scss file.

Example:

.hip-stat-container {
    display: flex;

    .hip-stat-item {
        background-color: $off-white;

        .hip-stat-title {
            @include govuk-font($size: 14);
        }

        .hip-stat-number {
            @include govuk-font($size: 24, $weight: bold);
        }
    }
}

Colours

When specifying a colour use one of the variables defined at the top of the application.scss file.

For example, rather than:

color: #003078;

use

color: $active-link-color;

To find out the hex code for a given colour see the _colours-palette.scss file or look at the design system guidance page.

Spacing

When specifying padding or margins use the govuk-spacing() function.

For example, rather than:

margin-top: 30px;

use

margin-top: govuk-spacing(6);

To find out what spacing value corresponds to a given pixel value, see the _spacing.scss file or look at the design system guidance page.

Fonts

When specifying the size, weight, line-height or typeface of text use the govuk-font() or govuk-font-size() mixins.

For example, rather than:

strong {
    font-size: 16px;
    font-weight: bold;
}

use

strong {
    @include govuk-font($size: 16, $weight: bold);
}

See the design system guidance page for more details.