UNPKG

ezpz-grid

Version:

A lightweight Sass (.scss) flexbox grid system that's easy to setup and offers a lot of customisation.

github.com/vicompany/ezpz-flexbox-grid

vicompany/ezpz-flexbox-grid

95 lines (73 loc) • 7.51 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
# EZPZ Flexbox grid Documentation [Documentation](docs.md) > Usage # Usage The grid is used by applying certain classes to HTML elements. These classes are generated based on the selected options. Most of these classes have been marked optional to reduce CSS file size, but can easily be enabled in the grid setup. ## Grid classes All cells within the grid have to be wrapped by an element with a **.grid class** which acts as a container. Different behaviour can be assigned to this section through the use of the classes below. | class | description | :--- | :--- | ```.grid```<br>```.grid--horizontal```<br>```.grid--{breakpoint}-horizontal``` | Turns an HTML element into a horizontal container for the cells of the grid. This is a **mandatory class**, but can be used in conjunction with modifier classes. | ```.grid--vertical```<br>```.grid--{breakpoint}-vertical``` | Turns an HTML element into a vertical container for the cells of the grid. ### Optional #### Grid align | class | description | :--- | :--- | ```.grid--align-start```<br>```.grid--{breakpoint}-align-start``` | Overrides equal height behaviour.<br>All cells take up their own height and align at the **start** of the grid section. | ```.grid--align-end```<br>```.grid--{breakpoint}-align-end``` | Overrides equal height behaviour.<br>All cells take up their own height and align at the **end** of the grid section. | ```.grid--align-center```<br>```.grid--{breakpoint}-align-center``` | Overrides equal height behaviour.<br>All cells take up their own height and align at the **center** of the grid section. | ```.grid--align-stretch```<br>```.grid--{breakpoint}-align-stretch``` | Default.<br>All cells **stretch** to the top and bottom of the grid section. #### Grid collapse | class | description | :--- | :--- | ```.grid--collapsed```<br>```.grid--{breakpoint}-collapsed``` | None of the cells within the grid section will have a gutter. | ```.grid--expanded```<br>```.grid--{breakpoint}-expanded``` | Cells within the grid section will have a gutter. #### Grid wrap | class | description | :--- | :--- | ```.grid--wrap```<br>```.grid--{breakpoint}-wrap``` | Forces cells to wrap to a **new line** if there is no more space to house them in the grid section. Wrapping cell are placed underneath the other cells in the section. | ```.grid--wrap-reverse```<br>```.grid--{breakpoint}-wrap-reverse``` | Forces cells to wrap to a **previous line** if there is no more space to house them in the grid section. Wrapping cell are placed above the other cells in the section. | ```.grid--nowrap```<br>```.grid--{breakpoint}-nowrap``` | Default.<br> Grid sections that have been previously set to wrap will no longer wrap from this breakpoint and up. ## Cell classes Content within the grid can be divided and positioned through the use of elements with a ```.cell``` class which have to be directed desendants of a ```.grid``` element. Different behaviour can be assigned to these cells through the use of the classes below. | class | description | :--- | :--- | ```.cell``` | Turns an element into a cell within a grid section. Cell elements have to be direct descendants of a grid element. This is a **mandatory class** for each cell, but can be used in conjunction with modifier classes. By default direct child elements placed within a cell will try to take up the same height as the cell itself. This behaviour can be changed by using the various alignment classes. | ```.cell--{#}```<br>```.cell--{breakpoint}-{#}```<br>```.cell--{fraction}```<br>```.cell--{breakpoint}-{fraction}``` | Controls the amount of horizontal space a cell should occupy in a grid section. This modifier uses either numbers or fractions, based on the selected grid type. These classes are automatically generated based on the amount of selected fractions. ### Optional #### Cell order | class | description | :--- | :--- | ```.cell--order-start```<br>```.cell--{breakpoint}-order-start``` | Places a cell at the **start** of a grid section, regardless of the placement in the HTML structure. | ```.cell--order-end```<br>```.cell--{breakpoint}-order-end``` | Places a cell at the **end** of a grid section, regardless of the placement in the HTML structure. | ```.cell--order-{#}```<br>```.cell--{breakpoint}-order-{#}``` | Places a cell at the desired position. These classes are automatically generated based on the amount of fractions. Note: The flexbox order property is zero based, so ```.cell--order-1``` outputs ```order: 0;``` etc. #### Cell offset | class | description | :--- | :--- | ```.cell--offset-#```<br>```.cell--{breakpoint}-offset-#``` | Horizontally offset a cell by a specific disance. Ie. ```.cell--offset-1/4``` will offset a cell by a quarter of the total width of the parent grid section. #### Cell align | class | description | :--- | :--- | ```.cell--align-start```<br>```.cell--{breakpoint}-align-start``` | Overrides equal height behaviour. A specific cell takes up its own height/width and aligns at the **start** of the grid section. | ```.cell--align-end```<br>```.cell--{breakpoint}-align-end``` | Overrides equal height behaviour. A specific cell takes up its own height/width and aligns at the **end** of the grid section. | ```.cell--align-center```<br>```.cell--{breakpoint}-align-center``` | Overrides equal height behaviour. A specific cell takes up its own height/width and aligns at the **center** of the grid section. | ```.cell--align-stretch```<br>```.cell--{breakpoint}-align-stretch``` | Default. A specific cell **stretch** to the top and bottom of the grid section. #### Cell collapse | class | description | :--- | :--- | ```.cell--collapsed```<br>```.cell--{breakpoint}-collapsed``` | Removes the gutters on a specific cell. Only works in combination with a ```.cell--{#}``` class to prevent the newly freed space from being taken by other cells in the grid section. | ```.cell--expanded```<br>```.cell--{breakpoint}-expanded``` | Adds the gutters on a specific cell. ### Responsive classes In many cases the desired behavior of a grid depends on the available space on a device. The EZPZ Flexbox Grid adheres to a mobile first strategy, and enables you to add breakpoints that generate breakpoint classes that offer more control over the layout on multiple screen sizes. The classes that are generated are based on the selected breakpoints in the $ezpz-breakpoints variable. Previously set behaviour can be overwritten by adding multiple breakpoint classes to an element. ```html <div class="grid grid--vertical grid--small-horizontal"> <div class="cell cell--small-1/3 cell--medium-2/3">Cell</div> <div class="cell cell--small-2/3 cell--medium-1/3">Cell</div> </div> ``` In this example the grid will start out in a vertical layout but will change to a horizontal layout as soon as the screen reaches the size set for the 'small' breakpoint or above. The cells within the grid will both start out taking up half of the available space in the grid section. As soon as the 'small' breakpoint is reached they will take up one thirds and two thirds of the total width of the parent grid section. When the 'medium' breakpoint is reached they will be divided in a two thirds and one thirds fashion. ## Demo For a more in-depth explanation with examples please visit [the demo](http://vicompany.github.io/ezpz-flexbox-grid/index.html). ## Optional * [Use the grid with mixins](mixins-usage.md)