- What is Shell?
- Docs and tests
- Browser support
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 CONTRIBUTING.md.
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 👍.
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:
;/* ============================================================================MASTER STYLESHEET========================================================================= *//*** CONTENTS:** 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========================================================================= */;/* 2. Shell CSS library========================================================================= *//*** N.B. do not change the order of these partial imports!*/;;;;;;;/* 3. Your styles========================================================================= */// Away you go!
Shell won't work without
_mixins-functions.scss, the rest are optional.
project root ├── css │ ├── components │ ├── vendor │ ├── _settings.scss │ └── style.scss └── node_modules ├── shell-csslib
We advise setting up Autoprefixer as part of your build process.
Docs and tests
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:
This will lint all of the
.scss files in:
- 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.
See the CHANGELOG.
Copyright 2016 Campaign Monitor.