Pandas-CSS3-Class-Helpers

There are many good class helpers. But these are so short or confusing that I wanted to make my own.

To use this class helper, you just have to include the following link in the Head Tag. Link the Author!

Example:

<!-- Copyright (c) 2020 Benedikt Wolf https://github.com/Panda279TV -->
<link rel="stylesheet" href="pandas-class-helpers.css">
<link rel="stylesheet" href="YOUR.CSS.FILE">

---

Demo

The DEMO shows the HTML FILE CODE. You can download this.

---

Statistics

• Minimalistic and Small
• Simple, Easy and Fast to learn
• No CSS !Important
• Only about 4.000 kilobytes (pandas-hamburgers.min.css)

---

Introduction

Simply add the abbreviated classes

Abbreviated Classes	CSS3 Style
vW100	width: 100vw;
w100	width: 100%;
w90	width: 90%;
w80	width: 80%;
w70	width: 70%;
w60	width: 60%;
w50	width: 50%;
w40	width: 40%;
w30	width: 30%;
w20	width: 20%;
w10	width: 10%;
vH100	height: 100vh;
h100	height: 100%;
hAuto	height: auto;
mCenter	margin: 0 auto;
m20	margin: 20px;
m40	margin: 40px;
m60	margin: 60px;
p20	padding: 20px;
p40	padding: 40px;
p60	padding: 60px;
mTB20	margin: 20px 0px;
mTB40	margin: 40px 0px;
mTB60	margin: 60px 0px;
mTB20	margin: 0px 20px;
mTB40	margin: 0px 40px;
mTB60	margin: 0px 60px;
hyphensAuto	hyphens: auto;
colBlack	color: black;
colWhite	color: white;
colGrey	color: grey;
colRed	color: red;
colBlue	color: blue;
colGreen	color: green;
colYellow	color: yellow;
colPurple	color: purple;
colOrange	color: orange;
backBlack	background-color: black;
backWhite	background-color: white;
backGrey	background-color: grey;
backRed	background-color: red;
backBlue	background-color: blue;
backGreen	background-color: green;
backYellow	background-color: yellow;
backPurple	background-color: purple;
backOrange	background-color: orange;
textC	text-align: center;
textL	text-align: left;
textR	text-align: right;
textJ	text-align: justify;
lineH15	line-height: 15px;
lineH30	line-height: 30px;
lineH45	line-height: 45px;
lineH60	line-height: 60px;
lineH75	line-height: 75px;
verticalAlignMiddle	vertical-align: middle;
verticalAlignTop	vertical-align: top;
verticalAlignBottom	vertical-align: bottom;
textDecoNone	text-decoration: none;
textDecoUnderline	text-decoration: underline;
listSNone	list-style: none;
listSDisc	list-style: disc;
listSCircle	list-style: circle;
listSDecimal	list-style: decimal;
listSLowerAlpha	list-style: lower-alpha;
listSUpperAlpha	list-style: upper-alpha;
borderSBlack	border: 1px solid black;
borderTSBlack	border-top: 1px solid black;
borderBSBlack	border-bottom: 1px solid black;
borderSWhite	border: 1px solid white;
borderTSWhite	border-top: 1px solid white;
borderBSWhite	border-bottom: 1px solid white;
borderSRed	border: 1px solid red;
borderSGreen	border: 1px solid green;
borderSBlue	order: 1px solid blue;
borderN	border: none;
displayN	display: none;
displayB	display: block;
displayT	display: table;
displayF	display: flex;
visibilityH	visibility: hidden;
visibilityV	visibility: visible;
opac0	opacity: 0;
opac25	opacity: 0.25;
opac50	opacity: 0.50;
opac75	opacity: 0.75;
opac100	opacity: 1;
flexWrapWrap	flex-wrap: wrap;
flexWrapNoWrap	flex-wrap: nowrap;
alignItemsCenter	align-items: center;
alignItemsFlexStart	align-items: flex-start;
alignItemsFlexEnd	align-items: flex-end;
alignContentCenter	align-content: center;
alignContentFlexStart	align-content: flex-start;
alignContentFlexEnd	align-content: flex-end;
justifyContentSpaceAround	justify-content: space-around;
justifyContentSpaceBetween	justify-content: space-between;
justifyContentSpaceEvenly	justify-content: space-evenly;
positionR	position: relative;
positionRTL	position: relative; top: 0px; left: 0px;
positionRTR	position: relative; top: 0px; right: 0px;
positionRBL	position: relative; bottom: 0px; left: 0px;
positionRBR	position: relative; bottom: 0px; right: 0px;
positionA	position: absolute;
positionATL	position: absolute; top: 0px; left: 0px;
positionATR	position: absolute; top: 0px; right: 0px;
positionABL	position: absolute; bottom: 0px; left: 0px;
positionABR	position: absolute; bottom: 0px; right: 0px;
positionF	position: fixed;
positionFTL	position: fixed; top: 0px; left: 0px;
positionFTR	position: fixed; top: 0px; right: 0px;
positionFBL	position: fixed; bottom: 0px; left: 0px;
positionFBR	position: fixed; bottom: 0px; right: 0px;
positionS	position: sticky;
positionSTL	position: sticky; top: 0px; left: 0px;
positionSTR	position: sticky; top: 0px; right: 0px;
positionSBL	position: sticky; bottom: 0px; left: 0px;
positionSBR	position: sticky; bottom: 0px; right: 0px;
zInd99	z-index: 99;
zInd-1	z-index: -1;
zInd-10	z-index: -10;
zInd1	z-index: 1;
zInd10	z-index: 10;
zInd25	z-index: 25;
zInd50	z-index: 50;
floatL	float: left;
floatR	float: right;
floatN	float: none;
clearB	clear: both;
clearF	*zoom: 1;

---