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 - github.com/brachycera/fly-css

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

Add sass support
Change pixel values to em
Add more color tones

Usage

Description of how the helper classes can be used.

Box-Model

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>

Modifier	Description
__h	horizontal
__v	vertical
__to	top
__ri	right
__bo	bottom
__le	left

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>

Fonts

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>

Colors

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>
</div>

<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
</div>

Changelog

v0.1 beta, 15, February 2016