Skip to content

Simple utility for working with CSS3 Flex property

License

Notifications You must be signed in to change notification settings

dcohenb/simple-flex

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Simple Flex

Simple flex is a utility built to ease layout development with flex box It has classes made to simplify layout development using classes only

Basic usage

Just add sf class to the element and then add any of the alignment classes. for example:

<nav class="sf msb">
    <a class=""></a>
    <a class=""></a>
    ...
</nav>

Add the following classes for advanced use:

  • column - Convert the container a column
  • inline - Convert the container to a inline-flex element
  • wrap - make the elements in the container wrap when there is not enough space

Alignment

Simple flex gives you a list of simple classes to align your content in the container

       t - top      |l - left
                    |
                    |
---------------------------------------
                    |
     m - middle     |    c - center
                    |
---------------------------------------
                    |
                    |
     b - bottom     |        r - right

Using combinations of those classes you can align the content of the container in any direction. Simple flex also has built in combinations of all the alignment classes allowing you to easily control positioning of the content in your container

                    |                      |
    tl - top left   |    tc - top center   |   tr - top right
                    |                      |
------------------------------------------------------------------
                    |                      |
  ml - middle left  |  mc - middle center  |  mr - middle right
                    |                      |
------------------------------------------------------------------
                    |                      |
  bl - bottom left  |  bc - bottom center  |  br - bottom right
                    |                      |

Simple flex also supports advanced flex based alignment:

.sb - space-between
.tsb - top space-between
.msb - middle space-between
.bsb - bottom space-between

.sa - space-around
.tsa - top space-around
.msa - middle space-around
.bsa - bottom space-around

Columns

Simple flex has support for basic grids, it has an optional 12 columns grid, use classes c1-c12 for column width:

<div class="sf">
    <div class="c6">column 1/2</div>
    <div class="c6">column 1/2</div>
</div>
<div class="sf">
    <div class="c4">column 1/3</div>
    <div class="c4">column 1/3</div>
    <div class="c4">column 1/3</div>
</div>
<div class="sf">
    <div class="c4">column 1/3</div>
    <div class="c8">column 2/3</div>
</div>
<div class="sf">
    <div class="c3">column 1/4</div>
    <div class="c3">column 1/4</div>
    <div class="c3">column 1/4</div>
    <div class="c3">column 1/4</div>
</div>
|                             |                             |
|         column 1/2          |         column 1/2          |
|                             |                             |
-------------------------------------------------------------
|                   |                   |                   |
|    column 1/3     |    column 1/3     |    column 1/3     |
|                   |                   |                   |
-------------------------------------------------------------
|                   |                                       |
|    column 1/3     |               column 2/3              |
|                   |                                       |
-------------------------------------------------------------
|              |              |              |              |
|  column 1/4  |  column 1/4  |  column 1/4  |  column 1/4  |
|              |              |              |              |

Text Alignment

Simple text alignment helpers are also available

<div class="sa-left">left</div>
<div class="sa-center">center</div>
<div class="sa-right">right</div>

Spacing

Simple Spacing for elements

Available spacing modes:
    margin / padding

Built in sizes:
    none: 0rem
    xs: 0.333rem
    sm: 0.666rem
    md: 1rem
    lg: 1.333rem
    xl: 1.666rem
    xxl: 2rem

sides:
    all / top / right / bottom / left / tb (top & bottom) / lr (left & right)

example:
    <div class="padding-all-sm">small padding from all sides</div>
    <div class="margin-lr-xs">extra small margin from left and right</div>
    <div class="padding-top-xs padding-bottom-small">extra small padding from top and small from bottom</div>
    <div class="margin-children-all-xs">Gives all direct children BUT THE LAST spacing</div>

Installation

Simply import the css file to your project and start using Simple flex

Development: 
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dcohenb/simple-flex@master/dist/simple-flex.css">

Production: 
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dcohenb/simple-flex@v0.1.1/dist/simple-flex.css">

License

MIT

Copyright (c) 2017-present, Daniel Cohen

About

Simple utility for working with CSS3 Flex property

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages