A CSS Library with built in grid using display:flex
##Installation
bower install --save ui-flexInclude the following in the <head> of your <html>
<link rel="stylesheet" href="bower_components/ui-flex/dist/ui-flex.css">NOTE Inorder for the library to work properly, make sure your current CSS files are not modifying the min and max widths or min and max heights of any default HTML Element EXAMPLE body, main, div, header, footer, section, aside.
If your css requires that you modify the defaults for HTML elements, then dont't use these elements when using the flex- classes
##Usage
Immediately after the <body> tag create an element with
the .ui-flex Class.
DO NOT PLACE .ui-flex ON THE BODY
*- It will not work. *
Example
<html>
<body>
<div class="ui-flex"></div>
</body>
</html>The .ui-flex class creates a flex-column layout. within this class you can create the following elements
flex-column: One collum contains many rows
.flex-header | flex-basis: $header-height
.flex-body | flex: 1 0 auto
.flex-footer | flex-basis: $footer-height
.flex-header,
.flex-body,
.flex-footer
flex-direction : rowExample
<div class="ui-flex">
<header class="flex-header"></header>
<section class="flex-body"></section>
<footer class="flex-footer"></footer>
</div>A row can have many columns or rows.
Inside the .flex-body you are given a flex row layout, so you can then specify elements that will be flexed within the current row.
.flex-main | flex-direction: column, order 0
.flex-aside,
.flex-aside-left flex-basis $aside-width, order -1
.flex-aside-right flex-basis $aside-width order 1
Dont't worry about the positions of these elements in the Dom,
If you use the .flex-aside-<right or left>
the flex container will know how to properly position the elements.
If you don't use the -left or -right you can use the .order-* class to specify the correct order for each element.
Checkout the API for .order-* for the .order- classes
You can also use Checkout the API for using the .flex-aside-*
That said. . . We can flex two asides for sidebars, and a main area for the center.
Example
<div class="ui-flex">
<header class="flex-header"></header>
<section class="flex-body">
<!-- Start Example -->
<div class="flex-main"></div>
<aside class="flex-aside-left"></aside>
<aside class="flex-aside-right"></aside>
<!-- End Example -->
</section>
<footer class="flex-footer"></footer>
</div>##Flex
The Flex Class is pretty straight forward.
.flex by default , has the CSS property
flex: 1 .flex Will take up all the given room possible, Evenly distributing it's size to it's siblings.
Example
<section clas="flex-row">
<div class="flex"></div>
</section>The inner div will be 100% tall and 100% wide
If we place two divs inside this .flex-row They Will evenly take up all the available space
<section class="flex-row">
<div class="flex"></div>
<div class="flex"></div>
</section>Each inner div will now be 50% wide and 100% tall
The width in this case is known as flex-basis
This will work on up to as many inner elements possible.
##Flex-*
##.flex-{size}
The
.flex-*Grid can be used in the same way Bootstrap's Grid works.
NOTE There are 12 Columns!
.flex-1
.flex-2
.flex-3
.flex-4
.flex-5
.flex-6
.flex-7
.flex-8
.flex-9
.flex-10
.flex-11
.flex-12
You can use .flex- like the following
Example
<section class="flex-row">
<div class="flex-3"></div>
<div class="flex-6"></div>
<div class="flex-3"></div>
</section>##.flex-{media}-{size}
The
.flex-{media}-*Grid can be used in the same way BootStrap's Media Queries work.
@media min-width: $breakpoint-xs
.flex-xs-1
@media min-width: $breakpoint-sm
.flex-sm-1
@media min-width: $breakpoint-md
.flex-md-1
@media min-width: $breakpoint-lg
.flex-lg-1
@media min-width: $breakpoint-xl
.flex-lx-1
You can use .flex-{media}-* like the following
Example
<section class="flex-row">
<div class="flex-xs-2"></div>
<div class="flex-sm-2"></div>
<div class="flex-md-2"></div>
<div class="flex-lg-2"></div>
<div class="flex-xl-4"></div>
</section>##.flex-{offset} - - {size}
Similar to BootStrap's offset classes, Except this is one Class.
.flex-3--6
This will be half the size, and in the center... The first number is the offset size, and the second is the actual size of the element.
.flex-1--1
.flex-2--1
.flex-3--1
.flex-4--1
.flex-5--1
.flex-6--1
.flex-7--1
.flex-8--1
.flex-9--1
.flex-10--1
.flex-11--1
You can use .flex-{offset}--{size} like the following in order to center an element that is half the full width.
Example
<section class="flex-row">
<div class="flex-3--6"></div>
</section>##.flex-{media}-{offset} - - {size}
Similar to BootStrap's offset media classes, Except this is one Class.
@media min-width: $breakpoint-xs
.flex-xs-1--1
@media min-width: $breakpoint-sm
.flex-sm-2--1
@media min-width: $breakpoint-md
.flex-md-3--1
@media min-width: $breakpoint-lg
.flex-lg-4--1
@media min-width: $breakpoint-xl
.flex-xl-5--1
You can use .flex-{media}-{offset}--{size} like the following in order to center an element that is half the full width, even on a mobile screen
Example
<section class="flex-row">
<div class="flex-xs-3--6"></div>
</section>##.flex-header
flex 0 0 $header-height
flex-direction: row
display: flex
order -1
##.flex-body
flex: 1 0 auto
flex-direction: row
display:flex
order 0
##.flex-footer
flex: 0 0 $footer-height
flex-direction: row
display:flex
order 1
##.flex-main
flex 1 0 auto
flex-direction column
display flex
order 0
##.flex-aside
flex-basis $aside-width
flex-direction column
display flex
order -1
##bg-colors
In order to visualize these elements you can add .bg- classes to them for background colors.
<div class="flex-body bg-red"></div>
<div class="flex-body bg-pink"></div>
<div class="flex-body bg-purple"></div>
<div class="flex-body bg-deeppurple"></div>
<div class="flex-body bg-indigo"></div>
<div class="flex-body bg-blue"></div>
<div class="flex-body bg-lightblue"></div>
<div class="flex-body bg-cyan"></div>
<div class="flex-body bg-teal"></div>
<div class="flex-body bg-green"></div>
<div class="flex-body bg-lightgreen"></div>
<div class="flex-body bg-lime"></div>
<div class="flex-body bg-yellow"></div>
<div class="flex-body bg-amber"></div>
<div class="flex-body bg-orange"></div>
<div class="flex-body bg-deeporange"></div>
<div class="flex-body bg-brown"></div>
<div class="flex-body bg-grey"></div>
<div class="flex-body bg-bluegrey"></div>Note You can append the following numbers to any of these given classes
100,200,300,400,500,600,700,800,900
or
A100,A200,A400,A700
For Example
<div class="bg-green"></div>
or
<div class="bg-green-300"></div>You can find the resource for these colors in the Goolge Material Design Palette