Chaos Grid
Chaos Grid is the anti-grid grid. It does the following:
- Turns common elements into inline-blocks
- Uses either relative or absolute positioning of elements
- Offsets elements from the top, bottom, left, or right from the chaos-grid wrapper
Chaos Grid turns the following child elements into inline-blocks:
- a
- article
- blockquote
- code
- details
- div
- figure
- form
- iframe
- img
- nav
- p
- pre
- section
- video
Place any of the above elements within a container with the class .chaos-grid.
By default, the following happens to all chaos-grid elements:
- Displayed as inline-blocks
- Relative-positioned
- Have minimum width of 10% of viewport, except img and video tags
This is only applied directly to child elements of the chaos-grid container.
Just like alternate realities, we can create chaos by making every other element either relative- or absolute-positioned.
To make every other element relative-positioned. Simply apply the class .relative to the chaos-grid wrapper, and the following happens:
- Odd-numbered elements are relative-positioned with z-index of 1
- Even-numbered elements are absolute-positioned with z-index of 2
ex: .chaos-grid.relative
Alternatively, can create absolute chaos by making every other element absolute-positioned. Apply the class .absolute to the chaos-grid wrapper.
- Odd-numbered elements are absolute-positioned with z-index of 1
- Even-numbered elements are relative-positioned with z-index of 2
ex: .chaos-grid.absolute
Additionally, we can create absolute chaos on every other 2nd, 3rd, 4th, or 5th element. To be this evil, we can apply any of the following classes to the chaos-grid wrapper:
- .absolute-seconds - every 2nd element is absolute-positioned, z-index = 2
- .absolute-thirds - every 3rd element is absolute-positioned, z-index = 3
- .absolute-fourths - every 4th element is absolute-positioned, z-index = 4
- .absolute-fifths - every 5th element is absolute-positioned, z-index = 5
All other elements are relative-positioned with a z-index of 1. Example: .chaos-grid.absolute-fourths will make every 4th element absolute-positioned with a z-index of 4.
We can offset elements from their original position within the chaos-grid wrapper. Elements can be either pushed or pulled from the top, bottom, left, or right.
Pushing an element means that it is moved in the positive direction, whereas pulling it is moved in the negative direction. By default, all pushed elements are moved by 1em, and pulled elements are moved by -1em.
The default push / pull values can be changed in the chaos-grid.css or chaos-grid.min.css file. Any type of unit value can be used (ex. 40px, -10vw, 5vh, -25%, etc.).
Individual elements can be pushed in any positive direction. Apply any of these classes to any given element:
- .push-up - move down from top
- .push-down - move up from bottom
- .push-left - positive move from left
- .push-right - positive move from right
We can also apply these classes to the chaos-grid wrapper to move every other 2nd, 3rd, 4th, and 5th elements:
- .push-up-seconds - every 2nd element is moved down from the top
- .push-up-thirds - every 3rd element is moved down from the top
- .push-up-fourths - every 4th element is moved down from the top
- .push-up-fifths - every 5th element is moved down from the top
The same applies to the other directions as well. Example: .push-left-fourths moves every 4th element from the left in the positive direction.
Similar to pushing elements, we can move them in the negative direction. Apply any of these classes to any given element:
- .pull-up - move up from top
- .pull-down - move down from bottom
- .pull-left - negative move from left
- .pull-right - negative move from right
We can also apply these classes to the chaos-grid wrapper to move every other 2nd, 3rd, 4th, and 5th elements:
- .pull-up-seconds - every 2nd element is moved up from the top
- .pull-up-thirds - every 3rd element is moved up from the top
- .pull-up-fourths - every 4th element is moved up from the top
- .pull-up-fifths - every 5th element is moved up from the top
The same applies to the other directions as well. Example: .pull-left-fourths moves every 4th element from the left in the negative direction.
We can multiply how far any individual element is moved by up to 5 times. Just add an -Nx onto a push or pull class, where N is either 2, 3, 4, or 5. The number multiplies the value of push or pull unit variable.
- .push-up-2x
- .pull-down-3x
- .push-left-4x
- .pull-right-5x
If we set our default push values to 20px and pull values to -20px, and if we applied all four of the above classes to the same element, it would be moved 40px from the top, -60px from the bottom, 80px from the left, and -100px from the right.
Chaos will reign on mobile by default. However, we may want to retain order on mobile devices for the sake and sanity of mobile users. Apply the class: .orderly-on-mobile to the chaos-grid wrapper. This will do the following on devices 667px and down:
- Makes all elements relative-positioned
- Displays all elements as blocks, 100% width max.
- Resets all offsets to 0
Ex: .chaos-grid.orderly-on-mobile
Chaos Grid child elements can be randomly positioned using vanilla javascript. Child elements will have margin spacing applied to them, with values ranging between -140px and 240px. This will cause elements to appear scattered, with some possibly overlapping others.
To add this effect, two things are needed:
- Apply the class .randomize to the .chaos-grid wrapper (ex: .chaos-grid.randomize)
- Load the following javascript file: /source/methods/js/chaos-grid.js
For further random chaos, you can also randomly skew and rotate elements. Child elements will be randomly skewed between -45 and 45 degrees, as well as rotated between -35 and 70 degrees. To do this, also apply the class .tilt. The Chaos Grid wrapper should now be: .chaos-grid.randomize.tilt.
The standard classes mentioned previously (such as push and pull classes) can also be applied to respective elements, even with randomize applied.
