cHaOs GrId: rANdoMIze

The anti-grid grid... randomized using vanilla javascript.

Include source/methods/js/chaos-grid.js before the closing body tag.

Documentation »

.chaos-grid.randomize

DEMO: Refresh page to see elements randomly positioned.

Winter DIV

I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.

Spring Article

This is a springtime article element, and I have no set width.

Summer Surf Section

This is a sufin' summery section element.

Autumn Article


Autumn is my favorite season.
[end of article]

I am an impactful blockquote block.

PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.

Professor Chaos
Professor Chaos
spiral
I am
a link
Blue Emily

Cellophane News

The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.

Professor Chaos

Section

I am a section element. I take up 25% of the width on large devices and up.

.chaos-grid.randomize.tilt

DEMO: Elements should be skewed and rotated in random positions.

Winter DIV

I am a normal div element. Using B3Grid, my width is 25% on devices over 480px, and 100% on devices under 480px.

Spring Article

This is a springtime article element, and I have no set width.

Summer Surf Section

This is a sufin' summery section element.

Autumn Article


Autumn is my favorite season.
[end of article]

I am an impactful blockquote block.

PARAGRAPH.
I'm just a plain 'ol paragraph element. I am a pool of words.

Professor Chaos
Professor Chaos
spiral
I am
a link
Blue Emily

Cellophane News

The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.

Professor Chaos

Section

I am a section element. I take up 25% of the width on large devices and up.