Nicsdru_origins_theme NPM

nicsdru_origins_theme

This repository contains code for a Drupal 8 theme from which NICS sites could be sub-themed from.

Quick start

Download the latest release or clone the repo: git clone https://github.com/dof-dss/nicsdru_origins_theme.git
npm install NB: you encounter issues with the image optimisation libraries if you don't have libjpeg library available on the host machine. To fix this brew install libjpeg

What's included

The theme uses NPM scripts and packages to create tooling to:

write and compile scss to css
apply appropriate prefixing for css rules
write and uglify js
detect features the user’s browser has to offer (via Modernizr)
code linting
optimise and compress images for the web

Within the download you'll find the following directories and files, logically grouping common assets, you'll see something like this:

nicsdru_origins_theme/
└── config/
│   ├── install/
│   ├── .sass-lint.yml
│   ├── modernizr-config.json
│   ├── postcss.config.js
└── css/
└── images/
└── js/
└── src/
│   ├── images/
│   ├── js/
│   ├── scss/
│   ├── styleguide/
└── templates/
│   ├── block/
│   ├── content/
│   ├── field/
│   ├── layout/
│   ├── misc/
│   ├── navigation/
│   ├── user/
└── .gitignore
└── composer.json
└── imagemin.js
└── nicsdru-origins-theme.breakpoints.yml
└── nicsdru-origins-theme.info.yml
└── nicsdru-origins-theme.layouts.yml
└── nicsdru-origins-theme.libraries.yml
└── nicsdru-origins-theme.theme
└── package.json
└── README.md
└── screenshot.png

Using the NPM scripts

The package.json includes the following commands and tasks:

Task	Description
`npm run build`	`npm run build` compiles files into their build directories ready for use in a production environment. Uses Sass, Autoprefixer, Modernizr and UglifyJS.
`npm run watch`	Watches for changes to scss and js files & compiles them for development purposes.
`npm run lint`	Will run all `.scss` and `.js` files through their respective linting tools - eslint & sass-lint, note however that linting is also performed as part of the the build scripts. This is useful for finding issues being flagged by the linting rules. To only lint css or js files, prefix the lint command with the file type you which to scope the linting to eg `npm run css-lint` or `npm run js-lint`