1.0.2 • Published 4 years ago
lightweight-css v1.0.2
lightweight-css
Lightweight CSS
This is a very simple lightweight css helper that helps you avoid creating multiple custom classes for styles that are used way too often in Web Design.
How to install
npm install lightweight-css
You can choose to import it straight
<link rel="stylesheet" href="./node_modules/lightweight-css/lightweight-css.css"/>
or if you're using Webpack to compile and bundle your CSS you can simply use:
import "lightweight-css";
Basic Usage
Simply use the classes below to achieve the appropriate styles
| Class | style |
|---|---|
| block | display: block |
| inline-block | display: inline-block |
| hidden | display: none |
| center-text | text-align: center |
| right-text | text-align: right |
| no-decor | text-decoration: none |
| no-select | user-select: none |
| pointer | cursor: pointer |
| pos-rel | position: relative |
| pos-abs | position: absolute |
| pos-fix | position: fixed |
| flex | display: flex |
| flex-row | flex-flow: row |
| flex-col | flex-flow: col |
| flex-wrap | flex-wrap: wrap |
| just-start | justify-content: flex-start |
| just-between | justify-content: space-between |
| just-end | justify-content: flex-end |
| items-start | align-items: flex-start |
| items-center | align-items: center |
| items-end | align-items: flex-end |
Hope this utility helps you!
Contribution
Since this project is still quite small, feel free to create a PR to add improvements and more features!(as long as it's still lightweight)