Spring Article
47 |This is a springtime article element, and I have no set width.
48 |
25 |
31 |
32 |
33 | Three column layout that becomes two columns over one full column on medium and small screens. All three columns become a full column on extra small screens.
34 |
35 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/source/methods/polygrid-deprecated.css:
--------------------------------------------------------------------------------
1 | /* PolyGrid (DEPRACATED) */
2 | .polygrid, .polygrid::before, .polygrid::after, .polygrid>li::before, .polygrid>li::after {
3 | box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
4 | }
5 | .polygrid {
6 | list-style: none; display: flex; display: -ms-flex;
7 | -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap;
8 | justify-content: center; -moz-justify-content: center; -webkit-justify-content: center;
9 | align-items: center; -webkit-align-items: center;
10 | max-width: 1200px; margin: 0 auto; padding: 0;
11 | transform: translateY(34.375px);
12 | }
13 | .polygrid>li {
14 | flex: 0 1 250px;
15 | max-width: 250px; height: 137.5px;
16 | margin: 65.4761904762px 12.5px 25px;
17 | position: relative;
18 | padding: 0.5em;
19 | text-align: center;
20 | z-index: 1;
21 | }
22 | .polygrid>li .title {
23 | height: 100%;
24 | display: flex; display: -ms-flex;
25 | flex-direction: column;
26 | justify-content: center;
27 | -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
28 | word-break: break-word;
29 | text-transform: uppercase;
30 | color: #fff; font-weight: 700; font-size: 1.5em;
31 | transition: opacity 350ms;
32 | }
33 | .polygrid>li .title > small { font-size: 0.75em; font-weight: 300; margin-top: 0.25em;}
34 | .polygrid>li img, .polygrid>li a img {
35 | -o-object-fit: cover; object-fit: cover;
36 | -o-object-position: center;object-position: center;
37 | }
38 | .polygrid>li::before, .polygrid>li::after { content: "";}
39 | .polygrid>li::before, .polygrid>li::after, .polygrid>li img, .polygrid>li a img {
40 | top: -50%; left: 0;
41 | width: 100%; height: 200%;
42 | display: block; position: absolute;
43 | -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
44 | clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
45 | z-index: -1;
46 | }
47 | .polygrid>li::before {
48 | background: #fff;
49 | transform: scale(1.055);
50 | }
51 | .polygrid>li::after {
52 | background: #3ea0eb;
53 | opacity: 0.5;
54 | transition: opacity 350ms;
55 | }
56 | .polygrid>li:hover .title {opacity: 0.5;}
57 | .polygrid>li:hover::before {background: rgba(255,255,255,0.5);}
58 | .polygrid>li:hover::after {opacity: 0;}
59 | .polygrid>li.placeholder {display: none; opacity: 0; width: 250px; margin: 0 12.5px;}
60 |
61 | @media (max-width: 550px) {
62 | .polygrid>li {margin: 81.25px 25px;}
63 | }
64 | @media (min-width: 550px) and (max-width: 825px) {
65 | .polygrid>li:nth-child(3n) {
66 | margin-right: calc(50% - 125px);
67 | margin-left: calc(50% - 125px);
68 | }
69 | .polygrid>li.placeholder:nth-child(3n+5) {display: block;}
70 | }
71 | @media (min-width: 825px) and (max-width: 1100px) {
72 | .polygrid>li:nth-child(5n+4) {margin-left: calc(50% - 275px);}
73 | .polygrid>li:nth-child(5n+5) {margin-right: calc(50% - 275px);}
74 | .polygrid>li.placeholder:nth-child(5n), .polygrid>li.placeholder:nth-child(5n+3) {display: block;}
75 | }
76 | @media (min-width: 1100px) {
77 | .polygrid>li:nth-child(7n+5) { margin-left: calc(50% - 400px); }
78 | .polygrid>li:nth-child(7n+7), .polygrid>li:nth-child(7n+5):nth-last-child(2) {
79 | margin-right: calc(50% - 400px);
80 | }
81 | .polygrid>li.placeholder:nth-child(7n+7), .polygrid>li.placeholder:nth-child(7n+9), .polygrid>li.placeholder:nth-child(7n+11) {
82 | display: block;
83 | }
84 | }
--------------------------------------------------------------------------------
/bento-grid.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
36 |
46 |
37 |
39 | Block 1
50% width on medium & small screens, 100% width on extra-small screens.
40 |
42 | Block 2
50% width on medium & small screens, 100% width on extra-small screens.
43 |
45 | Block 3
100% width on medium, small, and extra-small screens.
47 |
54 |
48 |
50 | Brick 1
full width on small & medium screens, 50% width on all others.
51 |
53 | Brick 2
full width on small & medium screens, 50% width on all others.
22 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/polygrids-bonus.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
23 |
40 |
41 |
44 |
45 |
46 |
66 |
24 |
26 | 1x2 Bento Box
25 |
27 |
36 | Bento Grid
28 |Dynamic auto-fill grid demo.
29 |Include source/methods/js/bento-grid.js before the closing body tag.
30 | Documentation » 31 | 35 |
37 |
39 | 2x1 Bento Box
38 |1x1 Bento Box
FILLER BOX 1
47 | FILLER BOX 2
48 |
49 |
50 |
64 |
65 | NESTING EXAMPLE
51 |This 4x1 bento box contains a 3-column B3Grid layout within it:
53 |
63 |
54 |
56 | Block 1
55 |
57 |
59 | Block 2
58 |
60 |
62 | Block 3
61 |
26 |
32 |
33 |
27 |
31 | PolyGrid BONUS
28 |ISOGRID
29 | 30 |
34 |
169 |
170 |
171 |
--------------------------------------------------------------------------------
/source/methods/b3grid-express.css:
--------------------------------------------------------------------------------
1 | .wrap-600,.wrap-960,.wrap-1200,.wrap-1600{width:100%; margin: 0 auto;}
2 | .wrap-600{max-width: 600px;}
3 | .wrap-960{max-width: 960px;}
4 | .wrap-1200{max-width: 1200px;}
5 | .wrap-1600{max-width: 1600px;}
6 | .flex {
7 | box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
8 | display: -ms-flex; display: -webkit-box; display: -moz-box;
9 | display: -ms-flexbox; display: -webkit-flex; display: flex;
10 | -ms-flex: 0 1 auto; -webkit-box-flex: 0; flex: 0 1 auto;
11 | -ms-flex-direction: row; -moz-flex-direction: row; -webkit-flex-direction: row;
12 | -webkit-box-orient: horizontal;
13 | -webkit-box-direction: normal; flex-direction: row;
14 | -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap;
15 | margin-right: 0; margin-left: 0;
16 | }
17 | .flex > * {flex: 0 0 auto;}
18 | .flex.column{
19 | flex-direction: column; -webkit-flex-direction: column;
20 | -ms-flex-direction: column; -moz-flex-direction: column;
21 | -webkit-box-orient: vertical;
22 | }
23 | .flex.reverse {
24 | -ms-flex-direction: row-reverse; -moz-flex-direction: row-reverse; -webkit-flex-direction: row-reverse;
25 | -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse;
26 | }
27 | .flex.columns.reverse{
28 | -ms-flex-direction: column-reverse; -moz-flex-direction: column-reverse;
29 | -webkit-flex-direction: column-reverse; -webkit-box-orient: vertical;
30 | -webkit-box-direction: reverse; flex-direction: column-reverse;
31 | }
32 | .flex.middle, .flex .middle {
33 | -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center;
34 | -moz-justify-content: center; -webkit-justify-content: center;
35 | align-self: center;
36 | -ms-flex-align: center; -webkit-box-align: center;
37 | align-items: center; -webkit-align-items: center;
38 | align-content: center; -webkit-align-content: center;
39 | }
40 | .flex.start, .flex .start {
41 | -ms-flex-align: start; -webkit-box-align: start;
42 | align-self: flex-start; align-items: flex-start; -webkit-align-items: flex-start;
43 | -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start;
44 | -moz-justify-content: flex-start; -webkit-justify-content: flex-start; text-align: start;
45 | }
46 | .flex.end, .flex .end {
47 | -ms-flex-pack: end; -webkit-box-pack: end; -ms-flex-align: end; -webkit-box-align: end;
48 | justify-content: flex-end; -moz-justify-content: flex-end; -webkit-justify-content: flex-end;
49 | align-self: flex-end; align-items: flex-end; -webkit-align-items: flex-end; text-align: end;
50 | }
51 | .flex.around {
52 | -ms-flex-pack: distribute;
53 | justify-content: space-around; -moz-justify-content: space-around; -webkit-justify-content: space-around;
54 | }
55 | .flex.evenly {
56 | justify-content: space-evenly; -moz-justify-content: space-evenly; -webkit-justify-content: space-evenly;
57 | }
58 | .flex.between {
59 | -ms-flex-pack: justify; -webkit-box-pack: justify;
60 | justify-content: space-between; -moz-justify-content: space-between; -webkit-justify-content: space-between;
61 | }
62 | .flex.stretch, .flex .stretch {
63 | align-self: stretch !important;
64 | align-items: stretch !important;
65 | align-content: stretch !important;
66 | }
67 | .flex.baseline, .flex .baseline {
68 | align-items: baseline !important;
69 | align-self: baseline !important;
70 | align-content: baseline !important;
71 | }
72 | .flex>.full{width: 100%; flex-basis: 100%; -webkit-flex-basis: 100%;}
73 | .bricks>div,.bricks>p,.bricks>li,.inline-brick,.inline-block{display:inline-block;padding: var(--padding);}
74 |
75 | @media screen and (min-width: 1200px){
76 | .flex>.sidebar {width: 20%; flex-basis: 20%; -webkit-flex-basis: 20%;}
77 | .flex>.main {width: 80%; flex-basis: 80%; -webkit-flex-basis: 80%;}
78 | .flex>.half {flex-basis: 50%; -webkit-flex-basis: 50%; width: 50%;}
79 | .flex>.third {flex-basis: 33.33%; -webkit-flex-basis: 33.33%; width: 33.33%;}
80 | .flex>.two-thirds {flex-basis: 66.67%; -webkit-flex-basis: 66.67%; width: 66.67%;}
81 | .flex>.fourth{flex-basis: 25%; -webkit-flex-basis: 25%; width: 25%;}
82 | .flex>.fifth{flex-basis: 20%; -webkit-flex-basis: 20%; width: 20%;}
83 | }
84 | @media screen and (min-width: 701px) and (max-width: 1199px) {
85 | .flex>.sidebar{width: 25%; flex-basis: 25%; -webkit-flex-basis: 25%; -moz-flex-basis: 25%;}
86 | .flex>.main {width: 75%; flex-basis: 75%; -webkit-flex-basis: 75%; -moz-flex-basis: 75%;}
87 | .flex>.half {flex-basis: 50%; -webkit-flex-basis: 50%; width: 50%;}
88 | .flex>.third, .flex>.fifth {flex-basis: 33.33%; -webkit-flex-basis: 33.33%; width: 33.33%;}
89 | .flex>.two-thirds {flex-basis: 66.67%; -webkit-flex-basis: 66.67%; width: 66.67%;}
90 | .flex>.fourth{flex-basis: 50%; -webkit-flex-basis: 50%; width: 50%;}
91 | .flex>.fifth:nth-of-type(4n+0),.flex>.fifth:nth-of-type(5n+0){flex-basis: 50%; -webkit-flex-basis: 50%; width; 50%;}
92 | }
93 | @media screen and (max-width: 700px){
94 | .sidebar {width: 100%; flex-basis: 100%; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; position: relative;}
95 | .main{width: 100%; }
96 | .flex>.half,.flex>.third,.flex>.fourth,.flex>.fifth,.flex>.two-thirds{flex-basis: 100%; -webkit-flex-basis: 100%; width: 100%;}
97 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | -
35 |
-
36 | 37 |40 |
Tile 1
38 |
39 |$6.6641 |44 |Tile 1
42 |$5.55
43 |
45 |
46 | -
47 | 48 |51 |
Tile 2
49 |$6.66
50 |52 |55 |Tile 2
53 |text
54 |
56 |
57 | -
58 | 59 |62 |
Tile 3
60 |$6.66
61 |63 |66 |Tile 3
64 |text
65 |
67 |
68 | -
69 | 70 |73 |
Tile 4
71 |$6.66
72 |74 |77 |Tile 4
75 |text
76 |
78 |
79 | -
80 | 81 |84 |
Tile 5
82 |
83 |$6.6685 |88 |Tile 5
86 |$3.33
87 |
89 |
90 | -
91 | 92 |95 |
Tile 6
93 |$6.66
94 |96 |99 |Tile 6
97 |text
98 |
100 |
101 | -
102 | 103 |106 |
Tile 7
104 |$6.66
105 |107 |110 |Tile 7
108 |$5.95
109 |
111 |
112 | -
113 | 114 |117 |
Tile 8
115 |$6.66
116 |118 |121 |Tile 8
119 |text
120 |
122 |
123 | -
124 | 125 |128 |
Tile 8
126 |$6.66
127 |129 |132 |Tile 8
130 |text
131 |
133 |
134 | -
135 | 136 |139 |
Tile 9
137 |$6.66
138 |140 |143 |Tile 9
141 |text
142 |
144 |
145 | -
146 | 147 |150 |
Tile 10
148 |$6.66
149 |151 |154 |Tile 10
152 |text
153 |
155 |
156 | -
157 | 158 |161 |
Tile 11
159 |$6.66
160 |162 |165 |Tile 11
163 |text
164 |
166 |
167 |
32 |
37 |
38 |
33 |
36 | Blueprint Grid
34 |A multi-method grid system built with Flexbox, CSS Grid, and vanilla javascript.
35 |
39 |
98 |
99 |
100 |
101 |
102 |
--------------------------------------------------------------------------------
/source/methods/js/bento-grid.js:
--------------------------------------------------------------------------------
1 | /* BENTO GRID */
2 | class b{constructor(t){this.config={target:".bentogrid",minCellWidth:100,cellGap:0,aspectRatio:1/1,breakpoints:[],balanceFillers:!1,breakpointReference:"target",...t},this.gridContainer=typeof this.config.target=="string"?document.querySelector(this.config.target):this.config.target,this.gridItems=void 0,this.fillers=void 0,this.setElements(),this.prevTotalColumns=null,this.prevColumnCount=null,this.hideOriginalFillers(),this.setupGrid(),this.updateGrid(),this.handleResponsiveBehavior()}setElements(){this.gridItems=Array.from(this.gridContainer.querySelectorAll(":scope > *")).filter(t=>t.hasAttribute("data-bento")).filter(t=>t.offsetParent!==null),this.fillers=Array.from(this.gridContainer.querySelectorAll(":scope > *")).filter(t=>!t.hasAttribute("data-bento")).filter(t=>!t.style.gridColumn)}getBreakpoint(){const t=this.config.breakpointReference==="target"?this.gridContainer.clientWidth:window.innerWidth;let r={...this.config};const c=a=>{a.columns?delete r.minCellWidth:a.minCellWidth&&delete r.columns};c(r);const C=Object.keys(this.config.breakpoints).map(Number).sort((a,w)=>a-w);for(const a of C)t>=a&&(r={...r,...this.config.breakpoints[a]},c(this.config.breakpoints[a]));return r}setupGrid(){const t=this.getBreakpoint(),r=t.columns||Math.floor((this.gridContainer.clientWidth+t.cellGap)/(t.minCellWidth+t.cellGap));this.gridContainer.style.display="grid",this.gridContainer.style.gridTemplateColumns=`repeat(${r}, minmax(${t.minCellWidth}px, 1fr))`,this.gridContainer.style.gridGap=`${t.cellGap}px`;const a=(this.gridContainer.clientWidth-(r-1)*t.cellGap)/r/t.aspectRatio;return this.gridContainer.style.setProperty("--bento-row-height",`${a}px`),r}hideOriginalFillers(){this.fillers.forEach(t=>{t.style.display="none"})}removeClonedFillers(){Array.from(this.gridContainer.querySelectorAll(":scope > *")).filter(t=>!t.hasAttribute("data-bento")).filter(t=>!!t.style.gridColumn).forEach(t=>{t.remove()})}updateGrid(){const t=this.setupGrid();this.prevTotalColumns!==t&&this.removeClonedFillers();const r=[];let c=0;for(let n=0;n
40 |
94 |
41 |
51 |
59 |
67 |
75 | B3Grid
42 |Flexbox-based grid system.
43 | Documentation » 44 |-
45 |
- B3Grid Demo » 46 |
- Panes Demo » 47 |
- Nesting Demo » 48 |
- Responsive Demo » 49 |
76 |
84 | ChAOs Grid
77 |The anti-grid grid.
78 | Documentation » 79 |-
80 |
- Standard Demo » 81 |
- Randomized Demo » 82 |
85 |
93 | PolyGrids
86 |Polygon shapes grid system using Flexbox.
87 | Documentation » 88 |-
89 |
- Demo » 90 |
- BONUS: Isogrid » 91 |
95 | BlueprintGrid.com | Github 96 |
97 |
25 |
31 |
32 |
33 | Express Grid (Three Columns) with Nested Blocks, Bricks, & Tiles
34 |
35 |
59 |
60 |
61 |
36 |
Blocks
37 |
38 |
43 | .block.bw25
39 | .block.bw25
40 | .block.bw25
41 | .block.bw25
42 |
44 |
Bricks
45 |
46 |
50 | .brick.bw40
47 | .brick
48 | .brick
49 |
51 |
58 | Tiles
52 |-
53 |
- Tile 1 54 |
- Tile 2 55 |
- Tile 3 56 |
Two-Column Panes with Nested Blocks
62 |
63 |
83 |
84 |
85 |
64 |
68 |
65 |
67 | Centered Brick
This 60%-width brick is centered within a 100% height brick-wrapper, which is contained within a full-height half pane.
66 | This 60%-width brick is centered within a 100% height brick-wrapper, which is contained within a full-height half pane.
69 |
82 | Tiled Pane
70 |This half pane contains a nested three-column tile layout.
71 |-
72 |
- Tile 1 73 |
- Tile 2 74 |
- Tile 3 75 |
- Tile 4 76 |
- Tile 5 77 |
- Tile 6 78 |
- Tile 7 79 |
- Tile 8 80 |
Bricks and Tiles within 2-column CSS grid wrapped within standard container
86 |
87 |
102 |
103 |
104 |
88 |
101 |
89 |
94 | Brick 1
90 | Brick 2
91 | Brick 3
92 | Brick 4
93 | -
95 |
- Tile 1 96 |
- Tile 2 97 |
- Tile 3 98 |
- Tile 4 99 |
Three-column CSS grid within a two-column block layout
105 |
106 |
123 |
124 |
125 |
107 |
114 | BLOCK 1
108 |
109 |
110 |
111 |
112 |
113 | Column 1
Column 2
Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
Column 3
115 |
122 | BLOCK 2
116 |
117 |
118 |
119 |
120 |
121 | Column 1
Column 2
Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
Column 3
Blocks and tiles within blocks within a 1200px container
126 |
127 |
175 |
176 |
177 |
128 |
174 |
129 |
160 | 70% Width Block
130 |
131 |
144 |
132 |
134 | 60% Width Block
133 |
135 |
137 | 40% Width Block
136 |
138 |
140 | 40% Width Block
139 |
141 |
143 | 60% Width Block
142 |A Break Between Block Rows
145 |
146 |
159 |
147 |
149 | 50% Width Block
148 |
150 |
152 | 50% Width Block
151 |
153 |
155 | 40% Width Block
154 |
156 |
158 | 60% Width Block
157 |
161 |
173 | 30% Width Block
162 |Here's some tiles:
163 |-
164 |
- Tile 1 165 |
- Tile 2 166 |
- Tile 3 167 |
- Tile 4 168 |
- Tile 5 169 |
- Tile 6 170 |
- Tile 7 171 |
Bootstrap Grid with nested tiles and blocks
178 | 179 |
180 |
210 |
211 |
212 |
213 |
--------------------------------------------------------------------------------
/source/methods/chaos-grid.css:
--------------------------------------------------------------------------------
1 | /* ChAoS aNtI-gRiD gRiD */
2 | @import url('variables.css');
3 |
4 | .chaos-grid {width: 100%; position: relative;}
5 | .chaos-grid,.chaos-grid>*{
6 | box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
7 | }
8 | .chaos-grid>a,.chaos-grid>article,.chaos-grid>blockquote,.chaos-grid>code,
9 | .chaos-grid>details,.chaos-grid>div,.chaos-grid>figure,.chaos-grid>form,
10 | .chaos-grid>iframe,.chaos-grid>img,.chaos-grid>nav, .chaos-grid>p,.chaos-grid>pre,
11 | .chaos-grid>section,.chaos-grid>video{
12 | display:inline-block; position: relative; margin: 0;
13 | }
14 | .chaos-grid>a,.chaos-grid>article,.chaos-grid>blockquote,.chaos-grid>code,
15 | .chaos-grid>details,.chaos-grid>div,.chaos-grid>figure,.chaos-grid>form,
16 | .chaos-grid>iframe,.chaos-grid>nav,.chaos-grid>p,.chaos-grid>pre,
17 | .chaos-grid>section{min-width: 10vw;}
18 |
19 | /* animate elements upon load
20 | @keyframes chaoSlideIn {
21 | 0% {transform: translateX(-100%);}
22 | 100% {transform: translateX(0);}
23 | }*/
24 | @keyframes chaoSlideIn {
25 | 0% {transform: rotate(-20%);}
26 | 100% {transform: rotate(0);}
27 | }
28 | .chaos-grid.slidein>*{animation: 1s ease-out 0s 1 chaoSlideIn;}
29 |
30 | /* positioniong */
31 | .chaos-grid.randomize > * {/*position: absolute; top: 100px; left: 100px; */ position: relative;}
32 | .chaos-grid.relative > *:nth-child(odd){position: relative; z-index: 1;}
33 | .chaos-grid.relative > *:nth-child(even){position: absolute; z-index: 2;}
34 | .chaos-grid.absolute > *:nth-child(odd){position: absolute; z-index: 1;}
35 | .chaos-grid.absolute > *:nth-child(even){position: relative; z-index: 2;}
36 | .chaos-grid.absolute-seconds > *:nth-child(2n+0){position: absolute; z-index: 2;}
37 | .chaos-grid.absolute-thirds > *:nth-child(3n+0){position: absolute; z-index: 3;}
38 | .chaos-grid.absolute-fourths > *:nth-child(4n+0){position: absolute; z-index: 4;}
39 | .chaos-grid.absolute-fifths > *:nth-child(5n+0){position: absolute; z-index: 5;}
40 |
41 | /* offsets */
42 | .chaos-grid.pull-right-seconds > *:nth-child(2n+0),.chaos-grid.pull-right-thirds > *:nth-child(3n+0),
43 | .chaos-grid.pull-right-fourths > *:nth-child(4n+0),.chaos-grid.pull-right-fifths > *:nth-child(5n+0),
44 | .pull-right{right: var(--pull-right);}
45 |
46 | .chaos-grid.push-right-seconds > *:nth-child(2n+0),.chaos-grid.push-right-thirds > *:nth-child(3n+0),
47 | .chaos-grid.push-right-fourths > *:nth-child(4n+0),.chaos-grid.push-right-fifths > *:nth-child(5n+0),
48 | .push-right{right: var(--push-right);}
49 |
50 | .chaos-grid.pull-left-seconds > *:nth-child(2n+0),.chaos-grid.pull-left-thirds > *:nth-child(3n+0),
51 | .chaos-grid.pull-left-fourths > *:nth-child(4n+0),.chaos-grid.pull-left-fifths > *:nth-child(5n+0),
52 | .pull-left{left: var(--pull-left);}
53 |
54 | .chaos-grid.push-left-seconds > *:nth-child(2n+0),.chaos-grid.push-left-thirds > *:nth-child(3n+0),
55 | .chaos-grid.push-left-fourths > *:nth-child(4n+0),.chaos-grid.push-left-fifths > *:nth-child(5n+0),
56 | .push-left{left: var(--push-left);}
57 |
58 | .chaos-grid.pull-up-seconds > *:nth-child(2n+0),.chaos-grid.pull-up-thirds > *:nth-child(3n+0),
59 | .chaos-grid.pull-up-fourths > *:nth-child(4n+0),.chaos-grid.pull-up-fifths > *:nth-child(5n+0),
60 | .pull-up{top: var(--pull-up);}
61 |
62 | .chaos-grid.push-up-seconds > *:nth-child(2n+0),.chaos-grid.push-up-thirds > *:nth-child(3n+0),
63 | .chaos-grid.push-up-fourths > *:nth-child(4n+0),.chaos-grid.push-up-fifths > *:nth-child(5n+0),
64 | .push-up{top: var(--push-up);}
65 |
66 | .chaos-grid.pull-down-seconds > *:nth-child(2n+0),.chaos-grid.pull-down-thirds > *:nth-child(3n+0),
67 | .chaos-grid.pull-down-fourths > *:nth-child(4n+0),.chaos-grid.pull-down-fifths > *:nth-child(5n+0),
68 | .pull-down{bottom: var(--pull-down);}
69 |
70 | .chaos-grid.push-down-seconds > *:nth-child(2n+0),.chaos-grid.push-down-thirds > *:nth-child(3n+0),
71 | .chaos-grid.push-down-fourths > *:nth-child(4n+0),.chaos-grid.push-down-fifths > *:nth-child(5n+0),
72 | .push-down{bottom: var(--push-down);}
73 |
74 | .pull-up-2x{top:calc(var(--pull-up)*2);}
75 | .pull-up-3x{top:calc(var(--pull-up)*3);}
76 | .pull-up-4x{top:calc(var(--pull-up)*4);}
77 | .pull-up-5x{top:calc(var(--pull-up)*5);}
78 | .push-up-2x{top:calc(var(--push-up)*2);}
79 | .push-up-3x{top:calc(var(--push-up)*3);}
80 | .push-up-4x{top:calc(var(--push-up)*4);}
81 | .push-up-5x{top:calc(var(--push-up)*5);}
82 |
83 | .pull-down-2x{bottom:calc(var(--pull-down)*2);}
84 | .pull-down-3x{bottom:calc(var(--pull-down)*3);}
85 | .pull-down-4x{bottom:calc(var(--pull-down)*4);}
86 | .pull-down-5x{bottom:calc(var(--pull-down)*5);}
87 | .push-down-2x{bottom:calc(var(--push-down)*2);}
88 | .push-down-3x{bottom:calc(var(--push-down)*3);}
89 | .push-down-4x{bottom:calc(var(--push-down)*4);}
90 | .push-down-5x{bottom:calc(var(--push-down)*5);}
91 |
92 | .pull-left-2x{left:calc(var(--pull-left)*2);}
93 | .pull-left-3x{left:calc(var(--pull-left)*3);}
94 | .pull-left-4x{left:calc(var(--pull-left)*4);}
95 | .pull-left-5x{left:calc(var(--pull-left)*5);}
96 | .push-left-2x{left:calc(var(--push-left)*2);}
97 | .push-left-3x{left:calc(var(--push-left)*3);}
98 | .push-left-4x{left:calc(var(--push-left)*4);}
99 | .push-left-5x{left:calc(var(--push-left)*5);}
100 |
101 | .pull-right-2x{right:calc(var(--pull-right)*2);}
102 | .pull-right-3x{right:calc(var(--pull-right)*3);}
103 | .pull-right-4x{right:calc(var(--pull-right)*4);}
104 | .pull-right-5x{right:calc(var(--pull-right)*5);}
105 | .push-right-2x{right:calc(var(--push-right)*2);}
106 | .push-right-3x{right:calc(var(--push-right)*3);}
107 | .push-right-4x{right:calc(var(--push-right)*4);}
108 | .push-right-5x{right:calc(var(--push-right)*5);}
109 |
110 | @media only screen and (max-width: 667px) {
111 | /* orderly-on-mobile */
112 | .orderly-on-mobile>a,.orderly-on-mobile>article,.orderly-on-mobile>blockquote,.orderly-on-mobile>code,
113 | .orderly-on-mobile>details,.orderly-on-mobile>div,.orderly-on-mobile>figure,.orderly-on-mobile>form,
114 | .orderly-on-mobile>iframe,.orderly-on-mobile>nav,.orderly-on-mobile>p,.orderly-on-mobile>pre,.orderly-on-mobile>section
115 | {position: relative; display: block; width: 100%;}
116 | .orderly-on-mobile>img,.orderly-on-mobile>video{max-width: 100%; height: auto !important; position: relative;}
117 |
118 | .orderly-on-mobile.absolute-seconds > *:nth-child(2n+0),.orderly-on-mobile.absolute-thirds > *:nth-child(3n+0),
119 | .orderly-on-mobile.absolute-fourths > *:nth-child(4n+0),.orderly-on-mobile.absolute-fifths > *:nth-child(5n+0),
120 | .orderly-on-mobile.relative > *:nth-child(even),.orderly-on-mobile.absolute > *:nth-child(odd){position: relative; z-index: 1;}
121 |
122 | /* reset all offsets to 0 on mobile */
123 | .orderly-on-mobile.pull-right-seconds > *:nth-child(2n+0),.orderly-on-mobile.pull-right-thirds > *:nth-child(3n+0),
124 | .orderly-on-mobile.pull-right-fourths > *:nth-child(4n+0),.orderly-on-mobile.pull-right-fifths > *:nth-child(5n+0),
125 | .orderly-on-mobile.pull-right,.orderly-on-mobile.push-right-seconds > *:nth-child(2n+0),.orderly-on-mobile.push-right-thirds > *:nth-child(3n+0),
126 | .orderly-on-mobile.push-right-fourths > *:nth-child(4n+0),.orderly-on-mobile.push-right-fifths > *:nth-child(5n+0),
127 | .push-right,.pull-right-2x,.pull-right-3x,.pull-right-4x,.pull-right-5x,.push-right-2x,.push-right-3x,.push-right-4x,.push-right-5x{right: 0;}
128 | .orderly-on-mobile.pull-left-seconds > *:nth-child(2n+0),.orderly-on-mobile.pull-left-thirds > *:nth-child(3n+0),
129 | .orderly-on-mobile.pull-left-fourths > *:nth-child(4n+0),.orderly-on-mobile.pull-left-fifths > *:nth-child(5n+0),
130 | .pull-left,.chaos-grid.push-left-seconds > *:nth-child(2n+0),.orderly-on-mobile.push-left-thirds > *:nth-child(3n+0),
131 | .orderly-on-mobile.push-left-fourths > *:nth-child(4n+0),.orderly-on-mobile.push-left-fifths > *:nth-child(5n+0),
132 | .push-left,.pull-left-2x,.pull-left-3x,.pull-left-4x,.pull-left-5x,.push-left-2x,.push-left-3x,.push-left-4x,.push-left-5x{left: 0;}
133 | .orderly-on-mobile.pull-up-seconds > *:nth-child(2n+0),.orderly-on-mobile.pull-up-thirds > *:nth-child(3n+0),
134 | .orderly-on-mobile.pull-up-fourths > *:nth-child(4n+0),.orderly-on-mobile.pull-up-fifths > *:nth-child(5n+0),
135 | .pull-up,.orderly-on-mobile.push-up-seconds > *:nth-child(2n+0),.orderly-on-mobile.push-up-thirds > *:nth-child(3n+0),
136 | .orderly-on-mobile.push-up-fourths > *:nth-child(4n+0),.orderly-on-mobile.push-up-fifths > *:nth-child(5n+0),
137 | .push-up,.pull-up-2x,.pull-up-3x,.pull-up-4x,.pull-up-5x,.push-up-2x,.push-up-3x,.push-up-4x,.push-up-5x{top: 0;}
138 | .orderly-on-mobile.pull-down-seconds > *:nth-child(2n+0),.orderly-on-mobile.pull-down-thirds > *:nth-child(3n+0),
139 | .orderly-on-mobile.pull-down-fourths > *:nth-child(4n+0),.orderly-on-mobile.pull-down-fifths > *:nth-child(5n+0),
140 | .pull-down,.orderly-on-mobile.push-down-seconds > *:nth-child(2n+0),.orderly-on-mobile.push-down-thirds > *:nth-child(3n+0),
141 | .orderly-on-mobile.push-down-fourths > *:nth-child(4n+0),.orderly-on-mobile.push-down-fifths > *:nth-child(5n+0),
142 | .push-down,.pull-down-2x,.pull-down-3x,.pull-down-4x,.pull-down-5x,.push-down-2x,.push-down-3x,.push-down-4x,.push-down-5x{bottom: 0;}
143 | }
--------------------------------------------------------------------------------
/source/methods/print-grid.css:
--------------------------------------------------------------------------------
1 | /* Print Grid */
2 | @import url('variables.css');
3 |
4 | .printgrid, .pgrid{
5 | -moz-column-fill:auto; -webkit-column-fill:auto; column-fill:auto;
6 | -moz-column-count: var(--colcount); -webkit-column-count: var(--colcount); column-count: var(--colcount);
7 | -webkit-column-gap: var(--colgap); column-gap: var(--colgap); -moz-column-gap: var(--colgap);
8 | margin: 0; padding: 0;
9 | }
10 | .printgrid.balance, .pgrid.balance { -moz-column-fill:balance; -webkit-column-fill:balance; column-fill:balance; }
11 | .printgrid>.c-span, .pgrid>.c-span, .c-span{-webkit-column-span: all; column-span: all;}
12 | .printgrid>ul, .pgrid>ul, .printgrid>ol, .pgrid>ol { margin: 0; padding: 0;}
13 |
14 | .colcount{-moz-column-count: var(--colcount); -webkit-column-count: var(--colcount); column-count: var(--colcount);}
15 | .cc1, .col1, .single-col { -moz-column-count:1; -webkit-column-count:1; column-count:1; }
16 | .cc2, .col2, .double-col { -moz-column-count:2; -webkit-column-count:2; column-count:2; }
17 | .cc3, .col3, .triple-col { -moz-column-count:3; -webkit-column-count:3; column-count:3; }
18 | .cc4, .col4, .quad-col { -moz-column-count:4; -webkit-column-count:4; column-count:4; }
19 | .cc5, .col5, .quint-col { -moz-column-count:5; -webkit-column-count:5; column-count:5; }
20 | .cc6, .col6, .six-col { -moz-column-count:6; -webkit-column-count:6; column-count:6; }
21 | .cc7, .col7, .sept-col { -moz-column-count:7; -webkit-column-count:7; column-count:7; }
22 | .cc8, .col8, .oct-col { -moz-column-count:8; -webkit-column-count:8; column-count:8; }
23 | .cc9, .col9 { -moz-column-count:9; -webkit-column-count:9; column-count:9; }
24 | .cc10 { -moz-column-count:10; -webkit-column-count:10; column-count:10; }
25 | .cc11 { -moz-column-count:11; -webkit-column-count:11; column-count:11; }
26 | .cc12 { -moz-column-count:12; -webkit-column-count:12; column-count:12; }
27 |
28 | .colwidth{-moz-column-width: var(--colwidth); -webkit-column-width: var(--colwidth); column-width: var(--colwidth);}
29 | .cw-cm-1 { -moz-column-width: 1cm; -webkit-column-width: 1cm; column-width: 1cm;}
30 | .cw-cm-2 { -moz-column-width: 2cm; -webkit-column-width: 2cm; column-width: 2cm;}
31 | .cw-cm-3 { -moz-column-width: 3cm; -webkit-column-width: 3cm; column-width: 3cm;}
32 | .cw-cm-4 { -moz-column-width: 4cm; -webkit-column-width: 4cm; column-width: 4cm;}
33 | .cw-cm-5 { -moz-column-width: 5cm; -webkit-column-width: 5cm; column-width: 5cm;}
34 | .cw-cm-6 { -moz-column-width: 6cm; -webkit-column-width: 6cm; column-width: 6cm;}
35 | .cw-cm-7 { -moz-column-width: 7cm; -webkit-column-width: 7cm; column-width: 7cm;}
36 | .cw-cm-8 { -moz-column-width: 8cm; -webkit-column-width: 8cm; column-width: 8cm;}
37 | .cw-cm-9 { -moz-column-width: 9cm; -webkit-column-width: 9cm; column-width: 9cm;}
38 | .cw-cm-10 { -moz-column-width: 10cm; -webkit-column-width: 10cm; column-width: 10cm;}
39 | .cw-cm-11 { -moz-column-width: 11cm; -webkit-column-width: 11cm; column-width: 11cm;}
40 | .cw-cm-12 { -moz-column-width: 12cm; -webkit-column-width: 12cm; column-width: 12cm;}
41 | .cw-em-5 { -moz-column-width: 5em; -webkit-column-width: 5em; column-width: 5em;}
42 | .cw-em-10 { -moz-column-width: 10em; -webkit-column-width: 10em; column-width: 10em;}
43 | .cw-em-15 { -moz-column-width: 15em; -webkit-column-width: 15em; column-width: 15em;}
44 | .cw-em-20 { -moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;}
45 | .cw-em-25 { -moz-column-width: 25em; -webkit-column-width: 25em; column-width: 25em;}
46 | .cw-em-30 { -moz-column-width: 30em; -webkit-column-width: 30em; column-width: 30em;}
47 |
48 | .col-gap{-webkit-column-gap: var(--colgap); column-gap: var(--colgap); -moz-column-gap: var(--colgap);}
49 | .no-gap { -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0;}
50 | .cg-2x { -webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em;}
51 | .cg-3x { -webkit-column-gap: 3em; -moz-column-gap: 3em; column-gap: 3em;}
52 | .cg-4x { -webkit-column-gap: 4em; -moz-column-gap: 4em; column-gap: 4em;}
53 | .cg-5x { -webkit-column-gap: 5em; -moz-column-gap: 5em; column-gap: 5em;}
54 | .cg-6x { -webkit-column-gap: 6em; -moz-column-gap: 6em; column-gap: 6em;}
55 |
56 | /* paper sizes */
57 | .paper {display: block; padding: 0; margin: 0 auto; width: 100%; height: auto;}
58 | .paper>.page {
59 | box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
60 | margin: 0 auto;
61 | }
62 | .paper>.page.padded, .paper>.page.pad{padding: 1cm;}
63 | .paper>.page.biz-card.padded, .paper>.page.biz-card.pad{padding:2mm;}
64 | .paper>.page.no-pad{padding: 0;}
65 | .paper>.page.a0 { width: 23.1in; max-width: 841mm; height: 46.8in; max-height: 1189mm;}
66 | .paper>.page.a0.landscape { width: 46.8in; max-width: 1189mm; height: 33.1in; max-height: 841mm;}
67 | .paper>.page.a1 { width: 23.4in; max-width: 594mm; height: 33.1in; max-height: 841mm;}
68 | .paper>.page.a1.landscape { width: 33.1in; max-width: 841mm; height: 23.4in; max-height: 594mm;}
69 | .paper>.page.a2 { width: 16.5in; max-width: 420mm; height: 23.4in; max-height: 594mm;}
70 | .paper>.page.a2.landscape { width: 23.4in; max-width: 594mm; height: 16.5in; max-height: 420mm;}
71 | .paper>.page.a3 { width: 11.7in; max-width: 297mm; height: 16.5in; max-height: 420mm;}
72 | .paper>.page.a3.landscape { width: 16.5in; max-width: 420mm; height: 11.7in; max-height: 297mm;}
73 | .paper>.page.a4 { width: 8.3in; max-width: 210mm; height: 11.7in; max-height: 297mm;}
74 | .paper>.page.a4.landscape { width: 11.7in; max-width: 297mm; height: 8.3in; max-height: 210mm;}
75 | .paper>.page.a5 { width: 5.8in; max-width: 148mm; height: 8.3in; max-height: 210mm;}
76 | .paper>.page.a5.landscape { width: 8.3in; max-width: 210mm; height: 5.8in; max-height: 148mm;}
77 | .paper>.page.a6 { width: 4.1in; max-width: 105mm; height: 5.8in; max-height: 148mm;}
78 | .paper>.page.a6.landscape { width: 5.8in; max-width: 148mm; height: 4.1in; max-height: 105mm;}
79 | .paper>.page.a7 { width: 2.9in; max-width: 74mm; height: 4.1in; max-height: 105mm;}
80 | .paper>.page.a7.landscape { width: 4.1in; max-width: 105mm; height: 2.9in; max-height: 74mm;}
81 | .paper>.page.a8 { width: 2.0in; max-width: 52mm; height: 2.9in; max-height: 74mm;}
82 | .paper>.page.a8.landscape { width: 2.9in; max-width: 74mm; height: 2.0in; max-height: 52mm;}
83 | .paper>.page.a9 { width: 1.5in; max-width: 37mm; height: 2.0in; max-height: 52mm;}
84 | .paper>.page.a9.landscape { width: 2.0in; max-width: 52mm; height: 1.5in; max-height: 37mm;}
85 | .paper>.page.a10 { width: 1.0in; max-width: 26mm; height: 1.5in; max-height: 37mm;}
86 | .paper>.page.a10.landscape { width: 1.5in; max-width: 37mm; height: 1.0in; max-height: 26mm;}
87 | .paper>.page.b5 { width: 176mm; max-width: 176mm; height: 250mm; max-height: 250mm;}
88 | .paper>.page.b5.landscape { width: 250mm; max-width: 250mm; height: 176mm; max-height: 176mm;}
89 | .paper>.page.c5 { width: 162mm; max-width: 162mm; height: 229mm; max-height: 229mm;}
90 | .paper>.page.c5.landscape { width: 229mm; max-width: 229mm; height: 162mm; max-height: 162mm;}
91 | .paper>.page.biz-card {width: 2in; max-width: 51mm; height: 3.5in; max-height: 89mm;}
92 | .paper>.page.biz-card.landscape{width: 3.5in; max-width: 89mm; height: 2in; max-height: 51mm;}
93 | .paper>.page.letter, .paper>.page.ansi-a { width: 8.5in; max-width: 216mm; height: 11in; max-height: 279mm;}
94 | .paper>.page.letter.landscape, .paper>.page.ansi-a.landscape { width: 11in; max-width: 279mm; height: 8.5in; max-height: 216mm;}
95 | .paper>.page.half-letter, .paper>.page.statement, .paper>.page.memo {
96 | width: 5.5in; max-width: 140mm; height: 8.5in; max-height: 216mm;
97 | }
98 | .paper>.page.half-letter.landscape, .paper>.page.statement.landscape, .paper>.page.memo.landscape {
99 | width: 8.5in; max-width: 216mm; height: 5.5in; max-height: 140mm;
100 | }
101 | .paper>.page.legal {width: 8.5in; max-width: 216mm; height: 14in; max-height: 356mm;}
102 | .paper>.page.legal.landscape {width: 14in; max-width: 356mm; height: 8.5in; max-height: 216mm;}
103 | .paper>.page.gov-legal {width: 8.5in; max-width: 216mm; height: 13in; max-height: 330mm;}
104 | .paper>.page.gov-legal.landscape {width: 13in; max-width: 330mm; height: 8.5in; max-height: 216mm;}
105 | .paper>.page.gov-letter {width: 8in; max-width: 203mm; height: 10.5in; max-height: 267mm;}
106 | .paper>.page.gov-letter.landscape {width: 10.5in; max-width: 267mm; height: 8in; max-height: 203mm;}
107 | .paper>.page.edp {width: 11in; max-width: 279mm; height: 14in; max-height: 356mm;}
108 | .paper>.page.edp.landscape {width: 14in; max-width: 356mm; height: 11in; max-height: 279mm;}
109 | .paper>.page.tabloid, .paper>.page.ansi-b {width: 11in; max-width: 279mm; height: 17in; max-height: 432mm;}
110 | .paper>.page.ledger, .paper>.page.ansi-b.landscape { width: 17in; max-width: 432mm; height: 11in; max-height: 279mm;}
111 | .paper>.page.jr-legal, .paper>.page.junior-legal {width: 5in; max-width: 127mm; height: 8in; max-height: 203mm;}
112 | .paper>.page.jr-legal.landscape, .paper>.page.junior-legal.landscape {
113 | width: 8in; max-width: 203mm; height: 5in; max-height: 127mm;
114 | }
115 | .paper>.page.ansi-c {width: 17in; max-width: 432mm; height: 22in; max-height:559mm;}
116 | .paper>.page.ansi-c.landscape {width: 22in; max-width: 559mm; height: 17in; max-height:432mm;}
117 | .paper>.page.ansi-d {width: 22in; max-width: 559mm; height: 34in; max-height: 864mm;}
118 | .paper>.page.ansi-d.landscape {width: 34in; max-width: 864mm; height: 22in; max-height: 559mm;}
119 | .paper>.page.ansi-e {width: 34in; max-width: 864mm; height: 44in; max-height: 1118mm;}
120 | .paper>.page.ansi-e.landscape {width: 44in; max-width: 1118mm; height: 34in; max-height: 864mm;}
121 | .paper>.page.arch-a {width: 9in; max-width: 229mm; height: 12in; max-height: 305mm;}
122 | .paper>.page.arch-a.landscape {width: 12in; max-width: 305mm; height: 9in; max-height: 229mm;}
123 | .paper>.page.arch-b {width: 12in; max-width: 305mm; height: 18in; max-height: 457mm;}
124 | .paper>.page.arch-b.landscape {width: 18in; max-width: 457mm; height: 12in; max-height: 305mm;}
125 | .paper>.page.arch-c {width: 18in; max-width: 457mm; height: 24in; max-height: 610mm;}
126 | .paper>.page.arch-c.landscape {width: 24in; max-width: 610mm; height: 18in; max-height: 457mm;}
127 | .paper>.page.arch-d {width: 24in; max-width: 610mm; height: 36in; max-height: 914mm;}
128 | .paper>.page.arch-d.landscape {width: 36in; max-width: 914mm; height: 24in; max-height: 610mm;}
129 | .paper>.page.arch-e {width: 36in; max-width: 914mm; height: 48in; max-height: 1219mm;}
130 | .paper>.page.arch-e.landscape {width: 48in; max-width: 1219mm; height: 36in; max-height: 914mm;}
131 | .paper>.page.arch-e1 {width: 30in; max-width: 762mm; height: 42in; max-height: 1067mm;}
132 | .paper>.page.arch-e1.landscape {width: 42in; max-width: 1067mm; height: 30in; max-height: 762mm;}
--------------------------------------------------------------------------------
/css-grid.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
181 |
209 |
182 |
204 | Tiles (thirds)
183 |-
184 |
- Tile 1 185 |
- Tile 2 186 |
- Tile 3 187 |
- Tile 4 188 |
- Tile 5 189 |
- Tile 6 190 |
Blocks
192 |
193 |
203 |
194 |
196 | Block 1
195 |
197 |
199 | Block 2
198 |
200 |
202 | Block 3
201 |
205 |
208 | Sidebar
206 |This sidebar becomes full-width on extra small devices.
207 |
24 |
30 |
31 |
32 |
33 | .grid.col-1.row-full.fh
34 |
35 |
40 |
41 |
42 |
36 |
39 | Single Column
37 |This 1-column grid row is full-height: .row-full
38 |.grid.col-2.row-half.fh
43 |
44 |
53 |
54 |
55 |
45 |
48 | Column 1
46 |This 2-column grid row is half-height.
47 |
49 |
52 | Column 2
50 |51 |
.grid.col-3.row-one-third.fh
56 |
57 |
58 |
59 |
60 |
61 |
62 | Column 1
Column 2
Column 3
.grid.col-3.col-max
63 |
64 |
65 |
68 |
69 |
70 |
71 | Col 1
Column 2
66 |Three-column grid with column-width dependent on widest column.
67 |Col 3
.grid.col-3.col-min
72 |
73 |
74 |
77 |
78 |
79 |
80 |
81 | Col 1
Column 2
75 |Three-column grid with column-width dependent on smallest column.
76 |Col 3
.grid.custom-template.fh
82 |
83 |
84 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | Col 1
Column 2
85 |.grid.col-min
Three-column grid with column-width dependent on smallest column.
Col 3
Col 3
Col 3
Col 3
.grid.col-4.row-one-fourth.fh
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 | Column 1
Column 2
Column 3
Column 4
.grid.col-5
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 | Column 1
Column 2
Column 3
Column 4
Column 5
.grid.col-6
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 | Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
125 |
130 |
126 |
129 | Grid Gaps
127 |Apply .gap class to grid wrapper.
128 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 | Box 1
Box 2
Box 3
Box 4
139 |
144 |
140 |
143 | Column Start Position
141 |Apply .c-start-X to a child element, where X can be 1 - 6.
142 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 | Box 1
This box starts in the 2nd column.
Box 2
Box 3
Box 4
Box 5
Box 6
155 |
160 |
156 |
159 | Row Start Position
157 |Apply .r-start-X to a child element, where X can be 1 - 6.
158 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 | Box 1
This box starts on the 2nd row.
Box 2
Box 3
Box 4
Box 5
Box 6
171 |
176 |
172 |
175 | Column Span
173 |Apply .c-span-X to a child element, where X can be 1 - 6.
174 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 | Box 1
This box spans 3 columns.
Box 2
Box 3
Box 4
Box 5
Box 6
187 |
192 |
188 |
191 | Row Span
189 |Apply .r-span-X to a child element, where X can be 1 - 6.
190 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
--------------------------------------------------------------------------------
/panes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Box 1
This box spans 2 rows.
Box 2
Box 3
Box 4
Box 5
Box 6
20 |
26 |
27 |
28 |
29 |
30 |
35 |
36 |
37 |
38 |
31 |
34 | .pane.full
32 |This is a brick centered in the middle of a full pane.
33 |.pane.halves
39 |
40 |
46 |
47 |
48 |
49 | Pane 1
41 | Pane 2
42 | Pane 3
43 | Pane 4
44 | Pane 5 (NOT SHOWN)
45 | .pane.full.halves
50 |
51 |
55 |
56 |
57 |
58 | Pane 1
52 | Pane 2
53 | Pane 3 (NOT SHOWN)
54 | .pane.thirds
59 |
60 |
71 |
72 | \
73 |
74 | Pane 1
61 | Pane 2
62 | Pane 3
63 | Pane 4
64 | Pane 5
65 | Pane 6
66 | Pane 7
67 | Pane 8
68 | Pane 9
69 | Pane 10 (NOT SHOWN)
70 | .pane.full.thirds
75 |
76 |
81 |
82 |
83 |
84 | Pane 1
77 | Pane 2
78 | Pane 3
79 | Pane 4 (NOT SHOWN)
80 | .pane.quarters
85 |
86 |
104 |
105 |
106 |
107 | Pane 1
87 | Pane 2
88 | Pane 3
89 | Pane 4
90 | Pane 5
91 | Pane 6
92 | Pane 7
93 | Pane 8
94 | Pane 9
95 | Pane 10
96 | Pane 11
97 | Pane 12
98 | Pane 13
99 | Pane 14
100 | Pane 15
101 | Pane 16
102 | Pane 17 (NOT SHOWN)
103 | .pane.full.quarters
108 |
109 |
115 |
116 |
117 |
118 | Pane 1
110 | Pane 2
111 | Pane 3
112 | Pane 4
113 | Pane 5 (NOT SHOWN)
114 | .pane.fifths
119 |
120 |
147 |
148 |
149 |
150 | Pane 1
121 | Pane 2
122 | Pane 3
123 | Pane 4
124 | Pane 5
125 | Pane 6
126 | Pane 7
127 | Pane 8
128 | Pane 9
129 | Pane 10
130 | Pane 11
131 | Pane 12
132 | Pane 13
133 | Pane 14
134 | Pane 15
135 | Pane 16
136 | Pane 17
137 | Pane 18
138 | Pane 19
139 | Pane 20
140 | Pane 21
141 | Pane 22
142 | Pane 23
143 | Pane 24
144 | Pane 25
145 | Pane 26 (NOT SHOWN)
146 | .pane.full.fifths
151 |
152 |
159 |
160 |
161 |
162 | Pane 1
153 | Pane 2
154 | Pane 3
155 | Pane 4
156 | Pane 5
157 | Pane 6 (NOT SHOWN)
158 | .pane.sixths
163 |
164 |
202 |
203 |
204 |
205 | Pane 1
165 | Pane 2
166 | Pane 3
167 | Pane 4
168 | Pane 5
169 | Pane 6
170 | Pane 7
171 | Pane 8
172 | Pane 9
173 | Pane 10
174 | Pane 11
175 | Pane 12
176 | Pane 13
177 | Pane 14
178 | Pane 15
179 | Pane 16
180 | Pane 17
181 | Pane 18
182 | Pane 19
183 | Pane 20
184 | Pane 21
185 | Pane 22
186 | Pane 23
187 | Pane 24
188 | Pane 25
189 | Pane 26
190 | Pane 27
191 | Pane 28
192 | Pane 29
193 | Pane 30
194 | Pane 31
195 | Pane 32
196 | Pane 33
197 | Pane 34
198 | Pane 35
199 | Pane 36
200 | Pane 37 (NOT SHOWN)
201 | .pane.full.sixths
206 |
207 |
215 |
216 |
217 |
218 | Pane 1
208 | Pane 2
209 | Pane 3
210 | Pane 4
211 | Pane 5
212 | Pane 6
213 | Pane 7 (NOT SHOWN)
214 | Quarters x Halves (4x2)
.pane.quarters.ph-halves
219 |
220 |
252 |
253 |
254 |
255 |
--------------------------------------------------------------------------------
/chaos-grid-randomize.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Pane 1
221 | Pane 2
222 | Pane 3
223 | Pane 4
224 | Pane 5
225 | Pane 6
226 | Pane 7
227 | Pane 8
228 |
229 | Pane 9
230 | Pane 10
231 | Pane 11
232 | Pane 12
233 | Pane 13
234 | Pane 14
235 | Pane 15
236 | Pane 16
237 | Pane 17
238 | Pane 18
239 | Pane 19
240 | Pane 20
241 | Pane 21
242 | Pane 22
243 | Pane 23
244 | Pane 24
245 | Pane 25
246 | Pane 26
247 | Pane 27
248 | Pane 28
249 | Pane 29
250 | Pane 30
251 |
23 |
31 |
24 |
30 | cHaOs GrId: rANdoMIze
25 |The anti-grid grid... randomized using vanilla javascript.
26 |Include source/methods/js/chaos-grid.js before the closing body tag.
27 | Documentation » 28 | 29 |
32 |
35 |
36 | .chaos-grid.randomize
33 |DEMO: Refresh page to see elements randomly positioned.
34 |
37 |
38 |
84 |
85 |
86 |
87 |
39 |
40 |
46 |
49 |
50 |
51 |
54 |
55 |
56 |
57 |
59 |
60 |
65 | 
66 | Professor Chaos
67 |
68 |
69 | 
70 | I am
a link 71 |
72 |
73 |
74 |
77 |
78 |
79 |
82 |
83 |
41 |
44 |
45 | Winter DIV
42 |I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.
43 |Summer Surf Section
52 |This is a sufin' summery section element.
53 |Autumn Article
57 |
Autumn is my favorite season.
[end of article]
I am an impactful blockquote block.61 | 62 |
PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.
66 | a link 71 |
72 |
73 | Cellophane News
75 |The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.
76 |
78 | Section
80 |I am a section element. I take up 25% of the width on large devices and up.
81 |
88 |
91 | .chaos-grid.randomize.tilt
89 |DEMO: Elements should be skewed and rotated in random positions.
90 |
92 |
93 |
139 |
140 |
141 |
142 |
94 |
95 |
101 |
104 |
105 |
106 |
109 |
110 |
111 |
112 |
114 |
115 |
120 |
121 | Professor Chaos
122 |
123 |
124 |
125 | I am
a link 126 |
127 |
128 |
129 |
132 |
133 |
134 |
137 |
138 |
96 |
99 |
100 | Winter DIV
97 |I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.
98 |Spring Article
102 |This is a springtime article element, and I have no set width.
103 |Summer Surf Section
107 |This is a sufin' summery section element.
108 |Autumn Article
112 |
Autumn is my favorite season.
[end of article]
I am an impactful blockquote block.116 | 117 |
PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.
121 | a link 126 |
127 |
128 | Cellophane News
130 |The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.
131 |
133 | Section
135 |I am a section element. I take up 25% of the width on large devices and up.
136 |
143 |
146 | .chaos-grid.randomize.scale
144 |DEMO: Elements should be randomly scaled between 0.5 and 3 times normal size, and placed in random positions.
145 |
147 |
148 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
--------------------------------------------------------------------------------
/papers.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
149 |
150 |
156 |
159 |
160 |
161 |
164 |
165 |
166 |
167 |
169 |
170 |
175 |
176 | Professor Chaos
177 |
178 |
179 |
180 | I am
a link 181 |
182 |
183 |
184 |
187 |
188 |
189 |
192 |
193 |
151 |
154 |
155 | Winter DIV
152 |I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.
153 |Spring Article
157 |This is a springtime article element, and I have no set width.
158 |Summer Surf Section
162 |This is a sufin' summery section element.
163 |Autumn Article
167 |
Autumn is my favorite season.
[end of article]
I am an impactful blockquote block.171 | 172 |
PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.
176 | a link 181 |
182 |
183 | Cellophane News
185 |The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.
186 |
188 | Section
190 |I am a section element. I take up 25% of the width on large devices and up.
191 |
20 |
21 | Documentation »
22 |
23 |
PAPER PAGES
21 | Documentation »
22 |
23 | All By default, all paper pages are in the portrait orientation. All can be changed to a landscape orientation by adding the class landscape. An example might be:
24 | .paper > .page.letter.landscape
This will create a 11 x 8.5 inch paper page.
27 |
67 |
Supported Paper Sizes
28 |
29 |
-
30 |
- .a0 (23.1 x 46.8 in) 31 |
- .a1 (23.4 x 33.1 in) 32 |
- .a2 (16.5 x 23.4 in) 33 |
- .a3 (11.7 x 16.5 in) 34 |
- .a4 (8.3 x 11.7 in) 35 |
- .a5 (5.8 x 8.3 in) 36 |
- .a6 (4.1 x 5.8 in) 37 |
- .a7 (2.9 x 4.1 in) 38 |
- .a8 (2.0 x 2.9 in) 39 |
- .a9 (1.5 x 2.0 in) 40 |
- .a10 (1 x 1.5 in) 41 |
- .b5 (176 x 250 mm) 42 |
- .c5 (162 x 229 mm) 43 |
- .biz-card (2 x 3.5 in) 44 |
- .gov-legal (8.5 x 13 in) 45 |
- .gov-letter (10.5 x 8 in) 46 |
48 |
-
49 |
- .edp (11 x 14 in) 50 |
- .letter / .ansi-a (8.5 x 11 in) 51 |
- .half-letter / .memo / .statement (5.5 x 8.5 in) 52 |
- .legal (8.5 x 14 in) 53 |
- .tabloid / .ansi-b (11 x 17 in) 54 |
- .ledger (17 x 11 in) 55 |
- .jr-legal (5 x 8 in) 56 |
- .ansi-c (17 x 22 in) 57 |
- .ansi-d (22 x 34 in) 58 |
- .ansi-e (34 x 44 in) 59 |
- .arch-a (9 x 12 in) 60 |
- .arch-b (12 x 18 in) 61 |
- .arch-c (18 x 24 in) 62 |
- .arch-d (24 x 36 in) 63 |
- .arch-e (36 x 48 in) 64 |
- .arch-e1 (34 x 44 in) 65 |
71 |
125 |
126 |
127 |
192 |
193 |
194 |
--------------------------------------------------------------------------------
/source/methods/b3grid.css:
--------------------------------------------------------------------------------
1 | /* B3GRID - Base Blocks and Bricks Grid */
2 | @import url('variables.css');
3 |
4 | /* Container Wrappers */
5 | .container, .container-fluid, .container-600, .container-960,
6 | .container-1200, .container-1600, .wrapper, .wrap {
7 | margin-right: auto; margin-left: auto;
8 | padding-right: 0; padding-left: 0;
9 | }
10 | .container-fluid, .wrapper, .wrap { width: 100%; max-width: 100%; }
11 | .container-600{ max-width:600px; }
12 | .container-960 { max-width: 960px; }
13 | .container-1200 { max-width: 1200px; }
14 | .container-1600 { max-width: 1600px; }
15 | .no-padding { padding-right: 0 !important; padding-left: 0 !important; } /* Enforce no padding */
16 |
17 | .row, .block-wrap, .blocks, .brick-wrap, .bricks, .tiles, .pane {
18 | box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
19 | display: -ms-flex; display: -webkit-box; display: -moz-box;
20 | display: -ms-flexbox; display: -webkit-flex; display: flex;
21 | -ms-flex: 0 1 auto; -webkit-box-flex: 0; flex: 0 1 auto;
22 | -ms-flex-direction: row; -moz-flex-direction: row; -webkit-flex-direction: row;
23 | -webkit-box-orient: horizontal;
24 | -webkit-box-direction: normal; flex-direction: row;
25 | -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap;
26 | margin-right: 0; margin-left: 0;
27 | }
28 | .block, .brick, .tiles>li {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
29 | .block {display: block; flex: 1; -ms-flex: 1; -webkit-flex: 1; flex-grow: 1;}
30 | .brick {display: inline-block; margin: 0; padding: 0.5em;}
31 |
32 | /* Align items in a vertical column */
33 | .col, .cols, .column, .columns {
34 | flex-direction: column; -webkit-flex-direction: column;
35 | -ms-flex-direction: column; -moz-flex-direction: column;
36 | -webkit-box-orient: vertical;
37 | }
38 |
39 | /* Directions */
40 | .row.reverse, .row.rev, .row-rev, .tiles.rev {
41 | -ms-flex-direction: row-reverse; -moz-flex-direction: row-reverse; -webkit-flex-direction: row-reverse;
42 | -webkit-box-orient: horizontal;
43 | -webkit-box-direction: reverse; flex-direction: row-reverse;
44 | }
45 | .col.reverse, .col.rev, .col-rev {
46 | -ms-flex-direction: column-reverse; -moz-flex-direction: column-reverse;
47 | -webkit-flex-direction: column-reverse;
48 | -webkit-box-orient: vertical;
49 | -webkit-box-direction: reverse; flex-direction: column-reverse;
50 | }
51 |
52 | /* ORDERING */
53 | .first { -webkit-box-ordinal-group: 0; -moz-box-ordinal-group: 0; -ms-flex-order: -1; -webkit-order: -1; order: -1; }
54 | .featured { -webkit-box-ordinal-group: 0; -moz-box-ordinal-group: 0; -ms-flex-order: -2; -webkit-order: -2; order: -2; }
55 | .last { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 1; -webkit-order: 1; order: 1; }
56 |
57 | /* Tiles */
58 | ul.tiles { list-style-type: none !important; width: 100%; padding: 0; margin: 0;}
59 | ul.tiles>li {max-width: 100%; padding: 0; margin: 0;}
60 | ul.tiles.padded>li {padding: var(--tilepad);}
61 | ul.tiles>li>a {display: block; width: 100%; height: 100%; padding: var(--tilepad);}
62 |
63 | /* Alignments */
64 | .top, .start {
65 | -ms-flex-align: start; -webkit-box-align: start;
66 | align-self: flex-start; -webkit-align-self: flex-start; align-items: flex-start; -webkit-align-items: flex-start;
67 | -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start;
68 | -moz-justify-content: flex-start; -webkit-justify-content: flex-start;
69 | text-align: start;
70 | }
71 | .bottom, .end {
72 | -ms-flex-pack: end; -webkit-box-pack: end; -ms-flex-align: end; -webkit-box-align: end;
73 | justify-content: flex-end; -moz-justify-content: flex-end; -webkit-justify-content: flex-end;
74 | align-self: flex-end; -webkit-align-self: flex-end; align-items: flex-end; -webkit-align-items: flex-end;
75 | text-align: end;
76 | }
77 | .center, .middle {
78 | -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center;
79 | -moz-justify-content: center; -webkit-justify-content: center;
80 | -webkit-align-self: center;
81 | -ms-flex-align: center; -webkit-box-align: center;
82 | align-items: center; -webkit-align-items: center;
83 | align-content: center; -webkit-align-content: center;
84 | text-align: center;
85 | }
86 | .around {
87 | -ms-flex-pack: distribute;
88 | justify-content: space-around; -moz-justify-content: space-around; -webkit-justify-content: space-around;
89 | }
90 | .evenly {justify-content: space-evenly; -moz-justify-content: space-evenly; -webkit-justify-content: space-evenly;}
91 | .between {
92 | -ms-flex-pack: justify; -webkit-box-pack: justify;
93 | justify-content: space-between; -moz-justify-content: space-between; -webkit-justify-content: space-between;
94 | }
95 | .stretch, ul.tiles>li {
96 | align-self: stretch !important;
97 | -webkit-align-self: stretch !important;
98 | align-items: stretch !important;
99 | -webkit-align-items: stretch !important;
100 | align-content: stretch !important;
101 | -webkit-align-content: stretch !important;
102 | }
103 | .baseline {
104 | align-items: baseline !important;
105 | -webkit-align-items: baseline !important;
106 | align-self: baseline !important;
107 | -webkit-align-self: baseline !important;
108 | align-content: baseline !important;
109 | -webkit-align-content: baseline !important;
110 | }
111 |
112 | /* Base Widths */
113 | .bw-5, .bw5, .b5 { -ms-flex-preferred-size: 5%; -webkit-flex-basis: 5%; flex-basis: 5%; width: 5%; max-width: 5%; }
114 | .bw-10, .bw10, .b10 { -ms-flex-preferred-size: 10%; -webkit-flex-basis: 10%; flex-basis: 10%; width: 10%; max-width: 10%; }
115 | .bw-15, .bw15, .b15 { -ms-flex-preferred-size: 15%; -webkit-flex-basis: 15%; flex-basis: 15%; width: 15%; max-width: 15%; }
116 | .bw-20, .bw20, .b20 { -ms-flex-preferred-size: 20%; -webkit-flex-basis: 20%; flex-basis: 20%; width: 20%; max-width: 20%; }
117 | .bw-25, .bw25, .b25 { -ms-flex-preferred-size: 25%; -webkit-flex-basis: 25%; flex-basis: 25%; width: 25%; max-width: 25%; }
118 | .bw-30 .bw30, .b30 { -ms-flex-preferred-size: 30%; -webkit-flex-basis: 30%; flex-basis: 30%; width: 30%; max-width: 30%; }
119 | .bw-33, .bw33, .b33, .bw-34, .bw34, .b34, .bw-one-third { -ms-flex-preferred-size: 33.33%; -webkit-flex-basis: 33.33%; flex-basis: 33.33%; width: 33.33%; max-width: 33.33%; }
120 | .bw-35, .bw35, .b35 { -ms-flex-preferred-size: 35%; -webkit-flex-basis: 35%; flex-basis: 35%; width: 35%; max-width: 35%; }
121 | .bw-40, .bw40, .b40 { -ms-flex-preferred-size: 40%; -webkit-flex-basis: 40%; flex-basis: 40%; width: 40%; max-width: 40%; }
122 | .bw-45, .bw45, .b45 { -ms-flex-preferred-size: 45%; -webkit-flex-basis: 45%; flex-basis: 45%; width: 45%; max-width: 45%; }
123 | .bw-50, .bw50, .b50 { -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; flex-basis: 50%; width: 50%; max-width: 50%; }
124 | .bw-55, .bw55, .b55 { -ms-flex-preferred-size: 55%; -webkit-flex-basis: 55%; flex-basis: 55%; width: 55%; max-width: 55%; }
125 | .bw-60, .bw60, .b60 { -ms-flex-preferred-size: 60%; -webkit-flex-basis: 60%; flex-basis: 60%; width: 60%; max-width: 60%; }
126 | .bw-65, .bw65, .b65 { -ms-flex-preferred-size: 65%; -webkit-flex-basis: 65%; flex-basis: 65%; width: 65%; max-width: 65%; }
127 | .bw-66, .bw66, .b66, .bw-67, .bw67, .b67, .bw-two-thirds { -ms-flex-preferred-size: 66.67%; -webkit-flex-basis: 66.67%; flex-basis: 66.67%; width: 66.67%; max-width: 66.67%; }
128 | .bw-70, .bw70, .b70 { -ms-flex-preferred-size: 70%; -webkit-flex-basis: 70%; flex-basis: 70%; width: 70%; max-width: 70%; }
129 | .bw-75, .bw75, .b75 { -ms-flex-preferred-size: 75%; -webkit-flex-basis: 75%; flex-basis: 75%; width: 75%; max-width: 75%; }
130 | .bw-80, .bw80, .b80 { -ms-flex-preferred-size: 80%; -webkit-flex-basis: 80%; flex-basis: 80%; width: 80%; max-width: 80%; }
131 | .bw-85, .bw85, .b85 { -ms-flex-preferred-size: 85%; -webkit-flex-basis: 85%; flex-basis: 85%; width: 85%; max-width: 85%; }
132 | .bw-90, .bw90, .b90 { -ms-flex-preferred-size: 90%; -webkit-flex-basis: 90%; flex-basis: 90%; width: 90%; max-width: 90%; }
133 | .bw-95, .bw95, .b95 { -ms-flex-preferred-size: 95%; -webkit-flex-basis: 95%; flex-basis: 95%; width: 95%; max-width: 95%; }
134 | .bw-100, .bw100, .b100 { -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; width: 100%; max-width: 100%; }
135 |
136 | /* Base Heights (viewport) */
137 | .bh-5, .bh5 { height: 5vh;}
138 | .bh-10, .bh10 { height: 10vh;}
139 | .bh-15, .bh15 { height: 15vh;}
140 | .bh-20, .bh20 { height: 20vh;}
141 | .bh-25, .bh25 { height: 25vh;}
142 | .bh-30, .bh30 { height: 30vh;}
143 | .bh-33, .bh33, .bh-34, .bh34, .bh-one-third { height: 33.33vh;}
144 | .bh-35, .bh35 { height: 35vh;}
145 | .bh-40, .bh40 { height: 40vh;}
146 | .bh-45, .bh45 { height: 45vh;}
147 | .bh-50, .bh50 { height: 50vh;}
148 | .bh-55, .bh55 { height: 55vh;}
149 | .bh-60, .bh60 { height: 60vh;}
150 | .bh-65, .bh65 { height: 65vh;}
151 | .bh-66, .bh66, .bh-67, .bh67, .bh-two-thirds { height: 66.67vh;}
152 | .bh-70, .bh70 { height: 70vh;}
153 | .bh-75, .bh75 { height: 75vh;}
154 | .bh-80, .bh80 { height: 80vh;}
155 | .bh-85, .bh85 { height: 85vh;}
156 | .bh-90, .bh90 { height: 90vh;}
157 | .bh-95, .bh95 { height: 95vh;}
158 | .bh-100, .bh100 { height: 100vh;}
159 |
160 | /* Element Heights (relative) */
161 | .h5 {height: 5%; max-height: 5%;}
162 | .h10 {height: 10%; max-height: 10%;}
163 | .h15 {height: 15%; max-height: 15%;}
164 | .h20 {height: 20%; max-height: 20%;}
165 | .h25 {height: 25%; max-height: 25%;}
166 | .h30 {height: 30%; max-height: 30%;}
167 | .h33, .h34, .h-one-third {height: 33.33%; max-height: 33.33%;}
168 | .h35 {height: 35%; max-height: 35%;}
169 | .h40 {height: 40%; max-height: 40%;}
170 | .h45 {height: 45%; max-height: 45%;}
171 | .h50 {height: 50%; max-height: 50%;}
172 | .h55 {height: 55%; max-height: 55%;}
173 | .h60 {height: 60%; max-height: 60%;}
174 | .h65 {height: 65%; max-height: 65%;}
175 | .h66, .h67, .h-two-thirds {height: 66.67%; max-height: 66.67%;}
176 | .h70 {height: 70%; max-height: 70%;}
177 | .h75 {height: 75%; max-height: 75%;}
178 | .h80 {height: 80%; max-height: 80%;}
179 | .h85 {height: 85%; max-height: 85%;}
180 | .h90 {height: 90%; max-height: 90%;}
181 | .h95 {height: 95%; max-height: 95%;}
182 | .h100 {height: 100%; max-height: 100%;}
183 |
184 | /* Growth Rates */
185 | .block.g0, .block.no-grow { flex-grow: 0; -webkit-flex-grow: 0; -moz-flex-grow: 0; }
186 | .block.g1 { flex-grow: 1; -webkit-flex-grow: 1; -moz-flex-grow: 1; }
187 | .block.g2 { flex-grow: 2; -webkit-flex-grow: 2; -moz-flex-grow: 2; }
188 | .block.g3 { flex-grow: 3; -webkit-flex-grow: 3; -moz-flex-grow: 3; }
189 | .block.g4 { flex-grow: 4; -webkit-flex-grow: 4; -moz-flex-grow: 4; }
190 | .block.g5 { flex-grow: 5; -webkit-flex-grow: 5; -moz-flex-grow: 5; }
191 | .block.g6 { flex-grow: 6; -webkit-flex-grow: 6; -moz-flex-grow: 6; }
192 |
193 | /* Quick Widths (calulated) */
194 | .sixths>.block, .sixths>.brick, ul.tiles.sixths li {width: calc(100% / 6); max-width: 16.67%;}
195 | .fifths>.block, .fifths>.brick, ul.tiles.fifths li {width: calc(100% / 5); max-width: 20%;}
196 | .quarters>.block, .quarters>.brick, .fourths>.block, .fourths>.brick, ul.tiles.quarters li, ul.tiles.fourths li {width: calc(100% / 4); max-width: 25%;}
197 | .thirds>.block, .thirds>.brick, ul.tiles.thirds li {width: calc(100% / 3); max-width: 33.33%;}
198 | .halves>.block, .halves>.brick, ul.tiles.halves li {width: calc(100% / 2); max-width: 50%;}
199 | .full, .full>.block, .full>.brick, ul.tiles.full li { width:100%; max-width: 100%;}
200 |
201 | /* Panes */
202 | .pane, .pane>.block {
203 | box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
204 | margin: 0; padding: 0; max-width: 100%; overflow: hidden;
205 | }
206 | .pane {width: 100vw; height: 100vh;}
207 | .pane>.block {
208 | -webkit-flex-basis: 100%; flex-basis: 100%;
209 | width: 100%; height: 100%; max-height: 100%;
210 | }
211 | .pane>.block .pane { display: none !important; visibility: hidden !important; }
212 | .pane.halves>.block {-webkit-flex-basis: 50%; flex-basis: 50%; width: 50%; max-width: 50%; height: 50%; max-height: 50%;} /* 2x2 */
213 | .pane.thirds>.block {-webkit-flex-basis: calc(100% / 3); flex-basis: calc(100% / 3); width: calc(100% / 3); max-width: calc(100% / 3); height: calc(100% / 3); max-height: calc(100% / 3);} /* 3x3 */
214 | .pane.quarters>.block {-webkit-flex-basis: 25%; flex-basis: 25%; width: 25%; max-width: 25%; height: 25%; max-height: 25%;} /* 4x4 */
215 | .pane.fifths>.block {-webkit-flex-basis: 20%; flex-basis: 20%; width: 20%; max-width: 20%; height: 20%; max-height: 20%;} /* 5x5 */
216 | .pane.sixths>.block {-webkit-flex-basis: calc(100% / 6); flex-basis: calc(100% / 6); width: calc(100% / 6); max-width: calc(100% / 6); height: calc(100% / 6); max-height: calc(100% / 6);} /* 6x6 */
217 | .pane.halves.full>.block, .pane.thirds.full>.block, .pane.quarters.full>.block, .pane.fifths.full>.block, .pane.sixths.full>.block{
218 | height: 100%; max-height: 100%;
219 | }
220 | .pane.thirds.ph-halves>.block {height: 50%; max-height: 50%;} /* 3x2 */
221 | .pane.quarters.ph-halves>.block {height: 50%; max-height: 50%;} /* 4x2 */
222 | .pane.quarters.ph-thirds>.block {height: calc(100% / 3); max-height: calc(100% / 3);} /* 4x3 */
223 | .pane.fifths.ph-halves>.block {height: 50%; max-height: 50%;} /* 5x2 */
224 | .pane.fifths.ph-thirds>.block {height: calc(100% / 3); max-height: calc(100% / 3);} /* 5x3 */
225 | .pane.fifths.ph-quarters>.block {height: 25%; max-height: 25%;} /* 5x4 */
226 | .pane.sixths.ph-halves>.block {height: 50%; max-height: 50%;} /* 6x2 */
227 | .pane.sixths.ph-thirds>.block {height: calc(100% / 3); max-height: calc(100% / 3);} /* 6x3 */
228 | .pane.sixths.ph-quarters>.block {height: 25%; max-height: 25%;} /* 6x4 */
229 | .pane.sixths.ph-fifths>.block {height: 20%; max-height: 20%;} /* 6x5 */
230 |
231 | .pane.single>.block:nth-child(1n+2), .pane.full.halves>.block:nth-child(1n+3), .pane.halves>.block:nth-child(1n+5),
232 | .pane.thirds.full>.block:nth-child(1n+4), .pane.thirds.ph-halves>.block:nth-child(1n+7), .pane.thirds>.block:nth-child(1n+10),
233 | .pane.quarters.full>.block:nth-child(1n+5), .pane.quarters.ph-halves>.block:nth-child(1n+9), .pane.quarters.ph-thirds>.block:nth-child(1n+13), .pane.quarters>.block:nth-child(1n+17),
234 | .pane.fifths.full>.block:nth-child(1n+6), .pane.fifths.ph-halves>.block:nth-child(1n+11), .pane.fifths.ph-thirds>.block:nth-child(1n+16),
235 | .pane.fifths.ph-quarters>.block:nth-child(1n+21), .pane.fifths>.block:nth-child(1n+26),
236 | .pane.sixths.full>.block:nth-child(1n+7), .pane.sixths.ph-halves>.block:nth-child(1n+13), .pane.sixths.ph-thirds>.block:nth-child(1n+19),
237 | .pane.sixths.ph-quarters>.block:nth-child(1n+25), .pane.sixths.ph-fifths>.block:nth-child(1n+31), .pane.sixths>.block:nth-child(1n+37){
238 | display: none !important; visibility: hidden !important;
239 | }
240 |
--------------------------------------------------------------------------------
/b3grid.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Letter Page
72 |8.5 x 11 in (216 x 279 mm)
73 | 74 |
75 |
112 |
113 | Column Count Demo
76 |
77 |
111 | This demo shows the pgrid layout, which is most useful for printed material. By default, there is one column when no other classes are applied to the pgrid wrapper.
78 | 79 |Two Columns
80 |This paragraph is split into two columns. Individual paragraphs or any other element can have specific column-count classes applied to them individually. If applied to the pgrid wrapper, all elements within it will be split into columns.
81 | 82 |Three Columns
83 |This is a three-column paragraph. Up to 12 columns are supported (cc1 - cc12). The column widths are automatically determined, when no column-width classes are applied. By default, there is 1em of gap spacing between columns.
84 | 85 |Four Columns
86 |
87 |
91 | This is the first paragraph, contained within a .pgrid.cc4 wrapper.
88 |It makes sense that each of these paragraphs should take up one-fourth of the width of the page.
89 |Even if there aren't 4 paragraphs within a .cc4 wrapper (there's 3 here), all content will still be divided up into 4 columns.
90 |Five Columns
92 |In the unordered list below, the 15 items should be split into 3 items per column.
93 |-
94 |
- Item 1 95 |
- Item 2 96 |
- Item 3 97 |
- Item 4 98 |
- Item 5 99 |
- Item 6 100 |
- Item 7 101 |
- Item 8 102 |
- Item 9 103 |
- Item 10 104 |
- Item 11 105 |
- Item 12 106 |
- Item 13 107 |
- Item 14 108 |
- Item 15 109 |
Business Card
114 |
115 |
116 | Portrait
117 |
119 | Portrait
Business
Card
117 | 2in x 3.5in
(51mm x 89mm)
120 |
121 |
124 | Landscape Business Card
122 |3.5in x 2in
(89mm x 51mm)
Half Letter Page
128 |5.5 x 8.5 in (140 x 216 mm)
129 | 130 |
131 |
144 |
145 |
146 | Column Gap Demo
132 |To apply a gap between columns, apply the class col-gap, which uses a CSS variable. Alternatively, we can add gaps that are multiples of the element's default font size, ranging from 2 to 6 times. This demo uses two columns.
133 |2x Gap Width
134 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
135 |3x Gap Width
136 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
137 |4x Gap Width
138 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
139 |5x Gap Width
140 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
141 |6x Gap Width
142 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
143 |A4 Page
147 |8.3 x 11.7 in (210 x 297 mm)
148 | 149 |
150 |
189 |
190 |
191 | Column Width Demo
151 |In multi-column layouts, we may need to make columns wider or narrower than the default. There are two ways to do this: either CM or EM based widths.
152 |2cm / 5em Column Widths
153 |
154 |
159 | Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
155 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
156 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
157 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
158 |4cm / 10em Column Widths
160 |
161 |
166 | Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
162 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
163 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
164 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
165 |6cm / 15em Column Widths
167 |
168 |
174 | HI. I'm a c-span paragraph. I go all the way across.
169 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
170 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
171 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
172 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
173 |8cm / 20em Column Widths
175 |
176 |
181 | Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
177 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
178 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
179 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
180 |12cm / 25em Column Widths
182 |
183 |
188 | Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
184 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
185 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
186 |Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.
187 |
25 |
31 |
32 |
33 |
34 |
35 | B3Grid Express
36 |
37 |
48 |
49 |
50 |
51 | .full
38 | .half
.half
39 | .third
.third
.third
40 | .fourth
.fourth
41 | .fourth
.fourth
42 | .main
43 | .two-thirds
.third
44 | .fifth
.fifth
45 | .fifth
.fifth
46 | .fifth
47 | Base Widths
52 |
53 |
77 |
78 |
79 |
80 | .bw100
54 | .bw95
55 | .bw5
56 | .bw90
57 | .bw10
58 | .bw85
59 | .bw15
60 | .bw80
61 | .bw20
62 | .bw75
63 | .bw25
64 | .bw70
65 | .bw30
66 | .bw65
67 | .bw35
68 | .bw60
69 | .bw40
70 | .bw55
71 | .bw45
72 | .bw50
73 | .bw50
74 | .bw33 / .bw34
.bw-one-third
75 | .bw-one-third
.bw66 / .bw67
.bw-two-thirds
76 | .bw-two-thirds
Base Heights
81 |
82 |
90 |
91 |
92 |
93 | .bh20
83 | .bh25
84 | .bh33 / .bh34
.bh-one-third
85 | .bh-one-third
.bh50
86 | .bh66 / .bh67
.bh-two-thirds
87 | .bh-two-thirds
.bh75
88 | .bh100
89 | Block Growth
94 |
95 |
100 | .g0
96 |
97 |
98 |
99 |
101 |
106 | .g1
102 |
103 |
104 |
105 |
107 |
112 | .g2
108 |
109 |
110 |
111 |
113 |
118 | .g3
114 |
115 |
116 |
117 |
119 |
124 | .g4
120 |
121 |
122 |
123 |
125 |
130 | .g5
126 |
127 |
128 |
129 |
131 |
136 |
137 |
138 |
139 | .g6
132 |
133 |
134 |
135 | Quick Widths
140 |.full
141 |
142 |
144 | .block
143 | .halves
145 |
146 |
149 | .block
147 | .block
148 | .thirds
150 |
151 |
155 | .block
152 | .block
153 | .block
154 | .quarters
156 |
157 |
162 | .block
158 | .block
159 | .block
160 | .block
161 | .fifths
163 |
164 |
170 | .block
165 | .block
166 | .block
167 | .block
168 | .block
169 | .sixths
171 |
172 |
179 |
180 |
181 |
182 | .block
173 | .block
174 | .block
175 | .block
176 | .block
177 | .block
178 | Bricks
183 |Default bricks with specified width on one brick.
184 |
185 |
191 | .brick
186 | .brick
187 | .brick.bw25
188 | .brick
189 | .brick
190 | 192 |
Same as above with .fifths quick-width applied.
193 |
194 |
200 |
201 |
202 |
203 | .brick
195 | .brick
196 | .brick.bw25
197 | .brick
198 | .brick
199 | Tiles
204 |.tiles.padded
205 |-
206 |
- Tile 1 207 |
- Tile 2 208 |
- Tile 3 209 |
- Tile 4 210 |
- Tile 5 211 |
- Tile 6 212 |
214 |
.tiles.quarters
215 |-
216 |
- Tile 1 217 |
- Tile 2 218 |
- Tile 3 219 |
- Tile 4 (LINKED) 220 |
- Tile 5 221 |
- Tile 6 (LINKED) 222 |
Spacing
227 |.around
228 |
229 |
235 | .brick
230 | .brick
231 | .brick
232 | .brick
233 | .brick
234 | .between
236 |
237 |
243 | .brick
238 | .brick
239 | .brick
240 | .brick
241 | .brick
242 | .evenly
244 |
245 |
251 |
252 |
253 |
254 | .brick
246 | .brick
247 | .brick
248 | .brick
249 | .brick
250 | Alignment
255 |.center / .middle
256 |
257 |
259 | .center .brick
258 | .start / .top
260 |
261 |
265 | .brick
262 | .brick
263 | .brick
264 | .end / .bottom
266 |
267 |
271 | .brick
268 | .brick
269 | .brick
270 | .baseline
272 |
273 |
277 | .brick
line 2
line 3
274 | line 2
line 3
.brick.baseline
275 | .brick
line 2
line 3
276 | line 2
line 3
.stretch
278 |
279 |
283 |
284 |
285 |
286 | .brick
line 2
line 3
280 | line 2
line 3
.brick
281 | .brick
line 2
line 3
282 | line 2
line 3
Direction & Ordering
287 |.row-rev
288 |
289 |
295 | brick 1
290 | brick 2
291 | brick 3
292 | brick 4
293 | brick 5
294 | .col
296 |
297 |
303 | brick 1
298 | brick 2
299 | brick 3
300 | brick 4
301 | brick 5
302 | .col-rev
304 |
305 |
311 | brick 1
306 | brick 2
307 | brick 3
308 | brick 4
309 | brick 5
310 | .featured / .first / .last
312 |
313 |
322 |
323 | .last
314 | brick 1
315 | brick 2
316 | brick 3
317 | brick 4
318 | brick 5
319 | .first
320 | .featured
321 | Containers
324 |.container
325 |
326 | .container-600
327 |
328 | .container-960
329 |
330 | .container-1200
331 |
332 | .container-1600
333 |
334 | .container-fluid
335 |
336 |
337 |
342 |
343 |
344 |
345 |
--------------------------------------------------------------------------------
/polygrids.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | -
338 |
- Responsive Demo 339 |
- Panes Demo 340 |
▲
PolyGrids
29 |
31 |
44 |
45 |
55 |
56 |
74 |
75 |
76 | Getting Started
32 |
33 |
MARKUP.
PolyGrids are Flexbox items arranged in a row. Use the following markup:
35 | <div class="polygrid SHAPE SIZE">
<div class="shape">
..content..
36 | </div>
...
</div>
37 |
Where SHAPE and SIZE are a shape and size class.
39 |
40 |
REQUIRED SCRIPT.
The following javascript is required and needs to be placed before the closing body tag:
source/methods/js/poly-grid.js
42 |The javascript automatically inserts the necessary shape elements that will be floated left and right within each shape grid item.
43 |45 |
Constructing Grids
46 |
47 |
SIZES.
Grid shape items have pre-defined widths and heights that are proportionate to the height of the viewport. For example, if we want shape items to occupy 25% of the height of the screen, we would apply the class fourths. Use any of the following size classes:
.sixths - 16.5% (1/6) height
49 | .fifths - 20% (1/5) height
.fourths - 25% (1/4) height
50 | .thirds - 33% (1/3) height
.halves - 50% (1/2) height
51 |
52 |
SHAPES
Use any of the following shape classes:
.circle
.triangle
.rhombus
.hexagon
.octagon
.plus
.hourglass
.chevron
56 |
Additional Options
57 |
58 |
GAPS.
Gap spacing can be added between items for several shape grids. Simply add the class gaps to the polygrid wrapper. In the example below, we have applly gaps to a sixth triangle polygrid:
.gaps.polygrid triangle.sixths
60 |
65 | 1
61 | 2
62 | 3
63 | 4
64 |
66 |
REVERSE.
We can reverse the flow of grid items from last to first by applying the class reverse. In the example below, we have a reversed packed triangle grid:
.reverse.polygrid.triangle.packed.sixths.gaps
68 |
73 | 1
69 | 2
70 | 3
71 | 4
72 |
77 |
78 |
79 |
467 |
468 |
471 |
472 |
473 |
--------------------------------------------------------------------------------
/source/methods/polygrids.css:
--------------------------------------------------------------------------------
1 | /* POLYGRIDS */
2 |
3 | .polygrid { text-align: center;
4 | display: flex; display: -ms-flex; flex-direction: row;
5 | -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap;
6 | justify-content: space-evenly; -moz-justify-content: space-evenly; -webkit-justify-content: space-evenly;
7 | }
8 | .polygrid.packed { padding: 0;
9 | justify-content: flex-start; -moz-justify-content: flex-start; -webkit-justify-content: flex-start;
10 | }
11 | .polygrid.reverse {flex-direction:row-reverse;}
12 | .polygrid:after{display:block; width: 100%; content:''; clear:both;}
13 | .polygrid.inline{width: 100%; display: block; white-space: nowrap; overflow-y: hidden; overflow-x: scroll;}
14 | .polygrid.inline>.shape{white-space:wrap;}
15 | .polygrid.inline.sixths{height: 16.5vh;}
16 | .polygrid.inline.fifths{height: 20vh;}
17 | .polygrid.inline.fourths{height: 25vh;}
18 | .polygrid.inline.thirds{height: 33vh;}
19 | .polygrid.inline.halves{height: 50vh;}
20 |
21 | .polygrid.inline>.shape{display:inline-block; float:left;}
22 | .polygrid.padded>.shape>* {padding: 2rem;}
23 | .polygrid.padded.circle>.shape>*{padding: 0;}
24 | .polygrid.sixths>.shape{width: 16.5vh; height: 16.5vh;}
25 | .polygrid.fifths>.shape{width: 20vh; height: 20vh;}
26 | .polygrid.fourths>.shape{width: 25vh; height: 25vh;}
27 | .polygrid.thirds>.shape {width: 33vh; height: 33vh;}
28 | .polygrid.halves>.shape{width: 50vh; height: 50vh;}
29 | .polygrid.two-thirds>.shape{width: 66vh; height: 66vh;}
30 | .polygrid.three-fourths>.shape{width: 75vh; height: 75vh;}
31 | .polygrid.full>.shape{width: 100vh; height: 100vh;}
32 | .polygrid>.shape>.shape-left, .polygrid>.shape>.shape-right{
33 | height: 100%; width: 50%; display:inline-block;
34 | }
35 | .polygrid>.shape>.shape-left{float:left;}
36 | .polygrid>.shape>.shape-right{float:right;}
37 |
38 | .polygrid.triangle.packed, .polygrid.octagon.packed.halves, .polygrid.hourglass.packed.halves{
39 | justify-content: center; -moz-justify-content: center; -webkit-justify-content: center;
40 | }
41 |
42 | /* CIRCLE GRID */
43 | .polygrid.circle.gaps{gap:1.25rem;}
44 | .polygrid.circle{
45 | -webkit-border-radius: 0; border-radius: 0;
46 | -webkit-shape-outside: none; shape-outside: none;
47 | -webkit-clip-path: none; clip-path: none;
48 | }
49 | .polygrid.circle>.shape {
50 | -webkit-shape-outside: circle(50%); shape-outside: circle(50%);
51 | -webkit-clip-path: circle(50%); clip-path: circle(50%);
52 | }
53 | .polygrid.circle>.shape>.shape-right{
54 | -webkit-shape-outside: polygon(0% 0%,0% 6.72%,26.19% 8.72%,44.38% 12.82%,60.21% 18.89%,72.87% 26.60%,81.66% 35.56%,86.09% 45.29%,85.96% 55.27%,81.28% 64.97%,72.25% 73.87%,59.40% 81.50%,43.41% 87.47%,25.11% 91.45%,0% 93.21%,0% 100%,21.12% 100%,41.12% 100%,61.12% 100%,81.12% 100%,100% 100%,100% 89.44%,100% 79.44%,100% 69.44%,100% 59.44%,100% 49.44%,100% 39.44%,100% 29.44%,100% 19.44%,100% 9.44%,100% 0%,78.88% 0%,58.88% 0%,38.88% 0%);
55 | shape-outside: polygon(0% 0%,0% 6.72%,26.19% 8.72%,44.38% 12.82%,60.21% 18.89%,72.87% 26.60%,81.66% 35.56%,86.09% 45.29%,85.96% 55.27%,81.28% 64.97%,72.25% 73.87%,59.40% 81.50%,43.41% 87.47%,25.11% 91.45%,0% 93.21%,0% 100%,21.12% 100%,41.12% 100%,61.12% 100%,81.12% 100%,100% 100%,100% 89.44%,100% 79.44%,100% 69.44%,100% 59.44%,100% 49.44%,100% 39.44%,100% 29.44%,100% 19.44%,100% 9.44%,100% 0%,78.88% 0%,58.88% 0%,38.88% 0%);
56 | -webkit-clip-path: polygon(0% 0%,0% 6.72%,26.19% 8.72%,44.38% 12.82%,60.21% 18.89%,72.87% 26.60%,81.66% 35.56%,86.09% 45.29%,85.96% 55.27%,81.28% 64.97%,72.25% 73.87%,59.40% 81.50%,43.41% 87.47%,25.11% 91.45%,0% 93.21%,0% 100%,21.12% 100%,41.12% 100%,61.12% 100%,81.12% 100%,100% 100%,100% 89.44%,100% 79.44%,100% 69.44%,100% 59.44%,100% 49.44%,100% 39.44%,100% 29.44%,100% 19.44%,100% 9.44%,100% 0%,78.88% 0%,58.88% 0%,38.88% 0%);
57 | clip-path: polygon(0% 0%,0% 6.72%,26.19% 8.72%,44.38% 12.82%,60.21% 18.89%,72.87% 26.60%,81.66% 35.56%,86.09% 45.29%,85.96% 55.27%,81.28% 64.97%,72.25% 73.87%,59.40% 81.50%,43.41% 87.47%,25.11% 91.45%,0% 93.21%,0% 100%,21.12% 100%,41.12% 100%,61.12% 100%,81.12% 100%,100% 100%,100% 89.44%,100% 79.44%,100% 69.44%,100% 59.44%,100% 49.44%,100% 39.44%,100% 29.44%,100% 19.44%,100% 9.44%,100% 0%,78.88% 0%,58.88% 0%,38.88% 0%);
58 | }
59 | .polygrid.circle>.shape>.shape-left{
60 | -webkit-shape-outside: polygon(13.40% 50%,15.68% 40.09%,22.46% 30.70%,33.37% 22.35%,47.80% 15.46%,64.99% 10.39%,84.05% 7.43%,100% 6.72%,100% 0%,69.44% 0%,49.44% 0%,29.44% 0%,0% 0%,0% 15.28%,0% 25.28%,0% 35.28%,0% 45.28%,0% 55.28%,0% 65.28%,0% 75.28%,0% 85.28%,0% 100%,30.56% 100%,50.56% 100%,70.56% 100%,100% 100%,100% 93.28%,82.95% 92.46%,63.97% 89.38%,46.91% 84.20%,32.66% 77.22%,21.97% 68.79%);
61 | shape-outside: polygon(13.40% 50%,15.68% 40.09%,22.46% 30.70%,33.37% 22.35%,47.80% 15.46%,64.99% 10.39%,84.05% 7.43%,100% 6.72%,100% 0%,69.44% 0%,49.44% 0%,29.44% 0%,0% 0%,0% 15.28%,0% 25.28%,0% 35.28%,0% 45.28%,0% 55.28%,0% 65.28%,0% 75.28%,0% 85.28%,0% 100%,30.56% 100%,50.56% 100%,70.56% 100%,100% 100%,100% 93.28%,82.95% 92.46%,63.97% 89.38%,46.91% 84.20%,32.66% 77.22%,21.97% 68.79%);
62 | -webkit-clip-path: polygon(13.40% 50%,15.68% 40.09%,22.46% 30.70%,33.37% 22.35%,47.80% 15.46%,64.99% 10.39%,84.05% 7.43%,100% 6.72%,100% 0%,69.44% 0%,49.44% 0%,29.44% 0%,0% 0%,0% 15.28%,0% 25.28%,0% 35.28%,0% 45.28%,0% 55.28%,0% 65.28%,0% 75.28%,0% 85.28%,0% 100%,30.56% 100%,50.56% 100%,70.56% 100%,100% 100%,100% 93.28%,82.95% 92.46%,63.97% 89.38%,46.91% 84.20%,32.66% 77.22%,21.97% 68.79%);
63 | -webkit-clip-path: polygon(13.40% 50%,15.68% 40.09%,22.46% 30.70%,33.37% 22.35%,47.80% 15.46%,64.99% 10.39%,84.05% 7.43%,100% 6.72%,100% 0%,69.44% 0%,49.44% 0%,29.44% 0%,0% 0%,0% 15.28%,0% 25.28%,0% 35.28%,0% 45.28%,0% 55.28%,0% 65.28%,0% 75.28%,0% 85.28%,0% 100%,30.56% 100%,50.56% 100%,70.56% 100%,100% 100%,100% 93.28%,82.95% 92.46%,63.97% 89.38%,46.91% 84.20%,32.66% 77.22%,21.97% 68.79%);
64 | }
65 |
66 | /* TRIANGLE GRID */
67 | .polygrid.triangle.gaps{gap:1.25rem;}
68 | .polygrid.packed.sixths.triangle {padding: 0 8.25vh 0 8.25vh;}
69 | .polygrid.packed.fifths.triangle {padding: 0 10vh 0 10vh;}
70 | .polygrid.packed.fourths.triangle{padding: 0 12.5vh 0 12.5vh;}
71 | .polygrid.packed.thirds.triangle{padding: 0 0 0 16.5vh;}
72 | .polygrid.packed.halves.triangle{padding: 0 0 0 25vh;}
73 | .polygrid.packed.sixths.triangle>.shape{margin-left: -8.25vh;}
74 | .polygrid.packed.fifths.triangle>.shape{margin-left: -10vh;}
75 | .polygrid.packed.fourths.triangle>.shape{margin-left: -12.5vh; }
76 | .polygrid.packed.thirds.triangle>.shape{margin-left: -16.5vh;}
77 | .polygrid.packed.halves.triangle>.shape{margin-left: -25vh;}
78 | .polygrid.triangle>.shape{
79 | -webkit-shape-outside: polygon(50% 0%, 0 100%, 100% 100%);
80 | shape-outside: polygon(50% 0%, 0 100%, 100% 100%);
81 | -webkit-clip-path: polygon(50% 0%, 0 100%, 100% 100%);
82 | clip-path: polygon(50% 0%, 0 100%, 100% 100%);
83 | }
84 | .polygrid.triangle>.shape>.shape-right{
85 | -webkit-shape-outside: polygon(100% 0%, 100% 100%, 0% 0%);
86 | shape-outside: polygon(100% 0%, 100% 100%, 0% 0%);
87 | -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
88 | clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
89 | }
90 | .polygrid.triangle>.shape>.shape-left{
91 | -webkit-shape-outside: polygon(100% 0%, 0% 100%, 0% 0%);
92 | shape-outside: polygon(100% 0%, 0% 100%, 0% 0%);
93 | -webkit-clip-path: polygon(100% 0%, 0% 100%, 0% 0%);
94 | clip-path: polygon(100% 0%, 0% 100%, 0% 0%);
95 | }
96 | .polygrid.packed.triangle>.shape:nth-child(even){
97 | -webkit-shape-outside: polygon(100% 0%, 50% 100%, 0% 0%);
98 | shape-outside: polygon(100% 0%, 50% 100%, 0% 0%);
99 | -webkit-clip-path: polygon(100% 0%, 50% 100%, 0% 0%);
100 | clip-path: polygon(100% 0%, 50% 100%, 0% 0%);
101 | }
102 | .polygrid.packed.triangle>.shape:nth-child(even)>.shape-right{
103 | -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
104 | shape-outside: polygon(100% 0, 100% 100%, 0 100%);
105 | -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
106 | clip-path: polygon(100% 0, 100% 100%, 0 100%);
107 | }
108 | .polygrid.packed.triangle>.shape:nth-child(even)>.shape-left{
109 | -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
110 | shape-outside: polygon(0 0, 100% 100%, 0 100%);
111 | -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
112 | clip-path: polygon(0 0, 100% 100%, 0 100%);
113 | }
114 |
115 | /* RHOMBUS GRID */
116 | .polygrid.packed.sixths.rhombus {padding: 8.25vh 0 0 8.25vh;}
117 | .polygrid.packed.fifths.rhombus {padding: 10vh 0 0 10vh;}
118 | .polygrid.packed.fourths.rhombus{padding: 12.5vh 0 0 25vh;}
119 | .polygrid.packed.thirds.rhombus{padding: 16.5vh 0 0 16.5vh;}
120 | .polygrid.packed.halves.rhombus{padding: 25vh 0 0 25vh;}
121 | .polygrid.packed.sixths.rhombus>.shape:nth-child(odd){margin-top: -8.25vh;}
122 | .polygrid.packed.fifths.rhombus>.shape:nth-child(odd){margin-top: -10vh;}
123 | .polygrid.packed.fourths.rhombus>.shape:nth-child(odd) {margin-top: -12.5vh; }
124 | .polygrid.packed.thirds.rhombus>.shape:nth-child(odd){margin-top: -16.5vh;}
125 | .polygrid.packed.halves.rhombus>.shape:nth-child(odd){margin-top: -25vh;}
126 | .polygrid.packed.sixths.rhombus>.shape{margin-left: -8.25vh;}
127 | .polygrid.packed.fifths.rhombus>.shape{margin-left: -10vh;}
128 | .polygrid.packed.fourths.rhombus>.shape{margin-left: -12.5vh; }
129 | .polygrid.packed.thirds.rhombus>.shape{margin-left: -16.5vh;}
130 | .polygrid.packed.halves.rhombus>.shape{margin-left: -25vh;}
131 | .polygrid.rhombus>.shape{
132 | -webkit-shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
133 | shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
134 | -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
135 | clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
136 | }
137 | .polygrid.rhombus>.shape>.shape-right{
138 | -webkit-shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 50%);
139 | shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 50%);
140 | -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 50%);
141 | clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 50%);
142 | }
143 | .polygrid.rhombus>.shape>.shape-left{
144 | -webkit-shape-outside: polygon(100% 0%, 0% 50%, 100% 100%, 0% 100%, 0% 0%);
145 | shape-outside: polygon(100% 0%, 0% 50%, 100% 100%, 0% 100%, 0% 0%);
146 | -webkit-clip-path: polygon(100% 0%, 0% 50%, 100% 100%, 0% 100%, 0% 0%);
147 | clip-path: polygon(100% 0%, 0% 50%, 100% 100%, 0% 100%, 0% 0%);
148 | }
149 |
150 | /* HEXAGON GRID */
151 | .polygrid.packed.sixths.hexagon {padding: 4.125vh 0 0 8.25vh;}
152 | .polygrid.packed.fifths.hexagon {padding: 5vh 0 0 10vh;}
153 | .polygrid.packed.fourths.hexagon{padding: 6.25vh 12.5vh 0 12.5vh;}
154 | .polygrid.packed.thirds.hexagon{padding: 8.25vh 16.5vh 0 16.5vh;}
155 | .polygrid.packed.halves.hexagon{padding: 12.5vh 0 0 25vh;}
156 | .polygrid.packed.sixths.hexagon>.shape:nth-child(odd){margin-top: -4.125vh;}
157 | .polygrid.packed.fifths.hexagon>.shape:nth-child(odd){margin-top: -5vh;}
158 | .polygrid.packed.fourths.hexagon>.shape:nth-child(odd) {margin-top: -6.25vh; }
159 | .polygrid.packed.thirds.hexagon>.shape:nth-child(odd){margin-top: -8.25vh;}
160 | .polygrid.packed.halves.hexagon>.shape:nth-child(odd){margin-top: -12.5vh;}
161 | .polygrid.packed.sixths.hexagon>.shape:nth-child(even){margin-top: 8.25vh;}
162 | .polygrid.packed.fifths.hexagon>.shape:nth-child(even){margin-top: 10vh;}
163 | .polygrid.packed.fourths.hexagon>.shape:nth-child(even){margin-top: 12.5vh;}
164 | .polygrid.packed.thirds.hexagon>.shape:nth-child(even){margin-top: 16.5vh;}
165 | .polygrid.packed.halves.hexagon>.shape:nth-child(even){margin-top: 25vh;}
166 | .polygrid.packed.sixths.hexagon>.shape{margin-left: -8.25vh;}
167 | .polygrid.packed.fifths.hexagon>.shape{margin-left: -10vh;}
168 | .polygrid.packed.fourths.hexagon>.shape{margin-left: -12.5vh; }
169 | .polygrid.packed.thirds.hexagon>.shape{margin-left: -16.5vh;}
170 | .polygrid.packed.halves.hexagon>.shape{margin-left: -25vh;}
171 |
172 | .polygrid.hexagon>.shape{
173 | -webkit-shape-outside: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
174 | shape-outside: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
175 | -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
176 | clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
177 | }
178 | .polygrid.hexagon>.shape>.shape-right{
179 | -webkit-shape-outside:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 75%, 100% 25%);
180 | shape-outside:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 75%, 100% 25%);
181 | -webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 75%, 100% 25%);
182 | clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 75%, 100% 25%);
183 | }
184 | .polygrid.hexagon>.shape>.shape-left{
185 | -webkit-shape-outside:polygon(0% 0%, 100% 0%, 0% 25%, 0% 75%, 100% 100%, 0% 100%);
186 | shape-outside:polygon(0% 0%, 100% 0%, 0% 25%, 0% 75%, 100% 100%, 0% 100%);
187 | -webkit-clip-path:polygon(0% 0%, 100% 0%, 0% 25%, 0% 75%, 100% 100%, 0% 100%);
188 | clip-path:polygon(0% 0%, 100% 0%, 0% 25%, 0% 75%, 100% 100%, 0% 100%);
189 | }
190 |
191 | /* OCTAGON GRID */
192 | .polygrid.octagon.gaps{gap:1.25rem;}
193 | .polygrid.packed.sixths.octagon {padding: 5vh 5vh 0 5vh;}
194 | .polygrid.packed.fifths.octagon {padding: 6vh 0 0 6vh;}
195 | .polygrid.packed.fourths.octagon{padding: 7.5vh 7.5vh 0 7.5vh;}
196 | .polygrid.packed.thirds.octagon{padding: 9.9vh 9.9vh 0 9.9vh;}
197 | .polygrid.packed.halves.octagon{padding: 15vh 15vh 0 15vh;}
198 | .polygrid.packed.sixths.octagon>.shape:nth-child(odd){margin-top: -5vh;}
199 | .polygrid.packed.fifths.octagon>.shape:nth-child(odd){margin-top: -6vh;}
200 | .polygrid.packed.fourths.octagon>.shape:nth-child(odd) {margin-top: -7.5vh; }
201 | .polygrid.packed.thirds.octagon>.shape:nth-child(odd){margin-top: -9.9vh;}
202 | .polygrid.packed.halves.octagon>.shape:nth-child(odd){margin-top: -15vh;}
203 | .polygrid.packed.sixths.octagon>.shape:nth-child(even){margin-top: 6.67vh;}
204 | .polygrid.packed.fifths.octagon>.shape:nth-child(even){margin-top: 8vh;}
205 | .polygrid.packed.fourths.octagon>.shape:nth-child(even){margin-top: 10vh;}
206 | .polygrid.packed.thirds.octagon>.shape:nth-child(even){margin-top: 13.2vh;}
207 | .polygrid.packed.halves.octagon>.shape:nth-child(even){margin-top: 20vh;}
208 | .polygrid.packed.sixths.octagon>.shape{margin-left: -5vh;}
209 | .polygrid.packed.fifths.octagon>.shape{margin-left: -6vh;}
210 | .polygrid.packed.fourths.octagon>.shape{margin-left: -7.5vh; }
211 | .polygrid.packed.thirds.octagon>.shape{margin-left: -9.9vh;}
212 | .polygrid.packed.halves.octagon>.shape{margin-left: -15vh;}
213 | .polygrid.octagon>.shape{
214 | -webkit-shape-outside: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
215 | shape-outside: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 70% 100%, 0% 70%, 0% 30%);
216 | -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 70% 100%, 0% 70%, 0% 30%);
217 | clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
218 | }
219 | .polygrid.octagon>.shape>.shape-left{
220 | -webkit-shape-outside: polygon(0% 0%, 100% 0%, 0% 30%, 0% 70%, 100% 100%, 0% 100%);
221 | shape-outside: polygon(0% 0%, 100% 0%, 0% 30%, 0% 70%, 100% 100%, 0% 100%);
222 | -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 30%, 0% 70%, 100% 100%, 0% 100%);
223 | clip-path: polygon(0% 0%, 100% 0%, 0% 30%, 0% 70%, 100% 100%, 0% 100%);
224 | }
225 | .polygrid.octagon>.shape>.shape-right{
226 | -webkit-shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 70%, 100% 30%);
227 | shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 70%, 100% 30%);
228 | -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 70%, 100% 30%);
229 | clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 70%, 100% 30%);
230 | }
231 | .polygrid.octagon>.shape>.shape-left, .polygrid.octagon>.shape>.shape-right{width: 30%;}
232 |
233 | /* PLUS GRID */
234 | .polygrid.plus.gaps{gap:1.25rem;}
235 | .polygrid.plus>.shape{
236 | -webkit-shape-outside: polygon(33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0% 66%, 0% 33%, 33% 33%);
237 | shape-outside: polygon(33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0% 66%, 0% 33%, 33% 33%);
238 | -webkit-clip-path: polygon(33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0% 66%, 0% 33%, 33% 33%);
239 | clip-path: polygon(33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0% 66%, 0% 33%, 33% 33%);
240 | }
241 | .polygrid.plus>.shape>.shape-left{
242 | -webkit-shape-outside: polygon(0% 0%, 100% 0%, 100% 33%, 0% 33%, 0% 66%, 100% 66%, 100% 100%, 0% 100%);
243 | shape-outside: polygon(0% 0%, 100% 0%, 100% 33%, 0% 33%, 0% 66%, 100% 66%, 100% 100%, 0% 100%);
244 | -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 33%, 0% 33%, 0% 66%, 100% 66%, 100% 100%, 0% 100%);
245 | clip-path: polygon(0% 0%, 100% 0%, 100% 33%, 0% 33%, 0% 66%, 100% 66%, 100% 100%, 0% 100%);
246 | }
247 | .polygrid.plus>.shape>.shape-right{
248 | -webkit-shape-outside: polygon(100% 0%, 100% 100%, 0% 100%, 0% 66%, 100% 66%, 100% 33%, 0% 33%, 0% 0%);
249 | shape-outside: polygon(100% 0%, 100% 100%, 0% 100%, 0% 66%, 100% 66%, 100% 33%, 0% 33%, 0% 0%);
250 | -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 66%, 100% 66%, 100% 33%, 0% 33%, 0% 0%);
251 | clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 66%, 100% 66%, 100% 33%, 0% 33%, 0% 0%);
252 | }
253 | .polygrid.plus>.shape>.shape-right, .polygrid.plus>.shape>.shape-left{width: 33%;}
254 |
255 | /* HOURGLASS GRID */
256 | .polygrid.packed.sixths.hourglass {padding: 8.25vh 0 0 6.6vh;}
257 | .polygrid.packed.fifths.hourglass {padding: 10vh 0 0 8vh;}
258 | .polygrid.packed.fourths.hourglass{padding: 12.5vh 0 0 10vh;}
259 | .polygrid.packed.thirds.hourglass{padding: 16.5vh 26.4vh 0 26.4vh;}
260 | .polygrid.packed.halves.hourglass{padding: 25vh 40vh 0 20vh;}
261 | .polygrid.packed.sixths.hourglass>.shape:nth-child(odd){margin-top: -8.25vh;}
262 | .polygrid.packed.fifths.hourglass>.shape:nth-child(odd){margin-top: -10vh;}
263 | .polygrid.packed.fourths.hourglass>.shape:nth-child(odd) {margin-top: -12.5vh; }
264 | .polygrid.packed.thirds.hourglass>.shape:nth-child(odd){margin-top: -16.5vh;}
265 | .polygrid.packed.halves.hourglass>.shape:nth-child(odd){margin-top: -25vh;}
266 | .polygrid.packed.sixths.hourglass>.shape{margin-left: -6.6vh;}
267 | .polygrid.packed.fifths.hourglass>.shape{margin-left: -8vh;}
268 | .polygrid.packed.fourths.hourglass>.shape{margin-left: -10vh; }
269 | .polygrid.packed.thirds.hourglass>.shape{margin-left: -13.2vh;}
270 | .polygrid.packed.halves.hourglass>.shape{margin-left: -20vh;}
271 | .polygrid.hourglass>.shape{
272 | -webkit-shape-outside: polygon(0% 0%, 100% 0%, 60% 50%, 100% 100%, 0% 100%, 40% 50%);
273 | shape-outside: polygon(0% 0%, 100% 0%, 60% 50%, 100% 100%, 0% 100%, 40% 50%);
274 | -webkit-clip-path: polygon(0% 0%, 100% 0%, 60% 50%, 100% 100%, 0% 100%, 40% 50%);
275 | clip-path: polygon(0% 0%, 100% 0%, 60% 50%, 100% 100%, 0% 100%, 40% 50%);
276 | }
277 | .polygrid.hourglass>.shape>.shape-left{
278 | -webkit-shape-outside: polygon(100% 50%, 0% 100%, 0% 0%);
279 | shape-outside: polygon(100% 50%, 0% 100%, 0% 0%);
280 | -webkit-clip-path: polygon(100% 50%, 0% 100%, 0% 0%);
281 | clip-path: polygon(100% 50%, 0% 100%, 0% 0%);
282 | }
283 | .polygrid.hourglass>.shape>.shape-right{
284 | -webkit-shape-outside: polygon(100% 0%, 100% 100%, 0% 50%);
285 | shape-outside: polygon(100% 0%, 100% 100%, 0% 50%);
286 | -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
287 | clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
288 | }
289 | .polygrid.hourglass>.shape>.shape-left,.polygrid.hourglass>.shape>.shape-right{width: 40%;}
290 |
291 | /* CHEVRON GRID */
292 | .polygrid.chevron.gaps{gap:1.25rem;}
293 | .polygrid.sixths.chevron {padding: 0 0 0 4.125vh;}
294 | .polygrid.fifths.chevron {padding: 0 0 0 5vh;}
295 | .polygrid.fourths.chevron{padding: 0 0 0 6.25vh;}
296 | .polygrid.thirds.chevron{padding: 0 0 0 8.25vh;}
297 | .polygrid.halves.chevron{padding: 0 0 0 12.5vh;}
298 | .polygrid.chevron.sixths>.shape{margin-left: -4.125vh;}
299 | .polygrid.chevron.fifths>.shape{margin-left: -5vh;}
300 | .polygrid.chevron.fourths>.shape{margin-left: -6.25vh;}
301 | .polygrid.chevron.thirds>.shape{margin-left: -8.25vh;}
302 | .polygrid.chevron.halves>.shape{margin-left: -12.5vh;}
303 | .polygrid.chevron>.shape:first-child{
304 | -webkit-shape-outside: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
305 | shape-outside: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
306 | -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
307 | clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
308 | }
309 | .polygrid.chevron>.shape{
310 | -webkit-shape-outside: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
311 | shape-outside: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
312 | -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
313 | clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
314 | }
315 | .polygrid.chevron>.shape>.shape-left{
316 | -webkit-shape-outside: polygon(100% 50%, 0% 100%, 0% 0%);
317 | shape-outside: polygon(100% 50%, 0% 100%, 0% 0%);
318 | -webkit-clip-path: polygon(100% 50%, 0% 100%, 0% 0%);
319 | clip-path: polygon(100% 50%, 0% 100%, 0% 0%);
320 | }
321 | .polygrid.chevron>.shape>.shape-right{
322 | -webkit-shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 50%);
323 | shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 50%);
324 | -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 50%);
325 | clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 50%);
326 | }
327 | .polygrid.chevron>.shape:last-child{
328 | -webkit-shape-outside: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);
329 | shape-outside: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);
330 | -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);
331 | clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);
332 | }
333 | .polygrid.chevron>.shape:last-child>.shape-right,
334 | .polygrid.chevron>.shape:first-child>.shape-left{display:none;}
335 | .polygrid.chevron>.shape>.shape-right, .polygrid.chevron>.shape>.shape-left{width:25%;}
--------------------------------------------------------------------------------
/chaos-grid.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Circle Fourths PolyGrid w/ Gaps
80 |In the example below, we wrap a circle fourths polygrid (with gap spacing) within a container.
83 |
123 |
124 |
125 |
84 |
86 | Let your hopes, not your hurts, shape your future.
85 |
87 |
89 | Strategy is about shaping the future.
88 |
90 |
92 | We shape our buildings; thereafter they shape us.
91 |
93 |
95 | If you change the way you look at things, the things you look at change.
94 |
96 |
98 | Every day do something that will inch you closer to a better tomorrow.
97 |
99 |
101 | In the long run, we shape our lives, and we shape ourselves
100 |
102 |
104 | It takes a big heart to shape little minds.
103 |
105 |
107 | The name we give to something shapes our attitude toward it.
106 |
108 |
110 | Everything has shape, if you look for it. There is no escape from form.
109 |
111 |
113 | The only way to predict the future is to have power to shape the future.
112 |
114 |
116 | Colors answer feeling in man; shapes answer thought; and motion answers will.
115 |
117 |
119 | Human nature is like water. It takes the shape of its container.
118 |
120 |
122 | Eagles come in all shapes and size, but you will recognize them chiefly by their attitudes.
121 |
126 |
127 |
128 |
PACKED Triangle Thirds PolyGrid w/ Gaps
129 |In the example below, we wrap a triangle thirds polygrid (with gap spacing) within a container.
132 |
172 |
173 |
174 |
133 |
135 | Let your hopes, not your hurts, shape your future.
134 |
136 |
138 | Strategy is about shaping the future.
137 |
139 |
141 | We shape our buildings; thereafter they shape us.
140 |
142 |
144 | If you change the way you look at things, the things you look at change.
143 |
145 |
147 | Every day do something that will inch you closer to a better tomorrow.
146 |
148 |
150 | In the long run, we shape our lives, and we shape ourselves
149 |
151 |
153 | It takes a big heart to shape little minds.
152 |
154 |
156 | The name we give to something shapes our attitude toward it.
155 |
157 |
159 | Everything has shape, if you look for it. There is no escape from form.
158 |
160 |
162 | The only way to predict the future is to have power to shape the future.
161 |
163 |
165 | Colors answer feeling in man; shapes answer thought; and motion answers will.
164 |
166 |
168 | Human nature is like water. It takes the shape of its container.
167 |
169 |
171 | Eagles come in all shapes and size, but you will recognize them chiefly by their attitudes.
170 |
175 |
176 |
177 |
PACKED & REVERSED Rhombus Fifths PolyGrid
178 |In the example below, we wrap a reversed rhombus thirds polygrid within a container.
182 |
222 |
223 |
224 |
183 |
185 | Let your hopes, not your hurts, shape your future.
184 |
186 |
188 | Strategy is about shaping the future.
187 |
189 |
191 | We shape our buildings; thereafter they shape us.
190 |
192 |
194 | If you change the way you look at things, the things you look at change.
193 |
195 |
197 | Every day do something that will inch you closer to a better tomorrow.
196 |
198 |
200 | In the long run, we shape our lives, and we shape ourselves
199 |
201 |
203 | It takes a big heart to shape little minds.
202 |
204 |
206 | The name we give to something shapes our attitude toward it.
205 |
207 |
209 | Everything has shape, if you look for it. There is no escape from form.
208 |
210 |
212 | The only way to predict the future is to have power to shape the future.
211 |
213 |
215 | Colors answer feeling in man; shapes answer thought; and motion answers will.
214 |
216 |
218 | Human nature is like water. It takes the shape of its container.
217 |
219 |
221 | Eagles come in all shapes and size, but you will recognize them chiefly by their attitudes.
220 |
225 |
226 |
227 |
PACKED Hexagon Thirds PolyGrid
228 |In the example below, we have a hexagon thirds polygrid within a container.
232 |
272 |
273 |
274 |
233 |
235 | Let your hopes, not your hurts, shape your future.
234 |
236 |
238 | Strategy is about shaping the future.
237 |
239 |
241 | We shape our buildings; thereafter they shape us.
240 |
242 |
244 | If you change the way you look at things, the things you look at change.
243 |
245 |
247 | Every day do something that will inch you closer to a better tomorrow.
246 |
248 |
250 | In the long run, we shape our lives, and we shape ourselves
249 |
251 |
253 | It takes a big heart to shape little minds.
252 |
254 |
256 | The name we give to something shapes our attitude toward it.
255 |
257 |
259 | Everything has shape, if you look for it. There is no escape from form.
258 |
260 |
262 | The only way to predict the future is to have power to shape the future.
261 |
263 |
265 | Colors answer feeling in man; shapes answer thought; and motion answers will.
264 |
266 |
268 | Human nature is like water. It takes the shape of its container.
267 |
269 |
271 | Eagles come in all shapes and size, but you will recognize them chiefly by their attitudes.
270 |
275 |
276 |
277 |
PACKED Hourglass Thirds PolyGrid
278 |In the example below, we have a hourglass thirds polygrid within a container.
282 |
322 |
323 |
324 |
283 |
285 | Let your hopes, not your hurts, shape your future.
284 |
286 |
288 | Strategy is about shaping the future.
287 |
289 |
291 | We shape our buildings; thereafter they shape us.
290 |
292 |
294 | If you change the way you look at things, the things you look at change.
293 |
295 |
297 | Every day do something that will inch you closer to a better tomorrow.
296 |
298 |
300 | In the long run, we shape our lives, and we shape ourselves
299 |
301 |
303 | It takes a big heart to shape little minds.
302 |
304 |
306 | The name we give to something shapes our attitude toward it.
305 |
307 |
309 | Everything has shape, if you look for it. There is no escape from form.
308 |
310 |
312 | The only way to predict the future is to have power to shape the future.
311 |
313 |
315 | Colors answer feeling in man; shapes answer thought; and motion answers will.
314 |
316 |
318 | Human nature is like water. It takes the shape of its container.
317 |
319 |
321 | Eagles come in all shapes and size, but you will recognize them chiefly by their attitudes.
320 |
325 |
326 |
327 |
PACKED Chevron Fifths PolyGrid w/ Gaps
328 | 329 |
330 |
370 |
371 |
372 |
331 |
333 | Let your hopes, not your hurts, shape your future.
332 |
334 |
336 | Strategy is about shaping the future.
335 |
337 |
339 | We shape our buildings; thereafter they shape us.
338 |
340 |
342 | If you change the way you look at things, the things you look at change.
341 |
343 |
345 | Every day do something that will inch you closer to a better tomorrow.
344 |
346 |
348 | In the long run, we shape our lives, and we shape ourselves
347 |
349 |
351 | It takes a big heart to shape little minds.
350 |
352 |
354 | The name we give to something shapes our attitude toward it.
353 |
355 |
357 | Everything has shape, if you look for it. There is no escape from form.
356 |
358 |
360 | The only way to predict the future is to have power to shape the future.
359 |
361 |
363 | Colors answer feeling in man; shapes answer thought; and motion answers will.
362 |
364 |
366 | Human nature is like water. It takes the shape of its container.
365 |
367 |
369 | Eagles come in all shapes and size, but you will recognize them chiefly by their attitudes.
368 |
373 |
374 |
375 |
Octagon Fourths PolyGrid w/ Gaps
376 | 377 |
378 |
418 |
419 |
420 |
379 |
381 | Let your hopes, not your hurts, shape your future.
380 |
382 |
384 | Strategy is about shaping the future.
383 |
385 |
387 | We shape our buildings; thereafter they shape us.
386 |
388 |
390 | If you change the way you look at things, the things you look at change.
389 |
391 |
393 | Every day do something that will inch you closer to a better tomorrow.
392 |
394 |
396 | In the long run, we shape our lives, and we shape ourselves
395 |
397 |
399 | It takes a big heart to shape little minds.
398 |
400 |
402 | The name we give to something shapes our attitude toward it.
401 |
403 |
405 | Everything has shape, if you look for it. There is no escape from form.
404 |
406 |
408 | The only way to predict the future is to have power to shape the future.
407 |
409 |
411 | Colors answer feeling in man; shapes answer thought; and motion answers will.
410 |
412 |
414 | Human nature is like water. It takes the shape of its container.
413 |
415 |
417 | Eagles come in all shapes and size, but you will recognize them chiefly by their attitudes.
416 |
421 |
422 |
423 |
Plus Fourths PolyGrid w/ Gaps
424 | 425 |
426 |
466 |
427 |
429 | Let your hopes, not your hurts, shape your future.
428 |
430 |
432 | Strategy is about shaping the future.
431 |
433 |
435 | We shape our buildings; thereafter they shape us.
434 |
436 |
438 | If you change the way you look at things, the things you look at change.
437 |
439 |
441 | Every day do something that will inch you closer to a better tomorrow.
440 |
442 |
444 | In the long run, we shape our lives, and we shape ourselves
443 |
445 |
447 | It takes a big heart to shape little minds.
446 |
448 |
450 | The name we give to something shapes our attitude toward it.
449 |
451 |
453 | Everything has shape, if you look for it. There is no escape from form.
452 |
454 |
456 | The only way to predict the future is to have power to shape the future.
455 |
457 |
459 | Colors answer feeling in man; shapes answer thought; and motion answers will.
458 |
460 |
462 | Human nature is like water. It takes the shape of its container.
461 |
463 |
465 | Eagles come in all shapes and size, but you will recognize them chiefly by their attitudes.
464 |
23 |
30 |
31 |
32 |
35 |
36 | DEMO 1: Default View
33 |Normal view without any additional classes applied.
34 |
37 |
38 |
84 |
85 |
86 |
39 |
40 |
46 |
49 |
50 |
51 |
54 |
55 |
56 |
57 |
59 |
60 |
65 |
66 | Professor Chaos
67 |
68 |
69 |
70 | I am
a link 71 |
72 |
73 |
74 |
77 |
78 |
79 |
82 |
83 |
41 |
44 |
45 | Winter DIV
42 |I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.
43 |Spring Article
47 |This is a springtime article element, and I have no set width.
48 |Summer Surf Section
52 |This is a sufin' summery section element.
53 |Autumn Article
57 |
Autumn is my favorite season.
[end of article]
I am an impactful blockquote block.61 | 62 |
PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.
66 | a link 71 |
72 |
73 | Cellophane News
75 |The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.
76 |
78 | Section
80 |I am a section element. I take up 25% of the width on large devices and up.
81 |
87 |
90 |
91 | DEMO 2: Orderly-On-Mobile
88 |Same as above, but all elements should appear as full-width blocks on devices 667px and below.
89 |
92 |
93 |
139 |
140 |
141 |
94 |
95 |
101 |
104 |
105 |
106 |
109 |
110 |
111 |
112 |
114 |
115 |
120 |
121 | Professor Chaos
122 |
123 |
124 |
125 | I am
a link 126 |
127 |
128 |
129 |
132 |
133 |
134 |
137 |
138 |
96 |
99 |
100 | Winter DIV
97 |I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.
98 |Spring Article
102 |This is a springtime article element, and I have no set width.
103 |Summer Surf Section
107 |This is a sufin' summery section element.
108 |Autumn Article
112 |
Autumn is my favorite season.
[end of article]
I am an impactful blockquote block.116 | 117 |
PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.
121 | a link 126 |
127 |
128 | Cellophane News
130 |The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.
131 |
133 | Section
135 |I am a section element. I take up 25% of the width on large devices and up.
136 |
142 |
145 | DEMO 3: Push-down Seconds, Pull-up Thirds, Push-left fourths, Pull-right Fifths
143 |Building on Demo 2, we now do the following: push every second element from the bottom, pull every third element from the top, push every fourth element from the left, and pull every fifth element from the right.
144 |
146 |
147 |
193 |
194 |
195 |
148 |
149 |
155 |
158 |
159 |
160 |
163 |
164 |
165 |
166 |
168 |
169 |
174 |
175 | Professor Chaos
176 |
177 |
178 |
179 | I am
a link 180 |
181 |
182 |
183 |
186 |
187 |
188 |
191 |
192 |
150 |
153 |
154 | Winter DIV
151 |I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.
152 |Spring Article
156 |This is a springtime article element, and I have no set width.
157 |Summer Surf Section
161 |This is a sufin' summery section element.
162 |Autumn Article
166 |
Autumn is my favorite season.
[end of article]
I am an impactful blockquote block.170 | 171 |
PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.
175 | a link 180 |
181 |
182 | Cellophane News
184 |The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.
185 |
187 | Section
189 |I am a section element. I take up 25% of the width on large devices and up.
190 |
196 |
199 | DEMO 4: Relative Chaos
197 |Building on Demo 3, we now make every odd-numbered element relative-positioned, while even-numbered elements are absolute-positioned.
198 |
200 |
201 |
247 |
248 |
249 |
202 |
203 |
209 |
212 |
213 |
214 |
217 |
218 |
219 |
220 |
222 |
223 |
228 |
229 | Professor Chaos
230 |
231 |
232 |
233 | I am
a link 234 |
235 |
236 |
237 |
240 |
241 |
242 |
245 |
246 |
204 |
207 |
208 | Winter DIV
205 |I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.
206 |Spring Article
210 |This is a springtime article element, and I have no set width.
211 |Summer Surf Section
215 |This is a sufin' summery section element.
216 |Autumn Article
220 |
Autumn is my favorite season.
[end of article]
I am an impactful blockquote block.224 | 225 |
PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.
229 | a link 234 |
235 |
236 | Cellophane News
238 |The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.
239 |
241 | Section
243 |I am a section element. I take up 25% of the width on large devices and up.
244 |
250 |
253 | DEMO 5: Absolute Chaos
251 |Building on Demo 3, we now make every odd-numbered element absolute-positioned, while even-numbered elements are relative-positioned.
252 |
254 |
255 |
301 |
302 |
303 |
256 |
257 |
263 |
266 |
267 |
268 |
271 |
272 |
273 |
274 |
276 |
277 |
282 |
283 | Professor Chaos
284 |
285 |
286 |
287 | I am
a link 288 |
289 |
290 |
291 |
294 |
295 |
296 |
299 |
300 |
258 |
261 |
262 | Winter DIV
259 |I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.
260 |Spring Article
264 |This is a springtime article element, and I have no set width.
265 |Summer Surf Section
269 |This is a sufin' summery section element.
270 |Autumn Article
274 |
Autumn is my favorite season.
[end of article]
I am an impactful blockquote block.278 | 279 |
PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.
283 | a link 288 |
289 |
290 | Cellophane News
292 |The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.
293 |
295 | Section
297 |I am a section element. I take up 25% of the width on large devices and up.
298 |
304 |
307 | DEMO 6: Chaos of Absolute Thirds
305 |Building on Demo 3, we make ONLY every third element absolute-positioned.
306 |
308 |
309 |
355 |
356 |
357 |
310 |
311 |
317 |
320 |
321 |
322 |
325 |
326 |
327 |
328 |
330 |
331 |
336 |
337 | Professor Chaos
338 |
339 |
340 |
341 | I am
a link 342 |
343 |
344 |
345 |
348 |
349 |
350 |
353 |
354 |
312 |
315 |
316 | Winter DIV
313 |I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.
314 |Spring Article
318 |This is a springtime article element, and I have no set width.
319 |Summer Surf Section
323 |This is a sufin' summery section element.
324 |Autumn Article
328 |
Autumn is my favorite season.
[end of article]
I am an impactful blockquote block.332 | 333 |
PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.
337 | a link 342 |
343 |
344 | Cellophane News
346 |The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.
347 |
349 | Section
351 |I am a section element. I take up 25% of the width on large devices and up.
352 |
358 |
361 | DEMO 7: Offsets of Individual Elements
359 |Building on Demo 3, we apply offset classes to invidual elements.
360 |
362 |
363 |
412 |
413 |
414 |
415 |
416 |
417 |
418 |
--------------------------------------------------------------------------------
364 |
365 |
372 |
376 |
377 |
378 |
382 |
383 |
384 |
385 |
387 |
388 |
393 |
394 | Professor Chaos
395 |
396 |
397 |
398 | I am
a link 399 |
400 |
401 |
402 |
405 |
406 |
407 |
410 |
411 |
366 |
370 |
371 | Winter DIV
367 |I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.
368 |Pushed from top 5-fold.
369 |Spring Article
373 |This is a springtime article element, and I have no set width.
374 |Pulled from top three-fold, and pushed from right 4-fold.
375 |Summer Surf Section
379 |This is a sufin' summery section element.
380 |Pulled right, pushed from bottom two-fold.
381 |Autumn Article
385 |
Autumn is my favorite season.
[end of article]
I am an impactful blockquote block.389 | 390 |
PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.
Pulled from the right 4-fold.
394 | a link 399 |
400 |
401 | Cellophane News
403 |The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.
404 |
406 | Section
408 |I am a section element. I take up 25% of the width on large devices and up.
409 |