commit 76082617ba9d4e83c7dd385d2b9c740bfe73dc39 Author: Igor V Belousov Date: Sun Feb 8 21:32:26 2015 +0300 Initial commit new file: HELP.md new file: README.md new file: ShortCSS.styl diff --git a/HELP.md b/HELP.md new file mode 100644 index 0000000..33cc52b --- /dev/null +++ b/HELP.md @@ -0,0 +1,491 @@ +# Справка + +## Содержание + +[TOC] + +## Свойства с хаками + +### b-radius + +Устанавливает радиус скругления уголков рамки. Если рамка не задана, то +скругление также происходит и с фоном + +#### Синтаксис + + b-radius <радиус>{1,4} + +вывод в css + + border-radius: <радиус>{1,4} + +1. Радиус указывается для **всех** четырех уголков. +2. Первое значение задает радиус **верхнего левого** и **нижнего правого** уголка, + второе значение — верхнего правого и нижнего левого уголка. +3. Первое значение задает радиус для **верхнего левого уголка**, второе — + одновременно для **верхнего правого и нижнего левого**, а третье — для + **нижнего правого уголка**. +4. По очереди устанавливает радиус для **верхнего левого, верхнего правого, + нижнего правого и нижнего левого** уголка. + +#### Хак + +Автоматически подставляються хаки: + +* -webkit-border-radius +* -moz-border-radius +* -o-border-radius +* -ms-border-radius +* -khtml-border-radius + +### bx-shadow + +Добавляет тень к элементу. Допускается использовать несколько теней, указывая их +параметры через запятую, при наложении теней первая тень в списке будет выше, +последняя ниже. Если для элемента задается радиус скругления через свойство +`border-radius`, то тень также получится с закругленными уголками. Добавление +тени увеличивает ширину элемента, поэтому возможно появление горизонтальной +полосы прокрутки в браузере. + +#### Синтаксис + + bx-shadow none | <тень> [,<тень>]* + где <тень>: + inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет> + +вывод в css + + box-shadow: none | <тень> [,<тень>]* + где <тень>: + inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет> + +#### Значения + +Значение |Описание +:-------------|:------------ +none |Отменяет добавление тени. +inset |Тень выводится внутри элемента. Необязательный параметр. +сдвиг по x |Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр. +сдвиг по y |Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр. +размытие |Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой. +растяжение |Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент. +цвет |Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр. + +#### Хак + +Автоматически подставляються хаки: + +* -moz-box-shadow +* -webkit-box-shadow + +### l-gradient + +Создаёт линейный градиент. + +#### Синтаксис + + l-gradient [<угол> | <позиция> ,] <цвет> [, <цвет>]* + +вывод в css + + background-image: linear-gradient([<угол> | <позиция> ,] <цвет> [, <цвет>]*); + +#### Значения + +<угол> +: См. угол. + +<цвет> +: Представляет собой значение цвета (см. цвет), за которым идёт + необязательная позиция цвета относительно оси градиента, она задаётся в + процентах от 0% до 100% или в любых других подходящих для CSS единицах. + +<позиция> +: Для записи позиции применяются ключевые слова top, bottom и left, right, а + также их сочетания. Порядок слов не важен, можно написать left top или top + left. В табл. 1 приведены разные позиции и тип получаемого градиента для + цветов #000 и #fff (от чёрного к белому). + +Табл. 1. Типы градиента + +Позиция |Угол |Описание Вид +:-------------|:-------|:-------------- +top |270deg |Сверху вниз. +left |0deg |Слева направо. +bottom |90deg |Снизу вверх. +right |180deg |Справа налево. +top left |-45deg |От левого верхнего угла к правому нижнему. +top right |225deg |От правого верхнего угла к левому нижнему. +bottom left |45deg |От левого нижнего угла к правому верхнему. +bottom right |-225deg |От правого нижнего угла к левому верхнему. + +#### Хак + +Автоматически подставляються хаки: + +* -moz-linear-gradient +* -webkit-linear-gradient +* -o-linear-gradient +* -ms-linear-gradient + +### r-l-gradient + +Создаёт повторяющийся линейный градиент. + +#### Синтаксис + + r-l-gradient [<угол> | <позиция> ,] <цвет> [, <цвет>]* + +вывод в css + + background-image: repeating-linear-gradient([<угол> | <позиция> ,] <цвет> [, <цвет>]*); + +#### Значения + +<угол> +: См. угол. + +<цвет> +: Представляет собой значение цвета (см. цвет), за которым идёт + необязательная позиция цвета относительно оси градиента, она задаётся в + процентах от 0% до 100% или в любых других подходящих для CSS единицах. + +<позиция> +: Для записи позиции применяются ключевые слова top, bottom и left, right, а + также их сочетания. Порядок слов не важен, можно написать left top или top + left. В табл. 1 приведены разные позиции и тип получаемого градиента для + цветов #000 и #fff (от чёрного к белому). + +Табл. 1. Типы градиента + +Позиция |Угол |Описание Вид +:-------------|:-------|:-------------- +top |270deg |Сверху вниз. +left |0deg |Слева направо. +bottom |90deg |Снизу вверх. +right |180deg |Справа налево. +top left |-45deg |От левого верхнего угла к правому нижнему. +top right |225deg |От правого верхнего угла к левому нижнему. +bottom left |45deg |От левого нижнего угла к правому верхнему. +bottom right |-225deg |От правого нижнего угла к левому верхнему. + +#### Хак + +Автоматически подставляються хаки: + +* -moz-repeating-linear-gradient +* -webkit-repeating-linear-gradient +* -o-repeating-linear-gradient +* -ms-repeating-linear-gradient + +### bg-clip + +Определяет, как цвет фона или фоновая картинка должна выводиться под границами. +Эффект заметен при прозрачных или пунктирных границах. + +#### Синтаксис + + bg-clip: [padding-box | border-box | content-box] [, [padding-box | border-box | content-box]] + +вывод в css + + background-clip: [padding-box | border-box | content-box] [, [padding-box | border-box | content-box]] + +#### Значения + +padding-box +: Фон отображается внутри границ. + +border-box +: Фон выводится под границами. + +content-box +: Фон отображается только внутри контента. + +Значений может быть несколько (для каждого из множественных фоновых рисунков), +при этом значения разделяются между собой запятой. + +#### Хак + +Автоматически подставляються хаки: + +* -webkit-background-clip +* -moz-background-clip + +### bg-size + +Определяет, как цвет фона или фоновая картинка должна выводиться под границами. +Эффект заметен при прозрачных или пунктирных границах. + +#### Синтаксис + + bg-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain + +вывод в css + + background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain + +#### Значения + +<значение> +: Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры + (cm), em и др. + +<проценты> +: Задает размер фоновой картинки в процентах от ширины или высоты элемента. + +auto +: Если задано одновременно для ширины и высоты (auto auto), размеры фона + остаются исходными; если только для одной стороны картинки (100px auto), то + размер вычисляется автоматически исходя из пропорций картинки. + +cover +: Масштабирует изображение с сохранением пропорций так, чтобы его ширина или + высота равнялась ширине или высоте блока. + +contain +: Масштабирует изображение с сохранением пропорций таким образом, чтобы + картинка целиком поместилась внутрь блока. + +Если установлено одно значение, оно задает ширину фона, второе значение +принимается за auto. Пропорции картинки при этом сохраняются. Использование двух +значений через пробел задает ширину и высоту фоновой картинки. + +#### Хак + +Автоматически подставляються хаки: + +* -moz-background-size +* -webkit-background-size +* -o-background-size + +### transit + + + +## Синонимы свойств + +Короткие синонимы свойств css. + +### margin + +Устанавливает величину отступа от каждого края элемента. Отступом является +пространство от границы текущего элемента до внутренней границы его +родительского элемента. + +[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/margin) + +#### Синонимы + +CSS | Stylus +:-------------------|---------- +margin: 1px; | -m 1px +margin-top: 1px; | -mt 1px +margin-bottom: 1px; | -mb 1px +margin-left: 1px; | -ml 1px +margin-right: 1px; | -mr 1px + + +### padding + +Устанавливает значение полей вокруг содержимого элемента. Полем называется +расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, +ограничивающего его содержимое + +[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/padding) + +#### Синонимы + +CSS | Stylus +:--------------------|---------- +padding: 1px; | -p 1px +padding-top: 1px; | -pt 1px +padding-bottom: 1px; | -pb 1px +padding-left: 1px; | -pl 1px +padding-right: 1px; | -pr 1px + + +### width + +Устанавливает ширину блочных или заменяемых элементов (к ним, например, +относится тег ``). Ширина не включает толщину границ вокруг элемента, +значение отступов и полей. + +[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/width) + +#### Синонимы + +CSS | Stylus +:---------------|---------- +width: 1px; | -w 1px +max-width: 1px; | -wmax 1px +min-width: 1px; | -wmin 1px + + +### height + +Устанавливает высоту блочных или заменяемых элементов (к ним, например, +относится тег ``). Высота не включает толщину границ вокруг элемента, +значение отступов и полей. + +[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/height) + +#### Синонимы + +CSS | Stylus +:----------------|---------- +height: 1px; | -h 1px +max-height: 1px; | -hmax 1px +min-height: 1px; | -hmin 1px + + +### border + +Универсальное свойство border позволяет одновременно установить толщину, стиль и +цвет границы вокруг элемента. + +[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/border) + +#### Синонимы + +CSS | Stylus +:------------------------------------|--------------- +border: 1px solid; | -br 1px solid +border-top: 1px solid; | -brt 1px solid +border-top-color: #000 | -brtc #000 +border-top-style: solid | -brts solid +border-top-width: 1px | -brtw 1px +border-bottom: 1px solid; | -brb 1px solid +border-bottom-color: #000 | -brbc #000 +border-bottom-style: solid | -brbs solid +border-bottom-width: 1px | -brbw 1px +border-left: 1px solid; | -brl 1px solid +border-left-color: #000 | -brlc #000 +border-left-style: solid | -brls solid +border-left-width: 1px | -brlw 1px +border-right: 1px solid; | -brr 1px solid +border-right-color: #000 | -brrc #000 +border-right-style: solid | -brrs solid +border-right-width: 1px | -brrw 1px +border-collapse: collapse | -brcol collapse + +### background + +Универсальное свойство background позволяет установить одновременно до пяти +характеристик (`attachment`, `color`, `image`, `position`, `repeat`) фона. +Значения могут идти в любом порядке, браузер сам определит, какое из них +соответствует нужному свойству. + +[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/background) + +#### Синонимы + +CSS | Stylus +:-------------------------------|-------------- +background: while; |-bg while +background-attachment: fixed; |-bga fixed +background-color: while; |-bgc while +background-image: none; |-bgi none +background-origin: content-box; |-bgo content-box +background-position: left; |-bgp left +background-repeat: repeat-x; |-bgr repeat-x + +### color + + Определяет цвет текста элемента. + +#### Синоним + +CSS: + + color: while; + +Stylus: + + -c while + + +### display + +Многоцелевое свойство, которое определяет, как элемент должен быть показан в +документе. + +[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/display) + +#### Синоним + +CSS: + + display: none; + +Stylus: + + -d none + + +### float + +Определяет, по какой стороне будет выравниваться элемент, при этом остальные +элементы будут обтекать его с других сторон. Когда значение свойства `float` +равно `none`, элемент выводится на странице как обычно, при этом допускается, +что одна строка обтекающего текста может быть на той же линии, что и сам элемент. + +#### Синоним + +CSS: + + float: left; + +Stylus: + + -fl left + + +### font + +Универсальное свойство, которое позволяет одновременно задать несколько +характеристик шрифта и текста. + + -f [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit + +[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/font) + +### text + +Универсальное свойство, которое позволяет одновременно задать несколько +характеристик шрифта и текста. + + -f [text-style||text-variant||text-weight] text-size [/line-height] text-family | inherit + +[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/text) + +#### Синонимы + +CSS | Stylus +:-------------------------|------------------ +font: 12pt sans-serif; |-f 12pt sans-serif +font-family: sans-serif; |-ff sans-serif +font-size: 12pt; |-fs 12pt +font-style: italic; |-fst italic +font-variant: small-caps; |-fv small-caps +font-weight: 700; |-fw 700 + +### z-index + +Любые позиционированные элементы на веб-странице могут накладываться друг на +друга в определенном порядке, имитируя тем самым третье измерение, +перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше +других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это +свойство работает только для элементов, у которых значение position задано как +absolute, fixed или relative. + +#### Синоним + +CSS: + + z-index: 1000; + +Stylus: + + -z 1000 + diff --git a/README.md b/README.md new file mode 100644 index 0000000..4064590 --- /dev/null +++ b/README.md @@ -0,0 +1,43 @@ +ShortCSS +======== + +Библиотека [Stylus](http://learnboost.github.io/stylus/) для короткой записи CSS-свойств + +Stylus: + + body + -bgc #000 + -c #fff + + #content + -ff sans-serif + + #element + -d block + -w 150 + -h 100 + b-radius 7px + -br 1px solid #eee + +CSS: + + body { + background-color: #000; + color: #fff; + } + #content { + font-family: sans-serif; + } + #element { + display: block; + width: 150; + height: 100; + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + -o-border-radius: 7px; + -ms-border-radius: 7px; + -khtml-border-radius: 7px; + border-radius: 7px; + border: 1px solid #eee; + } + diff --git a/ShortCSS.styl b/ShortCSS.styl new file mode 100644 index 0000000..e1d1314 --- /dev/null +++ b/ShortCSS.styl @@ -0,0 +1,240 @@ +// Synonym + +// margin +-m() + margin arguments +-mt() + margin-top arguments +-mb() + margin-bottom arguments +-ml() + margin-left arguments +-mr() + margin-right arguments + +// padding +-p() + padding arguments +-pt() + padding-top arguments +-pb() + padding-bottom arguments +-pl() + padding-left arguments +-pr() + padding-right arguments + +// width +-w() + width arguments +-wmin() + min-width arguments +-wmax() + max-width arguments + +// height +-h() + height arguments +-hmin() + min-height arguments +-hmax() + max-height arguments + +// position +-pos() + position arguments +-t() + top arguments +-l() + left arguments +-b() + bottom arguments +-r() + right arguments + +// background +-bg() + background arguments +-bga() + background-attachment arguments +-bgc() + background-color arguments +-bgi() + background-image arguments +-bgo() + background-origin arguments +-bgp() + background-position arguments +-bgr() + background-repeat arguments + +// border +-br() + border arguments +-brc() + border-color arguments +-brs() + border-style arguments +-brw() + border-width arguments + +-brt() + border-top arguments +-brtc() + border-top-color arguments +-brts() + border-top-style arguments +-brtw() + border-top-width arguments + +-brb() + border-bottom arguments +-brbc() + border-bottom-color arguments +-brbs() + border-bottom-style arguments +-brbw() + border-bottom-width arguments + +-brl() + border-left arguments +-brlc() + border-left-color arguments +-brls() + border-left-style arguments +-brlw() + border-left-width arguments + +-brr() + border-right arguments + +-brcol() + border-collapse arguments + + +//color +-c() + color arguments + +//display +-d() + display arguments + +//float +-fl() + float arguments + +//font +-f() + font arguments +-ff() + font-family arguments +-fs() + font-size arguments +-fst() + font-style arguments +-fv() + font-variant arguments +-fw() + font-weight arguments + +//text +-td() + text-decoration arguments +-ts() + text-shadow arguments +-ta() + text-align arguments +-to() + text-overflow arguments + +//list +-lis() + list-style arguments +-lip() + list-style-position arguments + + +-lh() + line-height arguments + +//vertical-align +-va() + vertical-align arguments + +//z-index +-z() + z-index arguments + + +// Hacks + +b-radius() + -webkit-border-radius: arguments + -moz-border-radius: arguments + -o-border-radius: arguments + -ms-border-radius: arguments + -khtml-border-radius: arguments + border-radius: arguments + +l-gradient() + -bgi -moz-linear-gradient(arguments) + -bgi -webkit-linear-gradient(arguments) + -bgi -o-linear-gradient(arguments) + -bgi -ms-linear-gradient(arguments) + -bgi linear-gradient(arguments) + +r-l-gradient() + -bgi -moz-repeating-linear-gradient(arguments) + -bgi -webkit-repeating-linear-gradient(arguments) + -bgi -o-repeating-linear-gradient(arguments) + -bgi -ms-repeating-linear-gradient(arguments) + -bgi repeating-linear-gradient(arguments) + +r-gradient() + -bgi -moz-radial-gradient(arguments) + -bgi -webkit-radial-gradient(arguments) + -bgi -o-radial-gradient(arguments) + -bgi -ms-radial-gradient(arguments) + -bgi radial-gradient(arguments) + +bx-shadow() + -moz-box-shadow arguments + -webkit-box-shadow arguments + box-shadow arguments + +bg-clip() + -webkit-background-clip arguments + -moz-background-clip arguments + background-clip arguments + +bg-size() + -moz-background-size arguments + -webkit-background-size arguments + -o-background-size arguments + background-size arguments + +transit() + -webkit-transition arguments + -moz-transition arguments + -o-transition arguments + transition arguments + +opacit() + -ms-filter unquote('"progid:DXImageTransform.Microsoft.Alpha(Opacity='+arguments*100+')"') + filter unquote('alpha(opacity='+arguments*100+')') + -moz-opacity arguments + -khtml-opacity arguments + opacity arguments + +_h16 = 'h1,h2,h3,h4,h5,h6' +_h15 = 'h1,h2,h3,h4,h5' +_h14 = 'h1,h2,h3,h4' +_h13 = 'h1,h2,h3' + +_h26 = 'h2,h3,h4,h5,h6' +_h25 = 'h2,h3,h4,h5' +_h24 = 'h2,h3,h4' + +_h36 = 'h3,h4,h5,h6' +_h35 = 'h3,h4,h5'