1.2.0 • Published 1 year ago
css-shortcut v1.2.0
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
=>l
right
=>r
top
=>t
bottom
=>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 |
1.2.0
1 year ago
1.1.9
1 year ago
1.1.8
1 year ago
1.1.7
1 year ago
1.1.6
1 year ago
1.1.5
1 year ago
1.1.4
1 year ago
1.1.1
1 year ago
1.1.0
1 year ago
1.0.9
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.1.3
1 year ago
1.1.2
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago