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">
The DEMO shows the HTML FILE CODE. You can download this.
- Minimalistic and Small
- Simple, Easy and Fast to learn
- No CSS
!Important
- Only about 4.000 kilobytes (pandas-hamburgers.min.css)
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; |