1.2.2 • Published 3 years ago
frequent-styles v1.2.2
frequent-styles
📦 Набор часто используемых css-классов
📥 Установка
Npm
npm i frequent-styles Yarn
yarn add frequent-styles 📍 Margin и padding отступы
Сокращения:
left=>lright=>rtop=>tbottom=>bmargin=>mpadding=>p
Значения : 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100;
Примеры:
| Класс | Значение |
|---|---|
| mr-10 mb-50 | margin-right: 10px; margin-bottom: 50px; |
| m-25 | margin: 25px; |
| p-50 | padding: 50px; |
| pr-35 pl-100 | padding-right: 35px; padding-left: 100px; |
📍 Стили для текста
| Класс | Значение |
|---|---|
| text-center | text-align: center; |
| text-capitalize | text-transform: capitalize; |
| text-uppercase | text-transform: uppercase; |
| text-lowercase | text-transform: lowercase; |
| text-truncate | white-space: nowrap; overflow: hidden; text-overflow: ellipsis; |
| fw-normal | font-weight: normal; |
| fw-bold | font-weight: bold; |
📍 Opacity
| Класс | Значение |
|---|---|
| opacity-1 | opacity: 0.1; |
| opacity-2 | opacity: 0.2; |
| opacity-3 | opacity: 0.3; |
| opacity-4 | opacity: 0.4; |
| opacity-5 | opacity: 0.5; |
| opacity-6 | opacity: 0.6; |
| opacity-7 | opacity: 0.7; |
| opacity-8 | opacity: 0.8; |
| opacity-9 | opacity: 0.9; |
| opacity-10 | opacity: 1; |
📍 Flex, позиционирование, размер
| Класс | Значение |
|---|---|
| h100 | height: 100%; |
| w100 | width: 100%; |
| d-ib | display: inline-block; |
| d-if | display: inline-flex; |
| d-flex | display: flex; |
| d-block | display: block; |
| justify-between | justify-content: space-between; |
| justify-around | justify-content: space-around; |
| justify-center | justify-content: center; |
| justify-end | justify-content: flex-end; |
| align-center | align-items: center; |
| align-end | align-items: flex-end; |
| align-start | display: inline-block; |
| flex-column | flex-direction: column; |
| flex-row | flex-direction: row; |
| m-auto | margin: auto; |
| ml-auto | margin-left: auto; |
| mr-auto | margin-right: auto; |
| pos-r | position: relative; |
| pos-a | position: absolute; |
📍 Другие
| Класс | Значение |
|---|---|
| cu-p | cursor: pointer; |