npm i shell-csslib


Shell logo


What is Shell?

A powerful, lightweight, mostly unopinionated, responsive friendly CSS library that provides a solid foundation for any UI build.

Built with Β πŸ’™Β  by Campaign Monitor, which is why we say mostly unopinionated πŸ˜„.

A docs website is in the works, in the meantime Shell's code is heavily documented.

If you would like to suggest any new additions or improvements to Shell, log any issues or bugs, or just ask a question, please open a new GitHub issue and label it appropriately. If you would like to contribute see


npm install shell-csslib --save-dev

There are other install options e.g. git clone, however, it's advised to use a package manager like NPM to handle your third-party dependencies πŸ‘.


Once the shell-csslib NPM module is installed your project will look like this:

project root
└── node_modules
    β”œβ”€β”€ shell-csslib

Your master Sass stylesheetβ€”we typically call ours style.scssβ€”should be setup like this:

@charset 'UTF-8';

/* ============================================================================
   ========================================================================= */

 * 1. Your settings
 * 2. Shell CSS library
 * 3. Your styles
 * N.B. the above order of sections #1 and #2 must be maintained otherwise Sass
 * will not compile!

/* 1. Your settings incl. any Shell setting overrides
   ========================================================================= */

@import 'settings';

/* 2. Shell CSS library
   ========================================================================= */

 * N.B. do not change the order of these partial imports!

@import '~shell-csslib/src/settings';

@import '~shell-csslib/src/mixins-functions';

@import '~shell-csslib/src/normalise-reset';

@import '~shell-csslib/src/base';

@import '~shell-csslib/src/container';

@import '~shell-csslib/src/grid';

@import '~shell-csslib/src/helpers';

/* 3. Your styles
   ========================================================================= */

// Away you go!

Shell won't work without _settings.scss and _mixins-functions.scss, the rest are optional.

Example architecture

project root
β”œβ”€β”€ css
β”‚   β”œβ”€β”€ components
β”‚   β”œβ”€β”€ vendor
β”‚   β”œβ”€β”€ _settings.scss
β”‚   └── style.scss
└── node_modules
    β”œβ”€β”€ shell-csslib


  • Sass (either Ruby or LibSass, we recommend LibSass).

  • Autoprefixer.

    PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.

    We advise setting up Autoprefixer as part of your build process.

Docs and tests


Stylelint is used for linting and Shell follows these CSS conventions applied by stylelint.config.js.

Eventually linting will be setup as part of CI, see: #19.

For now, you can go to your Terminal, cd into the root of Shell, and run:

gulp lint

This will lint all of the .scss files in:

  • src/**/*.scss
  • docs/src/**/*.scss
  • test/src/**/*.scss

Browser support

  • Chrome (latest version)
  • Firefox (latest version)
  • Opera (latest version)
  • Safari (latest version)
  • Edge (latest version)
  • IE 10/11


Shell is maintained under the Semantic Versioning guidelines. We'll do our best to adhere to those guidelines and strive to maintain backwards compatibility.



Copyright 2016 Campaign Monitor.

View license.

Jump To