@savecash/primesaver-flex v1.0.1
PrimeFlex
PrimeFlex is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.
Getting Started
FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit A Complete Guide to Flexbox. A basic grid is defined by giving a container ps-grid class and children the ps-col class. Children of the grid will have the same width and scale according to the width of the parent.
<div class="ps-grid">
<div class="ps-col">1</div>
<div class="ps-col">2</div>
<div class="ps-col">3</div>
</div>Direction
Default direction is "row" and ps-dir-* class at the container defines the other possible directions which can be "row reverse", "column" and "column reverse".
<!-- Row Reverse -->
<div class="ps-grid ps-dir-rev">
<div class="ps-col">1</div>
<div class="ps-col">2</div>
<div class="ps-col">3</div>
</div>
<!-- Column -->
<div class="ps-grid ps-dir-col">
<div class="ps-col">1</div>
<div class="ps-col">2</div>
<div class="ps-col">3</div>
</div>
<!-- Column Reverse -->
<div class="ps-grid ps-dir-col-rev">
<div class="ps-col">1</div>
<div class="ps-col">2</div>
<div class="ps-col">3</div>
</div>12 Column Grid
FlexGrid includes a 12 column based layout utility where width of a column is defined with the ps-col-{number} style class. Columns with prefined widths can be used with columns with auto width (ps-col) as well.
In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units.
<div class="ps-grid">
<div class="ps-col-4">4</div>
<div class="ps-col">1 </div>
<div class="ps-col">1 </div>
<div class="ps-col">1 </div>
<div class="ps-col">1 </div>
<div class="ps-col">1 </div>
<div class="ps-col">1 </div>
<div class="ps-col">1 </div>
<div class="ps-col">1 </div>
</div>
<div class="ps-grid">
<div class="ps-col-2">2</div>
<div class="ps-col-6">6</div>
<div class="ps-col-4">4</div>
</div>Multi Line
When the number of columns exceed 12, columns wrap to a new line.
<div class="ps-grid">
<div class="ps-col-6">6</div>
<div class="ps-col-6">6</div>
<div class="ps-col-6">6</div>
<div class="ps-col-6">6</div>
</div>Fixed Width Column
A column can have a fixed width while siblings having auto width. Apply ps-col-fixed class to fix a column width.
<div class="ps-grid">
<div class="ps-col-fixed" style="width:100px">Fixed</div>
<div class="ps-col">Auto</div>
</div>Responsive
Responsive layout is achieved by applying breakpoint specific classes to the columns whereas ps-col-* define the default behavior for mobile devices with small screens. Four screen sizes are supported with different breakpoints.
- ps-sm-* : min-width 576px
- ps-md-* : min-width 768px
- ps-lg-* : min-width 992px
- ps-xl-* : min-width 1200px
In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.
<div class="ps-grid">
<div class="ps-col-12 ps-md-6 ps-lg-3">A</div>
<div class="ps-col-12 ps-md-6 ps-lg-3">B</div>
<div class="ps-col-12 ps-md-6 ps-lg-3">C</div>
<div class="ps-col-12 ps-md-6 ps-lg-3">D</div>
</div>Horizontal Alignment
ps-justify-* classes are used on the container element to define the alignment along the main axis.
- ps-justify-start: (default) Items are packed toward the start line
- ps-justify-end : Items are re packed toward to end line
- ps-justify-center : Items are centered along the line
- ps-justify-between: Items are evenly distributed in the line; first item is on the start line, last item on the end line
- ps-justify-around: Items are evenly distributed in the line with equal space around them.
- ps-justify-even: Items are distributed so that the spacing between any two items (and the space to the edges) is equal.
<div class="ps-grid ps-justify-between">
<div class="ps-col-2">2</div>
<div class="ps-col-1">1</div>
<div class="ps-col-4">4</div>
</div>Vertical Alignment
*ps-align-* classes are used on the container element to define the alignment along the cross axis.
- ps-align-stretch: (default) Stretch to fill the container.
- ps-align-start : Cross-start margin edge of the items is placed on the cross-start line
- ps-align-end : Cross-end margin edge of the items is placed on the cross-end line
- ps-align-center : Items are centered in the cross-axis
- ps-align-baseline : Items are aligned such as their baselines align
<div class="ps-grid ps-align-center">
<div class="ps-col">4</div>
<div class="ps-col">4</div>
<div class="ps-col">4</div>
</div>Vertical alignment can also be defined at column level with the ps-col-align-* classes
- ps-col-align-stretch : (default) Stretch to fill the container.
- ps-col-align-start : Cross-start margin edge of the items is placed on the cross-start line
- ps-col-align-end : Cross-end margin edge of the items is placed on the cross-end line
- ps-col-align-center : Items are centered in the cross-axis
- ps-col-align-baseline : Items are aligned such as their baselines align
<div class="ps-grid">
<div class="ps-col ps-col-align-start">
<div class="box">4</div>
</div>
<div class="ps-col ps-col-align-center">
<div class="box">4</div>
</div>
<div class="ps-col ps-col-align-end">
<div class="box">4</div>
</div>
</div>Offset
Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.
<div class="ps-grid">
<div class="ps-col-6 ps-offset-3">6</div>
</div>
<div class="ps-grid">
<div class="ps-col-4">4 </div>
<div class="ps-col-4 ps-offset-4">4</div>
</div>The list of offset classes varying within a range of 1 to 12.
- ps-col-offset-* : All screens
- ps-sm-offset-* : min-width: 576px
- ps-md-offset-* : min-width: 768px
- ps-lg-offset-* : min-width: 992px
- ps-xl-offset-* : min-width: 1200px
Nested
Columns can be nested to create more complex layouts.
<div class="ps-grid">
<div class="ps-col-8">
<div class="ps-grid">
<div class="ps-col-6">
6
</div>
<div class="ps-col-6">
6
</div>
<div class="ps-col-12">
12
</div>
</div>
</div>
<div class="ps-col-4">
4
</div>
</div>Gutter
A .5 em padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply .ps-nogutter class to the container. Note that this will not only remove the negative margins of the container, but also the padding of the columns.
<div class="ps-grid ps-nogutter">
<div class="ps-col">1</div>
<div class="ps-col">2</div>
<div class="ps-col">3</div>
</div>Gutters can also be removed from individual columns with the .ps-col-nogutter class.
<div class="ps-grid">
<div class="ps-col">1</div>
<div class="ps-col ps-col-nogutter">2</div>
<div class="ps-col">3</div>
</div>4 years ago