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.
b
— blocki
, icon-
— icons t
— textw
— widthh
— heightbg
— background-colorgr
— gradientsva
— vertical-alignbor
— bordermar
— marginpos
— positionpad
— paddinghide
— invisibilityflex
— flexlayout
— layoutshadow
— shadowsvisible
— visibilityrounded
— roundedmy-
— my classeshover-
— for :hover
px
— pxem
— emrem
— 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-small
— small screens (480px)-phone
— for phone (640px)-tablet
— for tablet (768px)-medium
— medium screens (1024px)-desktop
— for desktops (1100px)-large
— large screens ( > 1100px)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 downloadw50-tablet
width: 50%
for tabletb-hide
display: none
hover-bg-red
.bg-red:hover { .bg-red; }
In use as a separator -
(minus). If the «-» is a number, the less falls: wrong - .w-10
; right - .w10
.