Helpers CSS Framework

Useful tools for web development.

Documentation: https://webarthur.github.io/helpers-css/

How to:

Helpers CSS uses basically six different types of HTML attributes:

Text: <span text="bold italic blue">lorem ipsum</span>

Layout: <div layout="left absolute z-10">lorem ipsum</div>

Devices: <img
            on-mobile="no-float"
            on-tablet="left"
            on-netbook="right"
            on-desktop="hidden" />

Printer: <hr on-print="hidden" />

Columns: <div cols="3"> [...] </div>

Grid: <div grid="5"> [...] </div>

Helpers CSS can help you to remove repetition and leave the classes just for specific elements cofiguration. It's based on HTML6, DRY and SMACSS methodologies and compiled with SASS. The helpers attributes will definitely help you scale your code.

It's easy to use, simple and scalable.

Example:

<p text="gray-80 normal center">
  <span text="bold big line-1 red">
    Can you
  </span> feel the
  <span text="underline 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>

Documentation

The framework's documentation was included in this repo in the root directory, search for index.html file. The docs may also be run locally.

• Text
• Layout
• Mobile/Printer

Author

• Arthur Ronconi

Creative Commons License

Code released under Creative Commons Share-alike, so Helpers CSS is absolutely free. It's open-source: you can copy, merge, publish and distribute the framework without any limitations! =D

"Simplicity is the ultimate sophistication" - Leonardo da Vinci