Минимальный набор готовых 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;   |