В Atomic СSS каждому (почти) СSS свойству соответствует свой отдельный класс, что делает его универсальным и простым для использования. С Atomic CSS можно сразу использовать готовые CSS-классы, вместо того, чтобы создавать их каждый раз снова и снова.
Префиксы css-классов базируются на общепринятных сокращениях так, чтобы было понятно назначение класса.
В качестве разделителя используется символ -
(минус). Перед числами и единицами измерения «-» не указывается: верно .w10
, .w250px
. Неверно - .w-10
, .w250-px
.
b
— blocki
, icon-
— icons t
— textw
— widthh
— heightbg
— background-colorgr
— gradientslh
— line-heightva
— vertical-alignbor
— bordermar
— marginpad
— paddingpos
— positionhide
— invisibility (скрытие)flex
— flexlink
— linkslayout
— layoutshadow
— shadowsvisible
— visibility (видимость)rounded
— roundedmy-
— свои классыjs-
— классы для jshover-
— для :hover
px
— pxem
— emrem
— rem-max
— max-size (например max-height
)-min
— min-size (например min-height
)-t
— top-r
— right-b
— bottom-l
— left-tb
— top и bottom-rl
— right и left-imp
— !important-small
— small screens (480px)-phone
— для phone (640px)-tablet
— для tablet (768px)-medium
— medium screens (1024px)-desktop
— для desktops (1100px)-large
— large screens ( > 1100px)Единицы измерения явно указываются там, где возможна неопределенность. В остальных случаях используются единицы по умолчанию.
w34
width: 34%
pad10-b
padding-bottom: 10px
pad5-b-phone
padding-bottom: 10px
для phonemar25-rl
margin-right: 25px;
margin-left: 25px
t-red
color: $red
i-download
FA-iconw50-tablet
width: 50%
для tabletb-hide
display: none
hover-bg-red
.bg-red:hover { .bg-red; }
UniCSS распространяется в виде готового css-файла, исходного scss-кода и шрифта FontAvesome 4.7. Достаточно скачать файлы, разместить в каталоге сервера, например assets
и подключить в HEAD-секции страницы.
assets/ │ ├── css/ │ └── style.css │ ├── fonts/ │ └── fontawesome/ │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 │ └── sass/ ├── fonts/ │ └── ... │ ├── main/ │ └── ... │ ├── unicss/ │ └── ... │ ├── _variables.scss (настройки) └── style.scss (компилируемый файл)
Каталог sass
нужен, только если вы хотите настроить UniCSS.
Вы можете настроить UniCSS так, чтобы он содержал только нужные вам css-классы, цвета, размеры и т.п. Для этого в фреймворке используются sass-миксины, которые управляются через единый конфигурационный файл _variables.scss
.
См. Настройка UniCSS под свою задачу и Berry - библиотека утилитарных CSS-классов.