bgimg Background image

background-color: #999;
background-image: url('./../');
background-position: center center; // x y
background-size: cover;
background-repeat: no-repeat;

bgicon Background icon

background-image: url('./../');
background-position: 20px 10px; // x y
background-size: auto;
background-repeat: no-repeat;

abscent Absolute center position

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

absov Absolute Overlay

position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color:rgba(86, 86, 86, 0.5);

::absicon Pseudo absolute bg icon

content: "";

position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 10px;

background-image: url('./../');
background-repeat: no-repeat;

wh Widht: 100%, Heigh: 100%

width: 100%;
height: 100%;

trans Transition

transition: all 0.2s ease-in;

transl Transform Translate

transform: translate(-50%, -50%);

imp Import CSS / SCSS

@import './';

media CSS, SCSS media

@media only screen and (max-width: 992px) {

}

cssvars Hint for CSS variables

:root {
  --textColor: #333;
  --accent: #1050da;
}

body {
    color: var(--textColor);
}

btn CSS Button class

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;

    padding: 10px 15px;
    height: 30px;

		border-radius: 12px;
    background: #333333;

    font-size: 16px;
    color: #fff;

    transition: background-color 0.2s ease-in, color 0.2s ease-in;
}

.button:hover, .button:focus {
	background-color: #404040;
}

.button:active {
	background-color: #222222;
}