├── .gitignore ├── README.md ├── gulpfile.js ├── index.min.css ├── package.json ├── src ├── clear.scss ├── display.scss ├── index.scss └── spacing.scss └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Минимальный набор готовых CSS-классов для повседневных задач по верстке. 2 | 3 | ## Установка 4 | 5 | NPM: 6 | `npm install macro-css` 7 | 8 | Yarn: 9 | `yarn add macro-css` 10 | 11 | ## Использование 12 | 13 | Установить набор классов с помощью NPM или Yarn 14 | 15 | ### React 16 | 17 | Подключить в любом месте index.js: `import 'macro-css';` 18 | 19 | ### SASS/SCSS 20 | 21 | Открыть самый главный файл со стилями и дописать в самом начале: `@import 'macro-css';` 22 | 23 | Внизу в таблице приведены примеры классов, которые можно использовать. Вместо символа "\*" укажите одну букву любой стороны. Если не указывать сторону, то отступы будут задаваться со всех сторон. 24 | 25 | Сторона => сокращение: 26 | 27 | - `left` => `l` 28 | - `right` => `r` 29 | - `top` => `t` 30 | - `bottom` => `b` 31 | 32 | ### Например: 33 | 34 | | Класс | Значение | 35 | | ------------------- | ------------------------------------------------------------- | 36 | | `mr-10 mb-50` | `margin-right: 10px; margin-bottom: 50px;` | 37 | | `m-25` | `margin: 25px;` | 38 | | `p-50` | `padding: 50px;` | 39 | | `pr-10 mt-15 mb-15` | `padding-right: 10px; margin-top: 15px; margin-bottom: 15px;` | 40 | 41 | Значение: 42 | 43 | - `mt-10` - `margin-top: 10px` 44 | - `mr-40` - `margin-right: 40px` 45 | 46 | # Отступы margin 47 | 48 | | Класс | Значение | 49 | | ------ | ---------------- | 50 | | m\*-5 | margin-\*: 5px; | 51 | | m\*-10 | margin-\*: 10px; | 52 | | m\*-15 | margin-\*: 15px; | 53 | | m\*-20 | margin-\*: 20px; | 54 | | m\*-25 | margin-\*: 25px; | 55 | | m\*-30 | margin-\*: 30px; | 56 | | m\*-35 | margin-\*: 35px; | 57 | | m\*-40 | margin-\*: 40px; | 58 | | m\*-45 | margin-\*: 45px; | 59 | | m\*-50 | margin-\*: 50px; | 60 | 61 | # Отступы padding 62 | 63 | | Класс | Значение | 64 | | ------ | ----------------- | 65 | | p\*-5 | padding-\*: 5px; | 66 | | p\*-10 | padding-\*: 10px; | 67 | | p\*-15 | padding-\*: 15px; | 68 | | p\*-20 | padding-\*: 20px; | 69 | | p\*-25 | padding-\*: 25px; | 70 | | p\*-30 | padding-\*: 30px; | 71 | | p\*-35 | padding-\*: 35px; | 72 | | p\*-40 | padding-\*: 40px; | 73 | | p\*-45 | padding-\*: 45px; | 74 | | p\*-50 | padding-\*: 50px; | 75 | 76 | # Очистка базовых стилей 77 | 78 | | Класс | Значение | 79 | | ----- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | 80 | | clear | Очищает базовые стили, которые устанавливает браузер для: `,