https://github.com/ahansson/hgrid-css
🌟 A lightweight and practical CSS utility kit. Zero config. Flat learning curve.
https://github.com/ahansson/hgrid-css
autoprefixer css css-framework css-utilities hgrid-css html node-sass postcss responsive-design scss utility-classes
Last synced: 28 days ago
JSON representation
🌟 A lightweight and practical CSS utility kit. Zero config. Flat learning curve.
- Host: GitHub
- URL: https://github.com/ahansson/hgrid-css
- Owner: ahansson
- License: mit
- Created: 2020-12-26T21:45:52.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-24T23:11:38.000Z (4 months ago)
- Last Synced: 2025-03-28T05:12:59.923Z (about 2 months ago)
- Topics: autoprefixer, css, css-framework, css-utilities, hgrid-css, html, node-sass, postcss, responsive-design, scss, utility-classes
- Language: SCSS
- Homepage: https://hgrid.io
- Size: 614 KB
- Stars: 14
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hgrid-css
## **A Lightweight and Practical CSS Utility Kit.**
### Zero Config. Flat Learning Curve.
**Hgrid** is a starting point intended to make HTML work out of the box. It's not a UI framework, but provides sensible defaults so you can start prototyping without having to deal with browser quirks, unstyled elements and basic responsivity.
## How to use
Documentation: [https://hgrid.io](https://hgrid.io)
## How to install
### **As a node module:**
```bash
npm install hgrid-css --save-dev
```
```bash
yarn add hgrid-css --dev
```
### **Then, @use as Sass in your project:**
```scss
@use 'hgrid-css/sass/hgrid' with (
// example customization
$link-color: #ffe88d,
$link-color-hover: #fff0b4,
$container-max-width: 1600px,
$link-underline-color: #ffe88d,
$use-global-link-underlines: true,
$include-grid: false
);
```
For detailed information with step by step recipes on how to integrate **hgrid** in different JS frameworks, please refer to [the documentation](https://hgrid.io/documentation/integrate/).
### **From local file or CDN:**
```html
```
### **@import into your stylesheet:**
```css
/* From node_modules */
@import './../etc./node_modules/hgrid-css/dist/hgrid.min.css';
```
```css
/* From CDN */
@import 'https://unpkg.com/hgrid-css@latest/dist/hgrid.min.css';
```
## Local development
_Requires Node.js installed on your system (or use an editor plugin such as [live-sass](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass))_
Run `npm install` from the root of the **hgrid-css** folder.
Start compiling **hgrid**'s `.scss` files to `.css` with the command `npm run watch`. Changes you make to files in the `/sass` folder will result in css files being updated in the `/dist` folder.
To produce the compiled, prefixed and minified **hgrid** output, use `npm run build`. It uses Autoprefixer to add some backwards compatibility before minifying the result as `hgrid.min.css`.
See [hgrid.io/documentation/installation](https://hgrid.io/documentation/installation/) for complete usage instructions.
## Versions
Latest: **1.0**
See [releases](https://github.com/ahansson/hgrid-css/releases) on GitHub.
## Roadmap
See the [kanban board](https://github.com/ahansson/hgrid-css/projects/1).
## Problems?
Please don't hesitate to report [an issue ](https://github.com/ahansson/hgrid-css/issues).
## Help us improve
Please don't hesitate to open a [pull request](https://github.com/ahansson/hgrid-css/pulls).
## Author
© Atle Hansson
## License
MIT