├── README.md └── dist └── _utilities.styl /README.md: -------------------------------------------------------------------------------- 1 | # Stylus Utilities 2 | Набор готовых к использованию миксинов для ускорения и упрощения процесса вёрстки. 3 | 4 | ## Документация 5 | ### container(width) 6 | Задаёт блоку определённую ширину и центрирует его по горизонтали. 7 | 8 | ```stylus 9 | .container 10 | container(960px) 11 | ``` 12 | 13 | ### center-both(width) 14 | Задаёт блоку указанную ширину и центрирует его по вертикали и горизонтали. 15 | 16 | ```stylus 17 | .centered 18 | center-both(300px) 19 | ``` 20 | 21 | ### clearfix() 22 | Сбрасывает обтекание у элемента, в который вложены плавающие блоки. 23 | 24 | ```stylus 25 | .parent 26 | clearfix() 27 | 28 | .child 29 | float left 30 | ``` 31 | 32 | ### justify() 33 | Применяется для выравнивания нескольких потомков по ширине родителя. 34 | 35 | #### justify-child(font-size = 16px) 36 | Применяется к потомкам блока, к которому применён `justify`. Если значение размера шрифта не задано, то размер шрифта по умолчанию равен 16 пикселям. 37 | 38 | ```stylus 39 | .justified 40 | justify() 41 | 42 | li 43 | .justify-child(14px) 44 | ``` 45 | 46 | ### placeholder-color(color) 47 | Задаёт цвет плейсхолдера. 48 | 49 | ```stylus 50 | input[type="text"] 51 | placeholder-color(#ccc) 52 | ``` 53 | ### opacity(level) 54 | Задаёт степень непрозрачности для нормальных браузеров и для IE8. 55 | 56 | ```stylus 57 | .block 58 | opacity(0.5) 59 | ``` 60 | 61 | ### rems(value) 62 | Задаёт размер шрифта в `rem` с фоллбэком в `px`. 63 | 64 | ```stylus 65 | p 66 | rems(18px) 67 | ``` 68 | 69 | ### bgi(path) 70 | Задаёт блоку фоновую картинку при условии, что размер блока должен совпадать с размерами картинки. 71 | 72 | **Важно**: следует в начале файла с миксинами прописать пути к директории с картинками: абсолютный путь в переменную `path-to-images`, путь относительно данного файла с миксинами в переменную `path-to-images-from-this`. 73 | 74 | ```stylus 75 | .btn 76 | bgi("btn.png") 77 | ``` 78 | 79 | ### clearlist() 80 | Сброс стандартных стилей у списков. Полезно при вёрстке различных меню. 81 | 82 | ### text-overflow() 83 | Обрезает лишний текст, оставляя многоточие. 84 | 85 | ### hidetext() 86 | Делает текст в блоке невидимым. 87 | 88 | ### noselection() 89 | Запрещает выделение текста. 90 | 91 | ### gpu() 92 | Хак для включения аппаратного ускорения при анимациях. -------------------------------------------------------------------------------- /dist/_utilities.styl: -------------------------------------------------------------------------------- 1 | path-to-images = "/static/images/" // Абсолютный путь к папке с изображениями 2 | path-to-images-from-this = "../.." + path-to-images // Путь к папке с изображениями относительно данного файла 3 | 4 | // Центрирование по горизонтали блока заданной ширины 5 | container(width) 6 | width width 7 | margin-left auto 8 | margin-right auto 9 | 10 | 11 | 12 | 13 | // Центрирование блока по горизонтали и вертикали. 14 | // У потомка должно быть задано position: relative 15 | center-both(width) 16 | width width 17 | margin-left auto 18 | margin-right auto 19 | position absolute 20 | top 50% 21 | left 50% 22 | transform translate(-50%, -50%) 23 | 24 | 25 | 26 | 27 | // Сброс обтекания для плавающих блоков-потомков 28 | clearfix() 29 | &:before, 30 | &:after 31 | content " " 32 | display table 33 | 34 | &:after 35 | clear both 36 | 37 | 38 | 39 | 40 | // Применяется к родительскому блоку, в который вложено n inline-block потомков. 41 | // Эти потомки будут распределены по ширине родительского блока 42 | justify() 43 | font-size 1px 44 | line-height 0 45 | 46 | zoom 1 47 | 48 | text-align justify 49 | text-align-last justify 50 | text-justify newspaper 51 | 52 | &:after 53 | display inline-block 54 | visibility hidden 55 | 56 | overflow hidden 57 | 58 | width 100% 59 | height 0 60 | 61 | content '' 62 | 63 | 64 | 65 | 66 | // Применяется к inline-block элементам, вложенным в родителя с применённым justify. 67 | // Следует указать нужный размер шрифта в блоках, так как в justify он сбрасывается 68 | justify-child(font-size = 16px) 69 | font-size font-size 70 | line-height normal 71 | 72 | display inline-block 73 | 74 | vertical-align top 75 | 76 | 77 | 78 | 79 | // Красивое обрезание лишнего текста 80 | text-overflow() 81 | overflow hidden 82 | white-space nowrap 83 | text-overflow ellipsis 84 | 85 | 86 | 87 | 88 | // Скрытие текста у блока 89 | hidetext() 90 | font 0/0 a 91 | text-shadow none 92 | color transparent 93 | 94 | 95 | 96 | 97 | // Запрет выделения текста 98 | noselection() 99 | user-select none 100 | -webkit-touch-callout none 101 | 102 | &:hover 103 | cursor default 104 | 105 | 106 | 107 | // Задаёт цвет плейсхолдера 108 | placeholder-color(color) 109 | &:-moz-placeholder, 110 | &::-moz-placeholder 111 | color color 112 | opacity 1 113 | 114 | &::-webkit-input-placeholder 115 | color color 116 | 117 | 118 | 119 | 120 | // Хак для включения аппаратного ускорения. 121 | // Поддержка браузерами: IE10+ 122 | gpu() 123 | transform translate3d(0, 0, 0) 124 | 125 | 126 | 127 | 128 | // Быстрое задание фоновой картинки 129 | bgi(path) 130 | bpath = path-to-images + path 131 | dpath = path-to-images-from-this + path 132 | background url(bpath) 133 | width image-size(dpath)[0] 134 | height image-size(dpath)[1] 135 | 136 | 137 | 138 | 139 | // Сброс стандартных стилей у списков. 140 | // Полезно при вёрстке различных меню 141 | clearlist() 142 | padding 0 143 | margin 0 144 | list-style none 145 | li 146 | display inline-block 147 | 148 | 149 | 150 | 151 | // Прозрачность для IE8 152 | opacity(level) 153 | opacity level 154 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + level*100 + ")"; 155 | 156 | 157 | 158 | 159 | // Размер шрифта в rem с фоллбэком в px 160 | rems(value) 161 | font-size value 162 | font-size unit(value/16, 'rem') 163 | 164 | 165 | 166 | 167 | // TODO 168 | // • retina-изображения 169 | // • медиазапросы --------------------------------------------------------------------------------