CSS-фреймворк CMS имеет набор микро-классов, которые ползволяют ускорять верстку сайтов. Все микроклассы поддерживают префиксы для разных разрешений экранов. Все микро-классы можно комбинировать.
Для генерации сетки в вашем scss файле должны быть следующие строки:
padd[номер] — padding со всех сторон
vpadd[номер] — padding сверху и снизу
hpadd[номер] — padding слева и справа
ptop[номер] — padding сверху
pright[номер] — padding справа
pbottom[номер] — padding снизу
pleft[номер] — padding слева
В качестве номера доступны следующие варианты:0, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40
marg[номер] — margin со всех сторон
vmarg[номер] — margin сверху и снизу
hmarg[номер] — margin слева и справа
mtop[номер] — margin сверху
mleft[номер] — margin справа
mbottom[номер] — margin снизу
mleft[номер] — margin слева
В качестве номера доступны следующие варианты: 0, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40
.solid[число] — включение сплошной рамки со всех сторон, где число это толщина рамки в пикселях (доступны значения от 1 до 5)
.dashed[число] — включение пунктирной рамки со всех сторон, где число это толщина рамки в пикселях
.dotted[число] — включение пунктирной (точки) рамки со всех сторон, где число это толщина рамки в пикселях
.solid[число]-top — включение сплошной рамки сверху
.solid[число]-right — включение сплошной рамки справа
.solid[число]-bottom — включение сплошной рамки снизу
.solid[число]-left — включение сплошной рамки слева
Аналогично для dashed и dotted. Стоит отметить, что для отображения рамки необходимо будет дать еще цвет.
fs[номер] — где номер это размер шрифта в px (может быть от 10 до 60)
lh[номер] — где номер это line-height шрифта в em (может быть от 10 до 20). 10 = 1.0em. 15 = 1.5em.
Выравнивание текста:
tac — по центру
tal —по левому краю
tar — по правому краю
bold — жирный
italic — наклонный
underline — подчеркнутый
ttn — text-transform: none
ttu — text-transform: uppercase
ttl — text-transform: lowercase
ttc — text-transform: capitalize
.fw[число] — font-weight: [число]; Доступные значения: от 100 до 900 с шагом 100. Имейте ввиду, что соответствующие начертания должны быть у шрифта.
ls[число] — межбуквенное расстояние где [число] в px (доступны значения от 0 до 9)
pa — position: absolute;
pr — position: relative;
pa-tl — top: 0; left: 0;
pa-tr — top: 0; right: 0;
pa-bl — bottom: 0; left: 0;
pa-br — bottom: 0; right: 0;
rad[число] — скругление всех углов где число это радиус в px (доступны значения от 3 до 13 и 200).
rad[число]-tl — скругление только левого верхнего угла
rad[число]-tr — скругление только правого верхнего угла
rad[число]-bl — скругление только левого нижнего угла
rad[число]-br — скругление только правого верхнего угла
transp[число] — где число это прозрачность в % (доступны значения от 0 до 100 с шагом 10).
op[число] — где число это непрозрачность в % (доступны значения от 0 до 100 с шагом 10).
db — display: block;
dn — display: none;
dib — display: inline-block;
fl — float: left;
fr — float: right;
cb — clear: both;
wsnw — white-space: nowrap;
wsn — white-space: normal;
ofa — overflow: hidden;
ofh — overflow: auto;
.trans0[число] — transition: all 0.[число]s; (доступны значения от 3 до 9)