ui-flex
A CSS Library with built in grid using display:flex
Installation
bower install --save ui-flex
Include the following in the <head>
of your <html>
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
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 : row
Example
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
<!-- Start Example --> <!-- End Example -->
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
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
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
.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
.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
.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
.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.
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
or
You can find the resource for these colors in the Goolge Material Design Palette