# @mill3-packages/system-ui-sass

> Utility CSS classes system for typography, layout, sizings, colors, effects. Built with SASS, inspired by Bootstrap and TailWindCSS.

Latest version **0.10.2** (published 2022-12-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mill3-packages/system-ui-sass
pnpm add @mill3-packages/system-ui-sass
yarn add @mill3-packages/system-ui-sass
bun add @mill3-packages/system-ui-sass
```

Provides the command `system-ui-cli`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.10.2 |
| Published | 2022-12-07 |
| First published | 2020-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Mill3 Studio |
| Maintainers | thetoine, ebhoren |

## Links

- npm: https://www.npmjs.com/package/@mill3-packages/system-ui-sass
- Repository: https://github.com/Mill3/mill3-packages
- Homepage: https://github.com/Mill3/mill3-packages/tree/master/packages/system-ui-sass
- Issues: https://github.com/Mill3/mill3-packages/issues
- npm.io page: https://npm.io/package/@mill3-packages/system-ui-sass

## Recent versions

- 0.10.2 (latest) — 2022-12-07
- 0.10.1 — 2022-12-07
- 0.10.0 — 2022-10-03
- 0.9.1-grid-containers.0 — 2022-08-18
- 0.9.1-0.9.1-grid-containers.0 — 2022-08-18
- 0.9.0 — 2022-08-04
- 0.8.1 — 2022-03-24
- 0.8.0 — 2022-03-24
- 0.7.4 — 2021-10-21
- 0.7.3 — 2021-04-28
- 0.7.2 — 2021-04-20
- 0.7.1 — 2021-03-04
- 0.7.0 — 2021-03-02
- 0.6.3 — 2021-02-15
- 0.6.2 — 2021-01-13
- … 23 more at https://npm.io/package/@mill3-packages/system-ui-sass/versions

## README

![npm](https://img.shields.io/npm/v/@mill3-packages/system-ui-sass?style=flat-square)

# Mill3-packages : system-ui-sass

Our utility CSS classes system for typography, layout, sizings, colors, effects. Built with SASS, largely inspired by Bootstrap (for mixins) and TailWindCSS for classes naming conventions and the idea around an utility-first style framework.

## Credits

- Original code structure idea by [Dominic Mercier](https://github.com/ebhoren).
- Responsive @mixins taken from [Bootstrap](https://github.com/twbs/bootstrap) functions.
- CSS resets from [Normalize.css](github.com/necolas/normalize.css)

## Package install

Install with NPM :

`npm install @mill3-packages/system-ui-sass`

Install with Yarn :

`yarn add @mill3-packages/system-ui-sass`

## Installation in your project

**Option 1** : import precompiled CSS version in your main css file.

Make sur you are using a builder like Webpack which should import directly from your `node_modules` directory.

```css
@import "@mill3-packages/system-ui-sass/dist/system-ui.css";
```

**Option 2 :** import SASS file and customize theme. Our theme is structured in JSON format than converted to SASS variables.

First, run this command for coping the theme file from `node_modules` to your project root :

```bash
./node_modules/.bin/system-ui-cli
```

This should copy a file named `theme.js`.

Add SASS file to your main style file

```css
@import "@mill3-packages/system-ui-sass/src/system-ui.scss";
```

Now you need to add in your `webpack.config.js` a special loader for injecting theme.js data converted in SASS variables.

Exemple for Webpack :

```bash
npm install --save-dev sass-json-loader
```

Add `sass-json-loader` to your loaders :

```javascript
const theme = path.resolve(`theme.js`),

rules : [
    {
      test: /\.(sa|sc|c)ss$/i,
      use: [
        `css-loader`,
        `sass-loader`,
        {
          loader: 'sass-json-loader',
          options: { path: PATHS['theme'] }
        }
      ]
    }
  ]
},
```

Now start webpack, customize theme.js file, enjoy !

## Usage

Quick start documentation is missing, refer to our StoryBook site below :

[https://mill3-system-ui-sass-demo-site.netlify.com/](https://mill3-system-ui-sass-demo-site.netlify.com/)

## Todo

- [x] Package bin script for copying `theme.js` file outside `node_modules` (WIP)
- [x] Finish basic documentation in this file
- [x] Add instructions for Webpack loaders
- [x] Line-height module
- [ ] Write quick start usage documentation in this file
- [x] Add normalizing css
- [x] Modules and variables for basic HTML text body elements: H1-H6, p, ul, ol
- [ ] Add tests and Travis config
- [-] Finish Sassdoc documentation (DEPRECATED)
- [x] Add extra colors
- [X] Finish stories
- [ ] Add .prettierrc file

---
_Source: https://npm.io/package/@mill3-packages/system-ui-sass · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._