├── .gitignore ├── src ├── index.scss ├── clear.scss ├── spacing.scss └── display.scss ├── gulpfile.js ├── package.json ├── README.md ├── index.min.css └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | @import './spacing.scss'; 2 | @import './clear.scss'; 3 | @import './display.scss'; 4 | -------------------------------------------------------------------------------- /src/clear.scss: -------------------------------------------------------------------------------- 1 | .clear { 2 | * { 3 | box-sizing: border-box; 4 | outline: none; 5 | } 6 | 7 | a { 8 | color: inherit; 9 | text-decoration: none; 10 | } 11 | 12 | ul { 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | li { 18 | list-style-type: none; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const sass = require('gulp-sass'); 3 | const rename = require('gulp-rename'); 4 | 5 | gulp.task('build', () => { 6 | return gulp 7 | .src('./src/index.scss') 8 | .pipe(sass({ outputStyle: 'compressed' })) 9 | .pipe(rename({ extname: '.min.css' })) 10 | .pipe(gulp.dest('./')); 11 | }); 12 | 13 | gulp.task('watch', () => { 14 | gulp.watch('./src/*.scss', gulp.parallel('build')); 15 | }); 16 | -------------------------------------------------------------------------------- /src/spacing.scss: -------------------------------------------------------------------------------- 1 | $sides: ( 2 | 'top': 't', 3 | 'right': 'r', 4 | 'bottom': 'b', 5 | 'left': 'l', 6 | ); 7 | 8 | @each $side, $letter in $sides { 9 | @for $px from 1 through 10 { 10 | .m#{$letter}-#{$px * 5} { 11 | margin-#{$side}: #{$px * 5}px !important; 12 | } 13 | 14 | .p#{$letter}-#{$px * 5} { 15 | padding-#{$side}: #{$px * 5}px !important; 16 | } 17 | 18 | .m-#{$px * 5} { 19 | margin: #{$px * 5}px !important; 20 | } 21 | 22 | .p-#{$px * 5} { 23 | padding: #{$px * 5}px !important; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "macro-css", 3 | "version": "1.0.4", 4 | "style": "index.min.css", 5 | "main": "index.min.css", 6 | "filename": "index.min.css", 7 | "devDependencies": { 8 | "gulp": "^4.0.2", 9 | "gulp-rename": "^2.0.0", 10 | "gulp-sass": "^4.1.0", 11 | "node-sass": "^6.0.0", 12 | "rollup": "^2.52.0" 13 | }, 14 | "scripts": { 15 | "build": "gulp build", 16 | "watch": "gulp watch" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/Archakov06/macro-css.git" 21 | }, 22 | "author": "Archakov Dennis", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/Archakov06/macro-css/issues" 26 | }, 27 | "homepage": "https://github.com/Archakov06/macro-css#readme", 28 | "description": "Micro CSS classes for a convenient description of styles" 29 | } 30 | -------------------------------------------------------------------------------- /src/display.scss: -------------------------------------------------------------------------------- 1 | .w100p { 2 | width: 100%; 3 | } 4 | 5 | .h100p { 6 | height: 100%; 7 | } 8 | 9 | .d-ib { 10 | display: inline-block; 11 | } 12 | 13 | .d-if { 14 | display: inline-flex; 15 | } 16 | 17 | .d-block { 18 | display: block; 19 | } 20 | 21 | .d-flex { 22 | display: flex; 23 | } 24 | 25 | .justify-between { 26 | justify-content: space-between; 27 | } 28 | 29 | .justify-around { 30 | justify-content: space-around; 31 | } 32 | 33 | .justify-center { 34 | justify-content: center; 35 | } 36 | 37 | .justify-end { 38 | justify-content: flex-end; 39 | } 40 | 41 | .align-center { 42 | align-items: center; 43 | } 44 | 45 | .align-end { 46 | align-items: flex-end; 47 | } 48 | 49 | .align-start { 50 | align-items: flex-start; 51 | } 52 | 53 | .flex-column { 54 | flex-direction: column; 55 | } 56 | 57 | .flex-row { 58 | flex-direction: row; 59 | } 60 | 61 | .flex-auto { 62 | flex: 1 1 auto; 63 | } 64 | 65 | .flex { 66 | flex: 1; 67 | } 68 | 69 | .flex-wrap { 70 | flex-wrap: wrap; 71 | } 72 | 73 | .m-auto { 74 | margin: auto; 75 | } 76 | 77 | .ml-auto { 78 | margin-left: auto; 79 | } 80 | 81 | .mr-auto { 82 | margin-right: auto; 83 | } 84 | 85 | .text-center { 86 | text-align: center; 87 | } 88 | 89 | .text-capitalize { 90 | text-transform: capitalize; 91 | } 92 | 93 | .text-uppercase { 94 | text-transform: uppercase; 95 | } 96 | 97 | .text-lowercase { 98 | text-transform: lowercase; 99 | } 100 | 101 | .fw-bold { 102 | font-weight: bold; 103 | } 104 | 105 | .text-truncate { 106 | white-space: nowrap; 107 | overflow: hidden; 108 | text-overflow: ellipsis; 109 | } 110 | 111 | @for $i from 0 through 10 { 112 | .opacity-#{$i} { 113 | opacity: $i / 10; 114 | } 115 | } 116 | 117 | .pos-r { 118 | position: relative; 119 | } 120 | 121 | .pos-a { 122 | position: absolute; 123 | } 124 | 125 | .cu-p { 126 | cursor: pointer; 127 | } 128 | -------------------------------------------------------------------------------- /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 | Очищает базовые стили, которые устанавливает браузер для: `,