fly-css Helper Classes

fly-css Screenshot

Simple CSS helper classes to assist with minor layout adjustments

I always find myself copying my "Helper-Classes" from one project to another. To collect all the CSS classes which assisted me over the years, I created a repository and shared it on github -

Since the classes should only assist the usage of big CSS-Frameworks like bootstrap or foundation, I tried to keep the file short.

Task List


Description of how the helper classes can be used.


The CSS file contains Box-Model Helpers for padding, margin and border in the following style E.g:

<!-- 5px padding horizontal -->
<div class="pad-5__h"></div>

<!-- 10px margin top -->
<div class="mar-10__to"></div>

<!-- 1px solid bottom border -->
<div class="bor-1__bo"></div>

Display or Hide Element

Set the display attribute to block or hide with the following classes:

<!-- sets display: block-->
<div class="blo"></div>

<!-- sets display: none -->
<div class="hid"></div>

Rotate Element

Set the transform attribute to rotate the Element 90 degrees:

<!-- sets transform: rotate(90deg); -->
<div class="rot-90"></div>


To modify text the classes .bolder and .small are available:

<!-- sets font-weight: bolder; -->
<div class="bolder"></div>

<!-- sets font-family Arial, sans-serif; font-size: 12px; -->
<div class="small"></div>


Use the color classes to set the colors for texts and links:

<div class="black">
This text will be black and also
<a href="#foo">links will be black</a>

<a class="black" href="#foo">Black link text</a>

<div class="bor-1__to bor-black">
This box will have a 1 pixel solid top border