Flex-css

Flex css

A simple, lightweight, css library for aligning and orginizing elements

Usage

Placement only (~1.6Kb) 
    
      <link rel="stylesheet" href="https://cdn.rawgit.com/nilestanner/flex-css/master/generated/min/flex-css-placement.css">
Placement with Sizing (~2.5Kb) 
    
      <link rel="stylesheet" href="https://cdn.rawgit.com/nilestanner/flex-css/master/generated/min/flex-css-sizing.css">
Everything with responsive layouts (~10.8Kb) 
    
      <link rel="stylesheet" href="https://cdn.rawgit.com/nilestanner/flex-css/master/generated/min/flex-css-all.css">

Placement

Layout

Attribute: layout

Options:

    
    <div layout="row">
      ...
    </div>

    <div layout="col">
      .
      .
      .
    </div>

Align

Align can take one or two options. When using two options the first option must be the vertical option.

Attribute: align

Vertical options:

Horizontal options:

    
    <div align="top left">
      <!-- ALIGNED TO TOP LEFT -->
    </div>

    <div align="center">
      <!-- ALIGNED TO THE CENTER VERTICALLY AND HORIZONTALLY -->
    </div>

    <div align="right">
      <!-- ALIGNED RIGHT -->
    </div>
    <!-- ETC.  -->

Spacing

Using the spacing attribute will override the horizontal alignment

Attribute: space

Options:

    
    <div space="between">
      |.  .  .|
    </div>

    <div space="around">
      | . . . |
    </div>

Sizing and Ordering

Size

Attribute: size

Options:

    
    <div layout="row">
      <div size="15"></div>
      <div size="60"></div>
      <div size="20"></div>
    </div>

Order

Attribute: order

Options:

    
    <div layout="row">
      <div order="5"></div><!-- ORDERED SECOND -->
      <div></div><!-- ORDERED LAST -->
      <div order="-2"></div><!-- ORDERED FIRST -->
    </div>

Responsive

Responsive Layout

Attributes:

Options:

    
      <div layout-lg="row" layout-sm="col">
        <!-- ON LARGE SCREENS -->
        ...
      </div>

      <div layout-lg="row" layout-sm="col">
        <!-- ON SMALL SCREENS -->
        .
        .
        .
      </div>

Responsive Layout

Attributes:

Vertical options:

Horizontal options:

    
      <div align-lg="top left" align-sm="bottom right">
        <!-- ON LARGE SCREENS ALIGNED TOP LEFT -->
      </div>

      <div align-lg="top left" align-sm="bottom right">
        <!-- ON SMALL SCREENS ALIGNED BOTTOM RIGHT-->
      </div>