css-shortcut

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