| 1 | # lighter 🔥
|
| 2 |
|
| 3 | [](https://www.npmjs.com/package/@alamantus/lighter)
|
| 4 | [](https://cdn.jsdelivr.net/npm/@alamantus/lighter@latest/dist/lighter.css)
|
| 5 | [](https://packagephobia.now.sh/result?p=@alamantus/lighter)
|
| 6 | [](https://www.npmjs.com/package/@alamantus/lighter)
|
| 7 |
|
| 8 | a ridiculously small responsive css framework.
|
| 9 |
|
| 10 | [ajusa](https://github.com/ajusa) challenged themself to see how small they could go, but preserve everything Skeleton, Milligram, and other micro frameworks have to offer.
|
| 11 |
|
| 12 | ## Features
|
| 13 | * 12 Column Responsive Grid
|
| 14 | * Typography for h1-h6, and body text
|
| 15 | * Three types of buttons
|
| 16 | * Cards
|
| 17 | * Inputs
|
| 18 | * Table Styles
|
| 19 |
|
| 20 | and a little bit more...
|
| 21 |
|
| 22 | ## fuel
|
| 23 | fuel is an atomic css addon for lighter. Check it out at https://alamantus.github.io/lighter/docs/fuel.html, and check back occasionally for new features!
|
| 24 |
|
| 25 | ## Getting Started
|
| 26 | 1. Install lighter.css with one of the following:
|
| 27 | - NPM: `npm install --save @alamantus/lighter`
|
| 28 | - CSS3: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alamantus/lighter@1.2.0/dist/lighter.css" />`
|
| 29 | - CSSNext: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alamantus/lighter@1.2.0/src/lighter.css" />`
|
| 30 | 2. (Optional) Add fuel.css if you want more:
|
| 31 | - CSS3: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alamantus/lighter@1.2.0/dist/fuel.css" />`
|
| 32 | - CSSNext: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alamantus/lighter@1.2.0/src/fuel.css" />`
|
| 33 | 3. [Read the Docs](https://alamantus.github.io/lighter/) to see usage
|
| 34 |
|
| 35 | Note: lighter uses `node-sass` to transform from SCSS to CSS3. Each element of lighter and fuel is split into separate "modules"
|
| 36 | in `src/modules`, so you can pick and choose what elements to use if you want to customize your style with Sass by `@import`ing
|
| 37 | what you need.
|
| 38 | There is also a CSSNext version preserved and updated from the fork from [lit](https://github.com/ajusa/lit). If you are comfortable outright using CSSNext, you can directly include the `lighter.css` file in the `src` directory. Otherwise, use the `dist/lighter.css` file.
|
| 39 |
|
| 40 | ## Supported Browsers
|
| 41 | lighter supports most modern browsers (Chrome, Firefox, Edge, Opera) but it also has impressive support for older browsers.
|
| 42 | lighter has been tested on Internet Explorer 11 with no issues.
|
| 43 |
|
| 44 | ## Development Setup
|
| 45 | 1. Clone this repository (https://www.github.com/alamantus/lighter)
|
| 46 | 2. Make sure you have [npm](https://www.npmjs.com/get-npm) installed
|
| 47 | 3. (for Windows) Install `windows-build-tools` so you can install stuff
|
| 48 | 4. Run `npm install` in the root directory of `lighter`
|
| 49 | 5. Once that is completed, run `npm run build` to build the minified version and the gzipped file.
|
| 50 | 6. If you are making changes live, use `npm run watch`. `watch` will build the minified css file in `./dist` whenever there is a change in `./src/lighter.css`.
|