flex-boy v0.1.0

UNDER DEVELOPMENT

Flexboy

This is a Flexbox library to structure html templates easily!

Motivation

I like the Angular Material library and the approach using directives based on Flexbox, is amazing really. But sometimes we can't to use Angular Material, because sometimes we should to use another library or template. Thinking about that, I have created this library to independently which template we've to use, we'll can to use Flexbox semanticly and easily, into any project. \o/

Features

• Writes all using just css classes
• Support to flex-direction, justify-content, align-items, flex-wrap and flex-basis.
  • support to other properties is under development.
• Support to responsive classes
• Support for autoprefixer

How to install

npm install --save flex-boy

We have to publish on npm yet

Get started

<div class="green flex-column flex-15 flex-center">
    <span>Sidenav</span>
</div>
    
<div class="flex-column flex-85">

     <div class="coral flex-10 flex-center">
        <span>Toolbar</span> 
    </div>

    <div class="blue flex-90 flex-center">
        <span>Content</span> 
    </div>

</div>

The result is:

The code above you can see here.

Documentation

Basic

Flexboy is purely Flexbox, then everything you can do with Flexbox, you can do with Flexboy!

The basic structure to do anything with this library is:

<div class="flex-row|flex-column">
     <div class="flex-100" ></div>
</div> 

API Reference

All Flexboy's classes always start with flex prefix.

Directions

flex-column

   flex-direction: column

flex-row

   flex-direction: row

Wrap

flex-wrap

    flex-wrap: wrap 

Alignment

flex-start or flex-start-start

   justify-content: flex-start
   align-items: flex-start

flex-start-center

   justify-content: flex-start
   align-items: center

flex-start-end

   justify-content: flex-start
   align-items: flex-end

flex-center-start

   justify-content: center
   align-items: flex-start

flex-center or flex-center-center

   justify-content: center
   align-items: center

flex-center-end

   justify-content: center
   align-items: flex-end

flex-end-start

   justify-content: flex-end
   align-items: flex-start

flex-end-center

   justify-content: flex-end
   align-items: center

flex-end or flex-end-end

   justify-content: flex-end
   align-items: flex-end

Basis

The Flexboy's basis are values from 5 to 100 (Multiples of five)

For example:

flex-5

    flex-basis: 5

Or

flex-100

    flex-basis: 100

Responsive

Flexboy uses prefixes to manage which classes should be used for each resolution.

Usage

Add the responsive prefix to the classes to use on specific resolution, for example:

flex-[responsive prefix]-[property]

flex-md-center

Responsive Table

How to run

To run the Flexboy at your machine:

npm install

gulp

Contributions

Contributions is very welcome. If you want to contribute just follow the steps:

• Fork this repository
• Make your changes :p
• Create a branch for your changes in this repository
• Create a Pull Request to your created branch as target

Enjoy!