https://github.com/eddiemoore/hydrogencss
Atomic CSS for CSS Modules
https://github.com/eddiemoore/hydrogencss
atomic-css atomic-design css css-modules
Last synced: about 1 year ago
JSON representation
Atomic CSS for CSS Modules
- Host: GitHub
- URL: https://github.com/eddiemoore/hydrogencss
- Owner: eddiemoore
- License: mit
- Created: 2017-03-30T05:46:38.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-09-27T19:52:00.000Z (over 2 years ago)
- Last Synced: 2025-04-12T18:08:58.753Z (about 1 year ago)
- Topics: atomic-css, atomic-design, css, css-modules
- Language: JavaScript
- Size: 85.9 KB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hydrogen.css
Atomic CSS for CSS Modules
[](http://npm.im/hydrogencss)
## Installation
#### NPM
```shell
npm i -S hydrogencss
```
#### Yarn
```shell
yarn add hydrogencss
```
## Usage with CSS Modules
There are two ways to compose with each value. The first:
```css
.container {
composes: from 'hydrogencss/.css';
}
```
With this way you will be importing all the classes within `.css`, unless
you are clearing up the unused CSS.
The alternate way to import is
```css
.container {
composes: from 'hydrogencss//.css';
}
```
Example:
```css
.container {
composes: flex from 'hydrogencss/display/flex.css';
}
```
Which will just include:
```css
.flex { display: flex; }
```
To see all the properties and values available please check the [docs](docs/) folder.