Atomic.CSS { Css/Sass: Framework; }

ACSS Framework ~ Uni(versal) Atomic CSS
Скачать GitHub

Atomic CSS — это методика CSS-верстки, основанная на использовании атомарных утилитарных классов

В Atomic СSS каждому (почти) СSS свойству соответствует свой отдельный класс, что делает его универсальным и простым для использования. С Atomic CSS можно сразу использовать готовые CSS-классы, вместо того, чтобы создавать их каждый раз снова и снова.

UniCSS (Universal Atomic CSS) предлагает сразу несколько готовых решений:

  1. Простую и понятную методику именования CSS-классов.
  2. Готовый для использования CSS-фреймворк с полноценной типографикой, адаптивным дизайном, normalize, FA-иконкам и всем тем, что должно входить в современный css-фреймворк 2019 года.
  3. Полный исходный sass-код для того, чтобы вы легко могли настроить UniCSS под свою задачу.
  4. Онлайн-Builder с помощью которого можно проверить html-код прямо в браузере.

Правила именования

Префиксы css-классов базируются на общепринятных сокращениях так, чтобы было понятно назначение класса.

В качестве разделителя используется символ - (минус). Перед числами и единицами измерения «-» не указывается: верно .w10, .w250px. Неверно - .w-10, .w250-px.

Префиксы:

  • b — block
  • i, icon- — icons
  • t — text
  • w — width
  • h — height
  • bg — background-color
  • gr — gradients
  • lh — line-height
  • va — vertical-align
  • bor — border
  • mar — margin
  • pad — padding
  • pos — position
  • hide — invisibility (скрытие)
  • flex — flex
  • link — links
  • layout — layout
  • shadow — shadows
  • visible — visibility (видимость)
  • rounded — rounded
  • my- — свои классы
  • js- — классы для js

Префикс состояния:

  • hover- — для :hover

Модификаторы:

  • px — px
  • em — em
  • rem — 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 для phone
  • mar25-rl margin-right: 25px;margin-left: 25px
  • t-red color: $red
  • i-download FA-icon
  • w50-tablet width: 50% для tablet
  • b-hide display: none
  • hover-bg-red .bg-red:hover { .bg-red; }
  • Другие примеры
  • Смотреть все классы

Начало работы с UniCSS (Universal Atomic CSS)

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.

Использование Sass-препроцессора

Вы можете настроить UniCSS так, чтобы он содержал только нужные вам css-классы, цвета, размеры и т.п. Для этого в фреймворке используются sass-миксины, которые управляются через единый конфигурационный файл _variables.scss.

См. Настройка UniCSS под свою задачу.

© Universal Atomic CSS, 2015-2020