Минимальный набор готовых CSS-классов для повседневных задач по верстке.

Установка

NPM: npm install macro-css

Yarn: yarn add macro-css

Использование

Установить набор классов с помощью NPM или Yarn

React

Подключить в любом месте index.js: import 'macro-css';

SASS/SCSS

Открыть самый главный файл со стилями и дописать в самом начале: @import 'macro-css';

Внизу в таблице приведены примеры классов, которые можно использовать. Вместо символа "*" укажите одну букву любой стороны. Если не указывать сторону, то отступы будут задаваться со всех сторон.

Сторона => сокращение:

• left => l
• right => r
• top => t
• bottom => b

Например:

| Класс | Значение | | ------------------- | ------------------------------------------------------------- | | mr-10 mb-50 | margin-right: 10px; margin-bottom: 50px; | | m-25 | margin: 25px; | | p-50 | padding: 50px; | | pr-10 mt-15 mb-15 | padding-right: 10px; margin-top: 15px; margin-bottom: 15px; |

Значение:

• mt-10 - margin-top: 10px
• mr-40 - margin-right: 40px

Отступы margin

| Класс | Значение | | ------ | ---------------- | | m*-5 | margin-*: 5px; | | m*-10 | margin-*: 10px; | | m*-15 | margin-*: 15px; | | m*-20 | margin-*: 20px; | | m*-25 | margin-*: 25px; | | m*-30 | margin-*: 30px; | | m*-35 | margin-*: 35px; | | m*-40 | margin-*: 40px; | | m*-45 | margin-*: 45px; | | m*-50 | margin-*: 50px; |

Отступы padding

| Класс | Значение | | ------ | ----------------- | | p*-5 | padding-*: 5px; | | p*-10 | padding-*: 10px; | | p*-15 | padding-*: 15px; | | p*-20 | padding-*: 20px; | | p*-25 | padding-*: 25px; | | p*-30 | padding-*: 30px; | | p*-35 | padding-*: 35px; | | p*-40 | padding-*: 40px; | | p*-45 | padding-*: 45px; | | p*-50 | padding-*: 50px; |

Очистка базовых стилей

| Класс | Значение | | ----- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | clear | Очищает базовые стили, которые устанавливает браузер для: <a>, <ul>, <li>. Также для всех (*) остальных элементов: box-sizing: border-box; outline: none |

Flex, позиционирование, размер

| Класс | Значение | | --------------- | ------------------------------- | | h100p | height: 100%; | | w100p | 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; | | align-center | align-items: center; | | align-end | align-items: flex-end; | | align-start | align-items: flex-start; | | flex-column | 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; | | ml-auto | margin-left: auto; | | mr-auto | margin-right: auto; | | text-center | text-align: center; | | pos-r | position: relative; | | pos-a | position: absolute; |

Текст

| Класс | Значение | | --------------- | --------------------------------------------------------------- | | 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-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; |