Helpers CSS Framework
Useful tools for web development.
Version 1.2
Version 1.2
Helpers CSS uses basically six different types of HTML attributes:
Helpers CSS can help you to remove repetition and leave the classes just for specific elements. It's based on HTML6, DRY and SMACSS concepts and can be compiled with SASS. The helpers attributes will definitely help you to scale your code.
It's easy to use, simple and scalable.
Can you feel the future? HTML6 advantages are expecting for you!
<p text="gray-80 normal center">
<span text="bold underline big line-1 red">
Can you
</span> feel the
<span text="italic blue semi-bold">
future
</span>? HTML6
<span text="pre white-80 line-1.5" layout="navy few-rounded inline-block"> advantages </span>
are expecting for
<span text="bolder">you</span>!
</p>
Tip: check the source-code of this page!
| Weight | text="thin" |
font-weight: 100 |
text="light" |
font-weight: 300 | |
text="normal" |
font-weight: normal | |
text="semi-bold" |
font-weight: semi-bold | |
text="bold" |
font-weight: bold | |
text="bolder" |
font-weight: bolder | |
| Size | text="smaller" |
font-size: 75% |
text="small" |
font-size: 85% | |
text="big" |
font-size: 125% | |
text="bigger" |
font-size: 145% | |
text="giant" |
font-size: 250% | |
| Family | text="ubuntu" |
font-family: Ubuntu, "times new roman", times, serif |
text="arial" |
font-family: Arial, Helvetica, sans-serif | |
text="lucida" |
"Lucida Sans Unicode", "Lucida Grande", Lucida, sans-serif | |
text="tahoma" |
font-family: Tahoma, sans-serif | |
text="trebuchet" |
font-family: Trebuchet, "Trebuchet MS", Arial, Helvetica, sans-serif | |
text="verdana" |
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif | |
text="georgia" |
font-family: Georgia, Times, serif | |
text="helvetica" |
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif | |
text="mono" |
font-family: 'Courier New', monospace | |
text="times" |
font-family: "Times New Roman", Times, serif | |
text="impact" |
font-family: Impact, Charcoal, sans-serif | |
Colors text="blue" |
||
| Alignment | text="left" |
text-align: left |
text="center" |
text-align: center | |
text="right" |
text-align: right | |
text="justify" |
text-align: justify | |
| Variations | text="italic" |
font-style: italic |
text="upper" |
text-transform: uppercase | |
text="lower" |
text-transform: lower | |
text="capitalize" |
text-transform: capitalize | |
text="overline" |
text-decoration: overline | |
text="line-through" |
text-decoration: line-through | |
text="underline" |
text-decoration: underline | |
text="no-decoration" |
text-decoration: no-decoration | |
text="small-caps" |
text-variant: small-caps | |
| Wrap/Space | text="indent" |
text-indent: 25px |
text="break-all" |
word-break: break-all |
|
text="keep-all" |
word-break: keep-all |
|
text="break-word" |
word-wrap: break-word |
|
text="nowrap" |
white-space: nowrap |
|
text="pre" |
white-space: pre |
|
text="pre-wrap" |
white-space: pre-wrap ; |
|
text="pre-line" |
white-space: pre-line ; |
|
| Direction | text="rtl" |
direction: rtl |
text="ltr" |
direction: ltr | |
Opacity layout="opacity-10" |
||
Radius layout="rounded" |
||
Background layout="blue" |
||
Padding layout="padding-15" |
|
|
Margin layout="margin-15" |
|
|
Margin Directionlayout="top-15"
layout="bottom-15"
layout="left-15"
layout="right-15"
|
||
| Position | layout="absolute" |
position: absolute |
layout="fixed" |
position: fixed | |
layout="static" |
position: static | |
layout="relative" |
position: relative | |
layout="top" |
top: 0 | |
layout="bottom" |
bottom: 0 | |
layout="left" |
left: 0 | |
layout="right" |
right: 0 | |
| Alignment | layout="center" |
margin-left: auto; margin-right: auto |
layout="left" |
float: left | |
layout="right" |
float: right | |
layout="clear" |
clear: both | |
layout="clear-left" |
clear: left | |
layout="clear-right" |
clear: right | |
| Blocks | layout="fix" |
automatically clear its child elements (clearfix) |
layout="block" |
display: block | |
layout="inline-block" |
display: inline-block | |
layout="table" |
display: table | |
layout="table-cell" |
display: table-cell | |
layout="first" |
margin-left: 0 | |
layout="last" |
margin-right: 0 | |
layout="start" |
margin-top: 0 | |
layout="end" |
margin-bottom: 0 | |
| Resets | layout="no-margin" |
margin: 0 |
layout="no-padding" |
padding: 0 | |
layout="no-border" |
border: 0 | |
layout="no-radius" |
border-radius: 0 | |
layout="no-top" |
margin-top: 0 !important | |
layout="no-bottom" |
margin-bottom: 0 !important | |
layout="no-left" |
margin-left: 0 !important | |
layout="no-right" |
margin-right: 0 !important | |
| Overflow | layout="no-overflow" |
overflow: hidden |
| Lists | layout="flat" |
margin-left: 0; list-style: none |
| Size | layout="half" |
width: 50% |
layout="full-width" |
width: 100% | |
layout="full-height" |
height: 100% | |
| Z-Index | ||
onprint="[...]"
|
@media print |
onmobile="[...]"
|
@media (max-width: 480px) |
ontablet="[...]"
|
@media (max-width: 768px) |
onnetbook="[...]"
|
@media (max-width: 992px) |
ondesktop="[...]"
|
@media (max-width: 1200px) |
onprint="hidden"
onmobile="hidden"
ontablet="hidden"
onnetbook="hidden"
ondesktop="hidden"
|
display: none |
onprint="inline"
onmobile="inline"
ontablet="inline"
onnetbook="inline"
ondesktop="inline"
|
display: inline |
onprint="inline-block"
onmobile="inline-block"
ontablet="inline-block"
onnetbook="inline-block"
ondesktop="inline-block"
|
display: inline-block |
onprint="block"
onmobile="block"
ontablet="block"
onnetbook="block"
ondesktop="block"
|
display: block |
onprint="left"
onmobile="left"
ontablet="left"
onnetbook="left"
ondesktop="left"
|
float: left |
onprint="right"
onmobile="right"
ontablet="right"
onnetbook="right"
ondesktop="right"
|
float: right |
onprint="no-float"
onmobile="no-float"
ontablet="no-float"
onnetbook="no-float"
ondesktop="no-float"
|
float: none |
onprint="clear"
onmobile="clear"
ontablet="clear"
onnetbook="clear"
ondesktop="clear"
|
clear: both |
onprint="clear-left"
onmobile="clear-left"
ontablet="clear-left"
onnetbook="clear-left"
ondesktop="clear-left"
|
clear: left |
onprint="clear-right"
onmobile="clear-right"
ontablet="clear-right"
onnetbook="clear-right"
ondesktop="clear-right"
|
clear: right |
