<button>Shuffle Grid</button>
<article>
<div class="a">
<div><svg width="640px" viewBox="0 0 1 1"></svg></div>
</div>
<div class="b">
<div><svg width="640px" viewBox="0 0 2 1"></svg></div>
<div><svg width="640px" viewBox="0 0 2 1"></svg></div>
</div>
<div class="c">
<div><svg width="320px" viewBox="0 0 1 2"></svg></div>
<div><svg width="320px" viewBox="0 0 1 2"></svg></div>
</div>
<div class="d">
<div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
</div>
<div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
</div>
</div>
<div class="e">
<div>
<div><svg width="640px" viewBox="0 0 2 1"></svg></div>
</div>
<div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
</div>
</div>
<div class="f">
<div>
<div><svg width="320px" viewBox="0 0 1 2"></svg></div>
</div>
<div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
</div>
</div>
<div class="g">
<div>
<div><svg width="640px" viewBox="0 0 2 1"></svg></div>
</div>
<div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
</div>
</div>
<div class="h">
<div>
<div><svg width="320px" viewBox="0 0 1 2"></svg></div>
</div>
<div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
</div>
</div>
</article>
<section>
<div>
<h1>Block Variants</h1>
<p>Below is a list of blocks that can be used to make up a grid such as the one demonstrated above. You can use any amount of blocks in any order. The grid will work at any resolution and screen size.</p>
</div>
</section>
<section>
<div class="a">
<div><svg width="640px" viewBox="0 0 1 1"></svg></div>
</div>
</section>
<section>
<div class="b">
<div><svg width="640px" viewBox="0 0 2 1"></svg></div>
<div><svg width="640px" viewBox="0 0 2 1"></svg></div>
</div>
</section>
<section>
<div class="c">
<div><svg width="320px" viewBox="0 0 1 2"></svg></div>
<div><svg width="320px" viewBox="0 0 1 2"></svg></div>
</div>
</section>
<section>
<div class="d">
<div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
</div>
<div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
</div>
</div>
</section>
<section>
<div class="e">
<div>
<div><svg width="640px" viewBox="0 0 2 1"></svg></div>
</div>
<div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
</div>
</div>
</section>
<section>
<div class="f">
<div>
<div><svg width="320px" viewBox="0 0 1 2"></svg></div>
</div>
<div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
</div>
</div>
</section>
<section>
<div class="g">
<div>
<div><svg width="640px" viewBox="0 0 2 1"></svg></div>
</div>
<div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
</div>
</div>
</section>
<section>
<div class="h">
<div>
<div><svg width="320px" viewBox="0 0 1 2"></svg></div>
</div>
<div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>
</div>
</div>
</section>
<!--
!! Old way of doing things with img tags in place of svg
<section>
<div>
<h1>Block Varients</h1>
<p>Below is a list of blocks that can be used to make up a grid such as the one demonstrated above. You can use any amount of blocks in any order. The grid will work at any resolution and screen size.</p>
</div>
</section>
<section>
<div class="a">
<div><img src="http://placehold.it/640x640" alt="" /></div>
</div>
</section>
<section>
<div class="b">
<div><img src="http://placehold.it/640x320" alt="" /></div>
<div><img src="http://placehold.it/640x320" alt="" /></div>
</div>
</section>
<section>
<div class="c">
<div><img src="http://placehold.it/320x640" alt="" /></div>
<div><img src="http://placehold.it/320x640" alt="" /></div>
</div>
</section>
<section>
<div class="d">
<div>
<div><img src="http://placehold.it/320x320" alt="" /></div>
<div><img src="http://placehold.it/320x320" alt="" /></div>
</div>
<div>
<div><img src="http://placehold.it/320x320" alt="" /></div>
<div><img src="http://placehold.it/320x320" alt="" /></div>
</div>
</div>
</section>
<section>
<div class="e">
<div>
<div><img src="http://placehold.it/640x320" alt="" /></div>
</div>
<div>
<div><img src="http://placehold.it/320x320" alt="" /></div>
<div><img src="http://placehold.it/320x320" alt="" /></div>
</div>
</div>
</section>
<section>
<div class="f">
<div>
<div><img src="http://placehold.it/320x640" alt="" /></div>
</div>
<div>
<div><img src="http://placehold.it/320x320" alt="" /></div>
<div><img src="http://placehold.it/320x320" alt="" /></div>
</div>
</div>
</section>
<section>
<div class="g">
<div>
<div><img src="http://placehold.it/640x320" alt="" /></div>
</div>
<div>
<div><img src="http://placehold.it/320x320" alt="" /></div>
<div><img src="http://placehold.it/320x320" alt="" /></div>
</div>
</div>
</section>
<section>
<div class="h">
<div>
<div><img src="http://placehold.it/320x640" alt="" /></div>
</div>
<div>
<div><img src="http://placehold.it/320x320" alt="" /></div>
<div><img src="http://placehold.it/320x320" alt="" /></div>
</div>
</div>
</section> -->
// Flexbox Masonry Grid Styles
article {
display: flex;
flex-flow: row wrap;
padding: 1rem;
> * {
flex: 1 1 320px;
}
}
svg {
display: block;
max-width: 100%;
preserveAspectRatio: none;
}
.a,.b,.c,.d,.e,.f,.g,.h {
display: flex;
}
.b {
flex-direction: column;
}
.e {
flex-direction: column;
>:nth-child(2) {
display: flex;
flex-direction: row;
}
}
.g {
@extend .e;
flex-direction: column-reverse;
}
.h {
flex-direction: row-reverse;
}
// Demo Styles
* {
box-sizing: border-box;
}
button {
width: calc(100% - 2rem);
margin: 1rem 1rem 0;
padding: 2rem;
font-size: 1rem;
background: #fff;
border: 0;
outline: 0;
cursor: pointer;
border: 1px solid #b6b6b6;
border-radius: 3px;
color: #9f9f9f;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
&:hover {
color: #404040;
}
}
section {
@extend [col],[mb],[pl],[pr];
&:first-of-type {
@extend [vh];
}
> * {
margin: auto;
}
}
h1 {
font-size: 2rem;
font-family: helvetica;
font-weight: bold;
}
p {
max-width: 70ex;
padding: 2rem;
line-height: 150%;
}
h1,p {
width: 100%;
text-align: center;
}
View Compiled
// JS only required to shuffle blocks and colour in svgs
var shuffle = function () {
var parent = document.getElementsByTagName("article")[0];
var divs = parent.children;
var frag = document.createDocumentFragment();
while (divs.length) {
frag.appendChild(divs[Math.floor(Math.random() * divs.length)]);
}
parent.appendChild(frag);
}
var shuffleButton = document.getElementsByTagName('button')[0];
shuffleButton.addEventListener('click', shuffle);
// Random Nice Colour Generator
var config = {
maxHue: 360,
minSat: 50,
maxSat: 85,
minLight: 50,
maxLight: 85,
scaleLight: 15
};
var randomNum = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
var Color = function(hue, sat, light) {
this.hue = hue || randomNum(0, config.maxHue);
// Remove ugly magenta hues
if (this.hue > 288 && this.hue < 310) {
this.hue = randomNum(310, 360);
} else if (this.hue > 280 && this.hue < 288) {
this.hue = randomNum(260, 280);
}
// Increase ranges for reds
if (this.hue > 0 && this.hue < 90) {
config.minSat = 75,
config.minLight = 70,
config.maxSat = 100,
config.maxLight = 80
}
this.sat = sat || randomNum(config.minSat, config.maxSat);
this.light = light || randomNum(config.minLight, config.maxLight);
};
Color.prototype.hsl = function() {
return 'hsl(' + this.hue + ', ' + this.sat + '%, ' + this.light + '%)';
};
Color.prototype.rgb = function() {
var rgb = hsl2rgb(this.hue, this.sat, this.light);
return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
};
Color.prototype.hex = function() {
var rgb = hsl2rgb(this.hue, this.sat, this.light);
var hex = rgbToHex([rgb.r, rgb.g, rgb.b]);
return hex;
};
function hsl2rgb(h, s, l) {
var m1, m2, hue;
var r, g, b
s /= 100;
l /= 100;
if (s == 0)
r = g = b = (l * 255);
else {
if (l <= 0.5)
m2 = l * (s + 1);
else
m2 = l + s - l * s;
m1 = l * 2 - m2;
hue = h / 360;
r = Math.round(HueToRgb(m1, m2, hue + 1 / 3));
g = Math.round(HueToRgb(m1, m2, hue));
b = Math.round(HueToRgb(m1, m2, hue - 1 / 3));
}
return {
r: r,
g: g,
b: b
};
}
function HueToRgb(m1, m2, hue) {
var v;
if (hue < 0)
hue += 1;
else if (hue > 1)
hue -= 1;
if (6 * hue < 1)
v = m1 + (m2 - m1) * hue * 6;
else if (2 * hue < 1)
v = m2;
else if (3 * hue < 2)
v = m1 + (m2 - m1) * (2 / 3 - hue) * 6;
else
v = m1;
return 255 * v;
}
var rgbToHex = function(rgb) {
var hex = [];
for (var j = 0; j < rgb.length; j++) {
hex[j] = rgb[j].toString(16);
if (hex[j].length < 2) {
hex[j] = '0' + hex[j];
}
}
return '#' + hex.join('');
};
var svgs = document.getElementsByTagName('svg');
console.log(svgs[0]);
var callback = function(svg){
const c = new Color();
svg.style.background = c.hex();
}
Array.from(svgs).forEach(callback);
View Compiled
This Pen doesn't use any external JavaScript resources.