Universal Atomic CSS framework

UniCSS { Css: Framework }

For flexible, accessible and responsive websites

UniCSS this a simple and effective method of naming css-classes

Framework atomic level (Atomic CSS framework, Atomic Design). Uses Sass. Normalize.css. Adaptive design. Flex (full support). Good typography. Icons FontAwesome. Setting via file (_variables.scss). Online builder.

Prefix:

  • b — block
  • i, icon- — icons
  • t — text
  • w — width
  • h — height
  • bg — background-color
  • gr — gradients
  • va — vertical-align
  • bor — border
  • mar — margin
  • pos — position
  • pad — padding
  • hide — invisibility
  • flex — flex
  • layout — layout
  • shadow — shadows
  • visible — visibility
  • rounded — rounded
  • my- — my classes

The prefixes states

  • hover- — for :hover

Modifier:

  • px — px
  • em — em
  • rem — rem
  • -max — max-size (e.g. max-height)
  • -min — min-size (e.g. min-height)
  • -t — top
  • -r — right
  • -b — bottom
  • -l — left
  • -tb — top and bottom
  • -rl — right and left
  • -imp — !important

Postfix for responsive design

  • -small — small screens (480px)
  • -phone — for phone (640px)
  • -tablet — for tablet (768px)
  • -medium — medium screens (1024px)
  • -desktop — for desktops (1100px)
  • -large — large screens ( > 1100px)

Examples of classes:

  • w34 width: 34%
  • pad10-b padding-bottom: 10px
  • mar25-rl margin-right: 25px; margin-left: 25px
  • t-red color: $red
  • i-download FA-icon for download
  • w50-tablet width: 50% for tablet
  • b-hide display: none
  • hover-bg-red .bg-red:hover { .bg-red; }
  • All css-classes
  • Оther samples

Class Naming Rules

In use as a separator - (minus). If the «-» is a number, the less falls: wrong - .w-10; right - .w10.

© UniCSS — Universal Atomic CSS framework, 2015-2018