Low-level CSS toolkit.
- Human Readable Easy to understand without reading the docs.
- No Side Effects One class does one thing.
- Composable Classes compose well with each other.
You can use it in a webpack project by importing it import '@ox2/ycss' in your top level js file like index.js or in a .storybook/config.js if your using React Storybook.
Then use it with your react components:
<MyComponent className"padding:10">
<MyOtherComponent className"text:bold text:center" />
</MyComponent>Or any html based templating engine:
<div class="padding:10">
<div class="text:bold text:center"></div>
</div>Install using npm:
npm install @ox2/ycss --save
Install using yarn:
yarn add @ox2/ycss
Changes are tracked in the CHANGELOG.md
By default, ycss will append !important to style definitions. This is intended to make integrating with a pre-existing codebase easier. If you'd like to avoid this behaviour, use import '@ox2/ycss/no-important/index.css' Otherwise, usage is the same.