if you would like to support the development of the project, you can Donate
Install
NPM: npm install css-shortcut
YARN: yarn add css-shortcut
Usage
Install package with NPM or Yarn.
SASS/SCSS import
Open the main style file and import at the beginning css-shortcut from node-modules folder:
@import 'node_modules/css-shortcut/index.min.css';
React import
Open the main react file and at the beginning type import 'css-shortcut'
How To Use
Side => abbreviation:
left=>lright=>rtop=>tbottom=>b
For Example:
| Class | Value |
|---|---|
mr-12 mb-41 |
margin-right: 12px; margin-bottom: 41px; |
m-25 |
margin: 25px; |
p-50 |
padding: 50px; |
pr-10 mt-15 mb-15 |
padding-right: 10px; margin-top: 15px; margin-bottom: 15px; |
Margin
Margin from 1 to 50 pixels.
| Class | Value |
|---|---|
| m*-1 | margin-*: 1px; |
| m*-2 | margin-*: 2px; |
| m*-3 | margin-*: 3px; |
| m*-4 | margin-*: 4px; |
| m*-5 | margin-*: 5px; |
| m*-6 | margin-*: 6px; |
| m*-7 | margin-*: 7px; |
| m*-8 | margin-*: 8px; |
| m*-9 | margin-*: 9px; |
| m*-10 | margin-*: 10px; |
| etc. | etc. (up to 50px) |
Padding
Padding from 1 to 50 pixels.
| Class | Value |
|---|---|
| p*-1 | padding-*: 1px; |
| p*-2 | padding-*: 2px; |
| p*-3 | padding-*: 3px; |
| p*-4 | padding-*: 4px; |
| p*-5 | padding-*: 5px; |
| p*-6 | padding-*: 6px; |
| p*-7 | padding-*: 7px; |
| p*-8 | padding-*: 8px; |
| p*-9 | padding-*: 9px; |
| p*-10 | padding-*: 10px; |
| etc. | etc. (up to 50px) |
Top, right, bottom, left
Top, right, bottom, left from 0 to 50 in pixels.
| Class | Value |
|---|---|
| top-0 | top: 0px; |
| top-2 | top: 2px; |
| top-50 | top: 50px; |
| right-0 | right: 0px; |
| right-2 | right: 2px; |
| right-50 | right: 50px; |
| left-0 | left: 0px; |
| left-2 | left: 2px; |
| left-50 | left: 50px; |
| bottom-0 | bottom: 0px; |
| bottom-2 | bottom: 2px; |
| bottom-50 | bottom: 50px; |
| etc. | etc. |
Top, right, bottom, left in percentage 0 to 100 in 10 steps.
| Class | Value |
|---|---|
| top-p0 | top: 0%; |
| top-p20 | top: 20%; |
| top-p100 | top: 100%; |
| right-p0 | right: 0%; |
| right-p20 | right: 20%; |
| right-p100 | right: 100%; |
| bottom-p0 | bottom: 0%; |
| bottom-p20 | bottom: 20%; |
| bottom-p100 | bottom: 100%; |
| left-p0 | left: 0%; |
| left-p20 | left: 20%; |
| left-p100 | left: 100%; |
| etc. | etc. |
For Example:
| Class | Value |
|---|---|
top-p50 right-p100 |
top: 50%; right: 100%; |
bottom-p0 |
bottom: 0%; |
left-50 |
left: 50px; |
top-p70 left-15 bottom-1 |
padding-right: 10px; margin-top: 15px; margin-bottom: 15px; |
Flex, display
| Class | Value |
|---|---|
| d-inflex | display: inline-flex; |
| d-flex | display: flex; |
| d-block | display: block; |
| jcsb | justify-content: space-between; |
| jcsa | justify-content: space-around; |
| jcc | justify-content: center; |
| jcse | justify-content: space-evenly; |
| aic | align-items: center; |
| aie | align-items: flex-end; |
| ais | align-items: flex-start; |
| flex-col | flex-direction: column; |
| flex-row | flex-direction: row; |
| flex-wrap | flex-wrap: wrap; |
| flex-auto | flex: 1 1 auto; |
| flex | flex: 1; |
| m-auto | margin: auto; |
| tac | text-align: center; |
| pos-r | position: relative; |
| pos-a | position: absolute; |
| pos-static | position: static; |
| pos-sticky | position: sticky; |
Text
| Class | Value |
|---|---|
| tac | text-align: center; |
| ttc | text-transform: capitalize; |
| ttu | text-transform: uppercase; |
| ttl | text-transform: lowercase; |
| tdn | text-decoration: none; |
| tdu | text-decoration: underline; |
| white | color: #fff; |
| black | color: #000; |
Font-Weight
| Class | Value |
|---|---|
| fw100 | font-weight: 100; |
| fw200 | font-weight: 200; |
| fw300 | font-weight: 300; |
| fw400 | font-weight: 400; |
| fw500 | font-weight: 500; |
| fw600 | font-weight: 600; |
| fw700 | font-weight: 700; |
| fw800 | font-weight: 800; |
| fw900 | font-weight: 900; |
| fwbold | font-weight: bold; |
| fwnormal | font-weight: normal; |
Opacity
| Class | Value |
|---|---|
| op-1 | opacity: 0.1; |
| op-2 | opacity: 0.2; |
| op-3 | opacity: 0.3; |
| op-4 | opacity: 0.4; |
| op-5 | opacity: 0.5; |
| op-6 | opacity: 0.6; |
| op-7 | opacity: 0.7; |
| op-8 | opacity: 0.8; |
| op-9 | opacity: 0.9; |
| op-10 | opacity: 1; |
Z-index
Z-index from 0 to 5.
| Class | Value |
|---|---|
| z-0 | z-index: 0; |
| z-1 | z-index: 1; |
| z-2 | z-index: 2; |
| z-3 | z-index: 3; |
| z-4 | z-index: 4; |
| z-5 | z-index: 5; |
Other
| Class | Value |
|---|---|
| c-p | cursor: pointer |