# Henri's ## Your Sass Toolbelt Easily use sass with a toolbelt full of functionality. This is a beta version of Henri's 1.0. The current stable version of Henri's can be found on [Henri's on Matise](https://github.com/matiseams/henris). ``` npm install @henris/next ``` **More information:** See [Henri's Documentation](https://henris.style). ## Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. ### Installing Installation is simple, just npm install the package and go! **NPM** Install the package using npm ``` npm install @henris/next ``` or ``` yarn add @henris/next ``` **Import in project** Import the file into you main scss file. The base doesn't have any output. So you can @import 'henris'; anywhere without any output. ``` @import '@henris/next'; ``` If you want to have the default output from Henri's. ``` @import '~@henris/custom'; $output: set-output(css, true); // You can add more $output settings here. @import '~@henris/next'; ``` ## Running the tests Tests will check the main functionalities of the package. Install the package locally and run ``` npm run test ``` ### And coding style tests All code is beautyfied using [Prettier](https://www.prettier.io) and [stylelint](https://stylelint.io) with [stylelint-logical-order](https://github.com/silvandiepen/stylelint-logical-order) ## Deployment Add additional notes about how to deploy this on a live system ## Browser Support Henri's could use autoprefixer to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, Henri's is compatible with recent versions of: * Safari * Chrome * Firefox * Opera * Edge * Internet Explorer (10+) is only partially supported. ## Built With * [Node-sass](https://sass-lang.com/) - Sass language compiler * [Postcss](https://postcss.org/) - Autoprefixer and other functions * [Ssst](http://github.com/silvandieepn/ssst/) - Sass testing * [Vuepress](https://vuepress.vuejs.org) - For the docs ## Versioning We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags). ## Authors **Sil van Diepen** ## License This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details. ## Modules ### Style #### Color [![Node version](https://img.shields.io/github/issues-raw/henris-style/color.svg?style=-square)](https://github.com/henris-style/color/issues) [![Node version](https://img.shields.io/npm/l/@henris/color.svg?style=-square)](https://github.com/henris-style/color/blob/master/LICENSE.MD) [![Node version](https://img.shields.io/david/henris-style/color.svg?style=-square)](https://github.com/henris-style/color) [![Node version](https://img.shields.io/npm/v/@henris/color.svg?style=-square)](https://www.npmjs.com/package/@henris/color) #### Grid [![Node version](https://img.shields.io/github/issues-raw/henris-style/grid.svg?style=-square)](https://github.com/henris-style/grid/issues) [![Node version](https://img.shields.io/npm/l/@henris/grid.svg?style=-square)](https://github.com/henris-style/grid/blob/master/LICENSE.MD) [![Node version](https://img.shields.io/david/henris-style/grid.svg?style=-square)](https://github.com/henris-style/grid) [![Node version](https://img.shields.io/npm/v/@henris/grid.svg?style=-square)](https://www.npmjs.com/package/@henris/grid) #### Typography [![Node version](https://img.shields.io/github/issues-raw/henris-style/typography.svg?style=-square)](https://github.com/henris-style/typography/issues) [![Node version](https://img.shields.io/npm/l/@henris/typography.svg?style=-square)](https://github.com/henris-style/typography/blob/master/LICENSE.MD) [![Node version](https://img.shields.io/david/henris-style/typography.svg?style=-square)](https://github.com/henris-style/typography) [![Node version](https://img.shields.io/npm/v/@henris/typography.svg?style=-square)](https://www.npmjs.com/package/@henris/typography) #### Reset [![Node version](https://img.shields.io/github/issues-raw/henris-style/reset.svg?style=-square)](https://github.com/henris-style/reset/issues) [![Node version](https://img.shields.io/npm/l/@henris/reset.svg?style=-square)](https://github.com/henris-style/reset/blob/master/LICENSE.MD) [![Node version](https://img.shields.io/david/henris-style/reset.svg?style=-square)](https://github.com/henris-style/reset) [![Node version](https://img.shields.io/npm/v/@henris/reset.svg?style=-square)](https://www.npmjs.com/package/@henris/reset) #### Ease Gradient [![Node version](https://img.shields.io/github/issues-raw/henris-style/ease-gradient.svg?style=-square)](https://github.com/henris-style/ease-gradient/issues) [![Node version](https://img.shields.io/npm/l/@henris/ease-gradient.svg?style=-square)](https://github.com/henris-style/ease-gradient/blob/master/LICENSE.MD) [![Node version](https://img.shields.io/david/henris-style/ease-gradient.svg?style=-square)](https://github.com/henris-style/ease-gradient) [![Node version](https://img.shields.io/npm/v/@henris/ease-gradient.svg?style=-square)](https://www.npmjs.com/package/@henris/ease-gradient) ### Logic #### Default [![Node version](https://img.shields.io/github/issues-raw/henris-style/default.svg?style=-square)](https://github.com/henris-style/default/issues) [![Node version](https://img.shields.io/npm/l/@henris/default.svg?style=-square)](https://github.com/henris-style/default/blob/master/LICENSE.MD) [![Node version](https://img.shields.io/david/henris-style/default.svg?style=-square)](https://github.com/henris-style/default) [![Node version](https://img.shields.io/npm/v/@henris/default.svg?style=-square)](https://www.npmjs.com/package/@henris/default) #### Custom [![Node version](https://img.shields.io/github/issues-raw/henris-style/custom.svg?style=-square)](https://github.com/henris-style/custom/issues) [![Node version](https://img.shields.io/npm/l/@henris/custom.svg?style=-square)](https://github.com/henris-style/custom/blob/master/LICENSE.MD) [![Node version](https://img.shields.io/david/henris-style/custom.svg?style=-square)](https://github.com/henris-style/custom) [![Node version](https://img.shields.io/npm/v/@henris/custom.svg?style=-square)](https://www.npmjs.com/package/@henris/custom) #### Output [![Node version](https://img.shields.io/github/issues-raw/henris-style/output.svg?style=-square)](https://github.com/henris-style/output/issues) [![Node version](https://img.shields.io/npm/l/@henris/output.svg?style=-square)](https://github.com/henris-style/output/blob/master/LICENSE.MD) [![Node version](https://img.shields.io/david/henris-style/output.svg?style=-square)](https://github.com/henris-style/output) [![Node version](https://img.shields.io/npm/v/@henris/output.svg?style=-square)](https://www.npmjs.com/package/@henris/output) #### Utils [![Node version](https://img.shields.io/github/issues-raw/henris-style/utils.svg?style=-square)](https://github.com/henris-style/utils/issues) [![Node version](https://img.shields.io/npm/l/@henris/utils.svg?style=-square)](https://github.com/henris-style/utils/blob/master/LICENSE.MD) [![Node version](https://img.shields.io/david/henris-style/utils.svg?style=-square)](https://github.com/henris-style/utils) [![Node version](https://img.shields.io/npm/v/@henris/utils.svg?style=-square)](https://www.npmjs.com/package/@henris/utils) #### Math [![Node version](https://img.shields.io/github/issues-raw/henris-style/math.svg?style=-square)](https://github.com/henris-style/math/issues) [![Node version](https://img.shields.io/npm/l/@henris/math.svg?style=-square)](https://github.com/henris-style/math/blob/master/LICENSE.MD) [![Node version](https://img.shields.io/david/henris-style/math.svg?style=-square)](https://github.com/henris-style/math) [![Node version](https://img.shields.io/npm/v/@henris/math.svg?style=-square)](https://www.npmjs.com/package/@henris/math) ### Script #### Build [![Node version](https://img.shields.io/github/issues-raw/henris-style/build.svg?style=-square)](https://github.com/henris-style/build/issues) [![Node version](https://img.shields.io/npm/l/@henris/build.svg?style=-square)](https://github.com/henris-style/build/blob/master/LICENSE.MD) [![Node version](https://img.shields.io/david/henris-style/build.svg?style=-square)](https://github.com/henris-style/build) [![Node version](https://img.shields.io/npm/v/@henris/build.svg?style=-square)](https://www.npmjs.com/package/@henris/build)