flex-system
A fully customizable css grid system framework based on flexbox.
Installation
install with npm:
npm install flex-system
include using cdn.jsdelivr:
Containers
.container
class creates a container that can be used center the content of the webpage.
<!-- to create a container --> <!-- content -->
Breakpoint Name | Breakpoint Range | Container Width |
---|---|---|
Small (Mobile) | < 600px | 100% |
Medium (Tablet) | >= 600px | 85% |
Large (Small Laptops) | >= 992px | 80% |
Larger (Laptops & Desktops) | >= 1200px | 80% |
When you create a container, you have the option to make it either a fixed-width
container, or
liquid-container
which is the default behavior.
To customize the container
width change any of the following css variables:
Fixed Width Container
If you want your container to have a fixed in px
instead of %
, use .fixed-width
class with the .container
class:
<!-- fixed-width container --> <!-- content -->
Breakpoint Name | Breakpoint Range | Container Width |
---|---|---|
Small (Mobile) | < 600px | 100% |
Medium (Tablet) | >= 600px | 510px (85% of 600px ) |
Medium to large (Tablet) | >= 768px <992 | 614.4px (85% of 768px ) |
Large (Small Laptops) | >= 992px | 843.2px (85% of 992px ) |
Larger (Laptops & Desktops) | >= 1200px | 1020px (85% of 1200px ) |
To customize the Fixed width container use any of the following css variables:
/* use this formula to calculate a fixed width for the container --container-var-name: #{(percentage)} * $breakpoint */ :root
Use .flex-sys
class with .container
to reduce conflict if you are using another css framework that uses the same name and you want to use flex-system container.
<!-- flex-system container --> <!-- content -->
Flex Row And Flex Column Containers
.flex-row
and .row-reversed
classes create row containers.
Their children/flex-items flows in a row direction, from left to right if you are using a ltr
language like english.
Or from right to left if you are using a rtl
language like arabic.
Whether you use english or arabic items are going to appear in a row.
<!-- flex row container --> One Two Three <!-- .row-reversed same as .flex-row except the main-start and main-end directions are swapped --> One Two Three
Responsive flex row containers
You can also define a flex row container within a breakpoint range
<!-- row onsmall-only --> One Two Three
Posibilities:
.row-onsmall
: flex row onsmall only.row-onmedium
: flex row onmedium only.row-onlarge
: flex row onlarge only.row-from-larger
: flex row from larger and up
.flex-column
, .column-reversed
classes creates flex column containers.
Flex-items inside a flex column container are stacked on top of each other in a column direction.
<!-- flex column container --> One Two Three <!-- .column-reversed same as .flex-column except the main-start and main-end directions are swapped --> One Two Three
Responsive flex column containers
You can also define a flex column container within a breakpoint range
<!-- column onmedium only --> One Two Three <!-- onsmall stack on top of each other, but from medium and up stay in one row --> item 1 item 2 item 3
Posibilities:
.column-onsmall
: flex column onsmall only.column-onmedium
: flex column onmedium only.column-onlarge
: flex column onlarge only.column-from-larger
: flex column from larger and up
The .inline-flex
class makes an element to be displayed as inline-flex container.
inline flex-row container
Flex Item Shrinking
By default when using flex box, flex items are defined to shrink if there is no space available.
If you want to specify that flex items should not shrink use the .noshrink-each
class with flex row containers, or flex column containers, or .noshrink
with a flex item.
my width will stay fixed me too! me too! not me, i will shrink <!-- .noshrink on individual flex items --> my width will stay fixed if you define it i will shrink
Wrapping Behavior
When using flex-system flex row container's direct children are defined to wrap (go to the next line) if there is no space available to take them on one line.
The .nowrap
class overwrites this behavior.
<!-- these items are going to stay in on line and they will shrink if there is no space available --> item #01 item #02 item #03
.wrap-reversed
specifies that flex items should wrap in a reversed order.
item #01 item #02 item #03
Responsive Wrapping
These are set of classes that specifies that flex items should wrap within a breakpoint range.
Or starting from a breakpoint and up.
<!-- nowrapping on each breakpoint except small --> item #01 item #02 item #03 <!-- wrap from medium screens and up --> item #01 item #02 item #03
Posibilities:
.wrap-onsmall
wrap on small breakpoint only..wrap-onmedium
wrap on medium breakpoint only..wrap-onlarge
wrap on large breakpoint only..wrap-from-medium
wrap from medium devices and up..wrap-from-large
wrap from large devices and up..wrap-from-larger
wrap only starting from larger breakpoint and up.
The .wrap
class specifies that flex container direct children should wrap (go to the next line if necessary).
<!-- flex row containers default behavior of wrapping is to wrap when using flex-system --> item #01 item #02 item #03
Grid System
Grid system classes specifies element width inside a flex row container, and height inside a flex column container.
flex-system is using 12 columns grid system.
flex-system provides symantic easy to use class names for the grid system.
-
.half
means one half, the element will take50%
width if it's parent is a flex row container and50%
height if it's parent is a flex column container. -
.third
:33.33%
-
.fourth
:25%
-
.fill
:100%
Flex row container:
Flex column container:
<!-- flex row container --> .half (50%) .half (50%) .third (33.33%) .third (33.33%) .third (33.33%) .fourth (25%) .fourth (25%) .fourth (25%) .fourth (25%) .fill (100%) <!-- flex column container --> .half (50%) .half (50%) .third (33.33%) .third (33.33%) .third (33.33%) .fourth (25%) .fourth (25%) .fourth (25%) .fourth (25%) .fill (100%)
Imagine that the web page is devided into 12 slices or (columns) as follows:
.slice-1
takes one slice out of 12 slices, .slice-6
takes 6 slices out of 12 slices, and so on.
The .available
class specifies that an element should grow to takes the available space.
one slice out of 12 slices 2 slices out of 12 slice-7 (7 slices)
Responsive Grid
So far, we've been using the global breakpoint to create our layout.
However, we may want to use a responsive grid, to have more control over the web page, across all defferent viewports.
To use responsive grid use one of the following prefexes as a class followed by a number or a name that represenets how many slices do you want your element to take.
onmedium
(for tablets - screens less than 992px wide)onlarge
(for laptops - screens equal to or greater than 992px wide)onlarger
(for large laptops and desktops - screens equal to or greater than 1200px wide)
full width on all viewports <!-- fill, but take 5 slices starting from medium and up, one third from large and up one half onlarger --> fill onmedium-5 onlarge-third onlarger-half 25% onlarge and up
Another Example:
fill onmedium-4 onlarge-2 fill onmedium-4 onlarge-8 fill onmedium-4 onlarge-2
Aliases for grid system classes
Sometimes you may have a long string of classes which is very hard to read and maitain if you have a big project.
That's why a short alias can be very handy.
The aliases are a set of data-*
attributes, and bootstrap grid classes.
data-slice=$value
for global viewport.data-onmedium=$value
for medium viewport.data-onlarge=$value
for large viewport.data-onlarger=$value
for larger viewport.
If you have a long list of classes
instead of writing this:
fill onmedium-5 onlarge-third onlarger-half fill onmedium-4 onlarge-2
You should write this:
fill onmedium-5 onlarge-third onlarger-half fill onmedium-4 onlarge-2 <!-- or --> fill onmedium-4 onlarge-2
This can simplify your code alot!
Customizing The Grid
Lets say that we have two divs and each of them has a .half
class.
As you know .half
is 50%
, but we want 49%
insted.
And we will use the available 2%
to align the two divs.
We need to customize the grid
To customize the grid we should change the --size
, --size-onmedium
, --size-onlarge
, --size-onlarger
values on each class that we want to customize.
There are predefined css variables that can be used to calculate the value.
They are defined in the root level element as follows:
/* to see this in your browser open the inspector and select <html> from the Elements tab */
We will use the --half
variable and as a value for our --size
property.
This can be applied to any other class in the grid system.
You can also change the value from the html but it is not recommended, because it complicates your code.
.half - 5% .half - 5%
If you are using sass, instead of calc(var(--var-name))
you can just use:
--size: calc($half - 5%);
By including this file to your project.
Taking The Available Space
To specify that an element should grow and take the available space use the .available
class:
<!-- (2 slices) --> two slices <!-- the available space (10 slices) --> i'll take the available space
You can also use the .available-each
class on a flex container to ensure that each flex item should grow and take the available space.
<!-- each direct element should take the available space --> item 1 item 2 item 3
Instead of the .available
class you can use data-slice=available
, data-onmedium="available"
and so on.
50% 50%
Take The Available Space On Breakpoint Range
The .available
and the .available-each
classes are also available on all breakpoints.
fill onmedium-half onlarge-8 same as: fill onmedium-half onlarge-4
same as: fill onlarge-half same as: fill onlarge-half
You can use:
data-slice="available"
for global viewport.data-onmedium="available"
for medium viewport.data-onlarge="available"
for large viewport.data-onlarger="available"
for larger viewport.
.available
and .available-each
Customizing The To Customize The .available
and .available-each
use the --portion
.
Some Shortcuts
.flex-initial
resets the item to the initial values of Flexbox, this is the same as using flex: 0 1 auto, in this case the flex item will not grow larger than it's initial size, and the item will shrink if it needs to rather than overflowing.
.flex-auto
this is the same as .flex-initial
but in this case the item can grow and fill the container as well as shrink if required, and this is the same as using flex: 1 1 auto
.flex-none
this will create a fully inflexable flex item. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto.
These classes are also available for all breakpoints:
use these prefexes = [onmedium-
, onlarge-
, onlarger-
].
i'll stretch to take the available space untill larger screens
Element Order
.{$breakpoint}order-$n
classes specifies element order inside the flex parent $n
= [1 - 6
].
$breakpoint
= [onmedium-
, onlarge-
, onlarger-
].
first onmedium and up, third onsmall second <!-- reducing conflict --> first <!-- to customize order classes use .order-6/$breakpiont-order-6 then use --order variable on it --> im the first one
Alignment On The Main Axis
The .{$breakpoint}main-$direction
classes specifies flex items alignment within the flex parent in the main axis direction.
$direction
= [start
, end
, center
].
start
is the default value. and it can be used from medium and up.
The .space-$direction
or .on{$breakpoint}sp-$direction
classes are used to distribute available space in the main axis.
$direction
= [between
, around
, evenly
].
<!-- alignment --> item item item <!-- available space distribution --> flex-item flex-item flex-item
You can use the data-$breakpoint-main=$value
attributes.
<!-- alignment --> item item item <!-- available space distribution --> flex-item flex-item flex-item
Flex Lines Alignment
Flex lines alignment classes sets the distribution of space between and around content items along the cross-axis.
Flex lines alignment classes are the same as main axis alignment classes with some expectations.
- insteade of
main
prefix use theline
prefix. - insteade of
space
prefix use theline-sp-
prefix.
<!-- alignment --> flex-item flex-item flex-item <!-- space distribution --> flex-item flex-item flex-item
You can also use the data-$breakpoint-line=$value
attributes.
<!-- alignment --> flex-item flex-item flex-item <!-- space distribution --> flex-item flex-item flex-item
Alignment On The Cross Axis Classes For Flex Parent
The .{$breakpoint}cross-$direction
classes are used to distribute space in the cross axis of a flex container.
$direction
= [start
, center
, end
, baseline
, stretch
]
item item
You can also use the data-$breakpoint-cross=$value
attributes as follows:
item item
Alignment On The Cross Axis Classes For Flex Item
The .{$breakpoint}self-$direction
classes specifies the distribution of the available space in the cross axis for a flex item.
$direction
= [start
, center
, end
, baseline
, stretch
].
item #01 item #02 item #03
You can also use the data-$breakpoint-self=$value
attributes.
Auto Margins
.{$breakpoint}push-$direction
, classes are used to push an element into a direction.
$direction
= [top
, right
, bottom
, left
, center-x
, center-y
].
i will be pushed to the right vertically centered from medium and up i'll go right onlarger screens and up
You can also use the data-$breakpoint-push=$value
attributes.
Display Toggling Classes
The .none
class and data-display="none"
attribute hides an element.
this element is invisible this element is invisible
After that you can decide to display the element on a breakpoint range or starting from a breakpoint.
respnsive typography
Display On Breakpoint Ranges
The .display-on$breakpoint
classes and data-display-on$breakpoint=$value
attributes displays an element as flex within a breakpoint range.
$breakpoint
= [onsmall
, onmedium
, onlarge
, onlarger
]
i'll be displayed as flex onmedium only <!-- or --> i'll be displayed as flex onmedium only
If you don't want to display the element as flex
use one of the following classes.
.block
displays the element as block..inline-block
displays the element as inline-block..inline-flex
displays the element asinline-flex
container..initial
displays the element with it's initial value of thedisplay
property.
i'll be visible on large screens only as block level element display:none, onlarge display: initial
Display Starting From A Breakpoint
To display an element starting from a breakpoint use the .display-from-{$breakpoint}
classes or data-display-from-$breakpoint=$value
attributes.
$breakpoint
= [onsmall
, onmedium
, onlarge
, onlarger
]
If you don't want to display the element as flex
use one of the following classes.
.block
displays the element as block..inline-block
displays the element as inline-block..inline-flex
displays the element asinline-flex
container..initial
displays the element with it's initial value of thedisplay
property.
i'll be displayed as flex from medium and up i'll be visible from large screens and up as block level element i'll be visible from larger screens and up
Responsive Typography
flex-system.css supports responsive typography.
Headings
headings font-size is scalable automatically when using flex system.
respnsive typography <!-- reducing conflict --> respnsive typography
/* you can increase or decrease the amount of scaling by modifing the css --amount variable */
Responsive Paragraph
To make the font size of a paragraph responsive use the .responsive
class.
this is a responsive paragraph (resize the window).
/* you can increase or decrease the amount of scaling by modifing the css --p-amount variable */
Fill parent Helper Classes
.fw
, .fh
classes specifies that an element should take full(width/height) of the containing element.
.fw-each
, .fh-each
means each direct element should take full(width/height) of their containing element.
i will fill my parent i will fill my parent me too me too
You can also use the data-w=100
, data-h=100
, data-w=100-each
attributes.
Or .w100
, h100
, w100-each
, h100-each
classes.
You might also want to use the .w-auto
, .h-auto
class wich is going to be ignored by the .full-*
classes.
i will fill my parent me too not me
Lastly
You may want to use these files.
Ask me any questions at any time :)