# govuk-elements-sass

> GOVUK elements Sass files

Latest version **3.1.3** (published 2018-07-05) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install govuk-elements-sass
pnpm add govuk-elements-sass
yarn add govuk-elements-sass
bun add govuk-elements-sass
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.1.3 |
| Published | 2018-07-05 |
| First published | 2016-01-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6.0 |
| Dependencies | 1 |
| Unpacked size | 50.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 227 |
| Author | GOV.UK Design System Team |
| Maintainers | alphagov, govuk-patterns-and-tools |

## Links

- npm: https://www.npmjs.com/package/govuk-elements-sass
- Repository: https://github.com/alphagov/govuk_elements
- Homepage: https://github.com/alphagov/govuk_elements#readme
- Issues: https://github.com/alphagov/govuk_elements/issues
- npm.io page: https://npm.io/package/govuk-elements-sass

## Dependencies (1)

- [govuk_frontend_toolkit](https://npm.io/package/govuk_frontend_toolkit.md) ^7.1.0

## Recent versions

- 3.1.3 (latest) — 2018-07-05
- 3.1.2 — 2017-10-04
- 3.1.1 — 2017-07-14
- 3.1.0 — 2017-06-16
- 3.0.3 — 2017-05-18
- 3.0.2 — 2017-03-30
- 3.0.1 — 2017-03-20
- 3.0.0 — 2017-03-16
- 2.2.1 — 2016-11-30
- 2.2.0 — 2016-11-18
- 2.1.2 — 2016-11-17
- 2.1.0 — 2016-10-25
- 2.0.0 — 2016-08-25
- 1.2.2 — 2016-08-05
- 1.2.1 — 2016-06-06
- … 5 more at https://npm.io/package/govuk-elements-sass/versions

## README

# GOV.UK Elements Sass

## Installation

    npm install govuk-elements-sass

## Usage

**Include all Sass files**

    @import govuk-elements;


**Include individual Sass files**

Choose partials from:

    /public/sass/elements/.


## Dependencies

GOV.UK elements has the [GOV.UK frontend toolkit](https://github.com/alphagov/govuk_frontend_toolkit) as a dependency.

    npm install govuk_frontend_toolkit

> The GOV.UK frontend toolkit scss dependencies listed below must be imported before any govuk-elements partials.

    // Settings (variables)
    @import "colours";                                // Colour variables
    @import "font_stack";                             // Font family variables
    @import "measurements";                           // Widths and gutter variables

    // Mixins
    @import "conditionals";                           // Media query mixin
    @import "device-pixels";                          // Retina image mixin
    @import "grid_layout";                            // Basic grid layout mixin
    @import "typography";                             // Core bold and heading mixins
    @import "shims";                                  // Inline block mixin, clearfix placeholder

    // Mixins to generate components (chunks of UI)
    @import "design-patterns/alpha-beta";             // Only required if using _phase-banner.scss
    @import "design-patterns/buttons";                // Only required if using _buttons.scss

    // Functions
    // @import "url-helpers";                         // Function to output image-url, or prefixed path (Rails and Compass only)


It assumes your project is using [GOV.UK template](https://github.com/alphagov/govuk_template).


## Configuration


**Set a path for your image assets**

The `_url-helpers.scss` partial requires that `$path` is defined in your main application stylesheet.

     $path: "/public/images/";


**Ensure base styles are set**

If you are not using [GOV.UK template](https://github.com/alphagov/govuk_template).

Uncomment the base partial in `_govuk_elements.scss`:

    // @import "elements/govuk-template-base";          // HTML elements, set by the GOV.UK template


## Compiling the Sass files

Add the `node_modules/govuk_frontend_toolkit` and `node_modules/govuk-elements-sass` directories to the `includePaths` property of your Sass plugin - if you're using a task runner like Gulp or Grunt, to reference the location of these files.

**Folder structure**

    - index.html
    -- node_modules
        -- govuk-elements-sass
        -- govuk_frontend_toolkit
    -- assets
        -- scss
            - main.scss
        -- css
            - main.css

**Using [Gulp](http://gulpjs.com/)**

    const gulp = require('gulp')
    const sass = require('gulp-sass')

    // Compile scss files to css
    gulp.task('styles', () => {
      return gulp.src('./sass/**/*.scss')
        .pipe(sass({
          includePaths: [
            'node_modules/govuk_frontend_toolkit/stylesheets', // 1
            'node_modules/govuk-elements-sass/public/sass'     // 2
          ]
        }).on('error', sass.logError))
        .pipe(gulp.dest('./css'))
    })

In the example above `includePaths` uses two paths to resolve the scss @import statements.

1. The location of the directory containing the govuk_frontend_toolkit sass files.
2. The location of the directory containing the govuk-elements-sass files.

**Using [Grunt](https://gruntjs.com/)**

    grunt.loadNpmTasks('grunt-contrib-sass')

    grunt.initConfig({
      sass: {
        dist: {
          options: {
            includePaths: [
              'node_modules/govuk_frontend_toolkit/stylesheets', // 1
              'node_modules/govuk-elements-sass/public/sass'     // 2
            ],
          },
          files: {
            'main.css': 'main.scss'
          }
        }
      }
    })

In the example above `includePaths` uses two paths to resolve the scss @import statements.

1. The location of the directory containing the govuk_frontend_toolkit sass files.
2. The location of the directory containing the govuk-elements-sass files.

## Contributing

You can find contribution guidelines in [CONTRIBUTING.md](https://github.com/alphagov/govuk_elements/blob/master/CONTRIBUTING.md)

---
_Source: https://npm.io/package/govuk-elements-sass · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._