If it’s not documented, it doesn’t exist. Documentation should become the default – an integrated part of the development process. — Miriam Suzanne
Install via npm or yarn.
yarn add @whitesmith/qnorr-stylesat your {main,index,app}.scss
@import "path/to/node_modules/@whitesmith/qnorr-styles/scss/qnorr";
// or if your using a bundler with alias for node_modules (webpack / parcel)
@import "~@whitesmith/qnorr-styles/scss/qnorr";
// if your using node_sass and defined a custom importer or includePaths
@import "@whitesmith/qnorr-styles/scss/qnorr";at your entry file index.js
import "@whitesmith/qnorr-styles"; // this will import qnorr.css from dist/qnorr.cssWant a custom flavour? Go the sassy way.
_"~" is an alias path to `node_modules` and can be different in your system_
////
/// CONFIGURATION
////
// at your {main, index, app}.scss file all your config variables overrides;
$qnorr-grid-columns-number: 10;
// import settings to be overriden by the configuration above;
@import "~@whitesmith/qnorr-styles/scss/settings";
/////
/// TOOLING
///
/// [1] - in perfect world this would also import qnorr-styles required dependencies
/// (mappy-breakpoints), but we're not in a perfect world so check issue#10
/// for why we decide to not include it by default for now
///
/// [2] - You can also import individual function and mixins, but then you have
/// check their dependencies on documentation, since there's no output code
/// it makes little sence to do it. It's possible. But not practical.
////
@import "~mappy-breakpoints/_mappy-breakpoints"; // [1] required
@import "~@whitesmith/qnorr-styles/scss/tools"; // [2] all functions and mixins
////
/// OOCSS MODULES
///
/// ready to use OOCSS elements, generated with your config
/// [3] - Similar [1], not influenced by any configuration
////
@import "~normalize.css/normalize.css"; // [3]
@import "~@whitesmith/qnorr-styles/scss/global/_g.resets";
@import "~@whitesmith/qnorr-styles/scss/objects/_o.media";
@import "~@whitesmith/qnorr-styles/scss/objects/_o.grid";
@import "~@whitesmith/qnorr-styles/scss/objects/_o.skeleton";
@import "~@whitesmith/qnorr-styles/scss/utilities/_u.spacers";
@import "~@whitesmith/qnorr-styles/scss/utilities/_u.widths";
@import "~@whitesmith/qnorr-styles/scss/utilities/_u.text";qnorr ships with two dependencies by default:
- mappy-breakpoints (required) to handle our media query needs
- normalize.css (optional) to reset browser styles (optional import if you're using scss verison)
Note: read more about sass module dependency import issues here;
- We use [email protected]^ to build the framework.
- We use sassdoc to build and generate documentation
/docsfolder. Head to the site to learn how to use it, or just check any source file for an example, you'll get it super fast. A pretty custom theme is possible but let's leave it for version 2. - We use parcel and posthtml plugins to build a basic site located under
/sitefolder so you can play around with the framework.
# watch mode for qnorr will also start a server for documentation
yarn run start
# optimized output for publishing
yarn run qnorr:build
yarn run playground:dev
We do have unit tests for sass 🤓functions and mixins (thanks @tomasmcm). If you add any, pleas write your tests!Also thanks to @oddbird's true and jest for the tools to make it happen.
yarn run test
MIT — made with 💚 by Whitesmith.