.main-content
	//for the tiles
	.bathroom-tiles.default
		- for (var i=0; i<220; i++)
			div
			
	//everything else aesthetic		
	.floor
	
	.bathtub
		svg(viewBox="0 0 150 150")
			path(fill="#444" d="M41.379,19.396v-2.586c0-5.705-4.641-10.345-10.345-10.345H18.104c-5.704,0-10.345,4.641-10.345,10.345 V90.84h5.172V16.811c0-2.853,2.32-5.173,5.172-5.173h12.931c2.853,0,5.172,2.32,5.172,5.173v2.586 c-1.428,0-2.586,1.158-2.586,2.586v2.586h10.345v-2.586C43.965,20.555,42.808,19.396,41.379,19.396z")
			path(fill="#999" d="M146.121,96.982H3.879C1.737,96.982,0,95.246,0,93.104l0,0c0-2.143,1.737-3.879,3.879-3.879h142.242	c2.143,0,3.879,1.736,3.879,3.879l0,0C150,95.246,148.264,96.982,146.121,96.982z")
			path(fill="#444" d="M124.729,133.189H25.271c-5.773,0-10.847-3.827-12.434-9.379L5.172,96.982h139.656l-7.666,26.828 C135.576,129.362,130.502,133.189,124.729,133.189z")
			path(fill="#999" d="M23.276,93.104c0-2.143,1.737-3.879,3.879-3.879H3.879C1.737,89.225,0,90.961,0,93.104 s1.737,3.879,3.879,3.879h23.276C25.013,96.982,23.276,95.246,23.276,93.104z")
			path(fill="#333" d="M46.552,29.741H31.035c-1.428,0-2.586-1.158-2.586-2.586l0,0c0-1.428,1.158-2.586,2.586-2.586h15.517 c1.428,0,2.586,1.158,2.586,2.586l0,0C49.138,28.583,47.98,29.741,46.552,29.741z")
			polygon(fill="#444" points="32.219,140.038 24.865,140.038 24.865,130.232 37.122,130.232 ")
			polygon(fill="#444" points="113.047,130.232 125.304,130.232 125.304,140.038 117.949,140.038 ")
			
	.plant
		.pot
		svg(viewBox="0 0 512 512")
			path(style="fill:#80C56E;" d="M240.768,375.302h30.464c2.266-27.415,5.543-76.41,6.611-140.186C279.091,160.524,256,0,256,0  s-23.091,160.524-21.843,235.116C235.225,298.892,238.502,347.886,240.768,375.302z")
			path(style="fill:#9CD38C;" d="M240.768,375.302H256C258.266,347.886,256,0,256,0s-23.091,160.524-21.843,235.116  C235.225,298.892,238.502,347.886,240.768,375.302z")
			path(style="fill:#66AD66;" d="M300.943,375.302c5.31-38.63,9.796-77.416,14.721-116.047c8.638-67.756,8.147-137.246,12.728-205.487  c-25.881,63.055-50.174,131.999-56.134,200.346c-3.488,39.998-4.989,80.767-2.755,121.188H300.943z")
			path(style="fill:#5E9E5E;" d="M300.943,375.302c5.31-38.63,9.796-77.416,14.721-116.047c8.638-67.756,8.147-137.246,12.728-205.487  c-25.881,63.055-46.61,281.113-44.376,321.535h16.927V375.302z")
			path(style="fill:#66AD66;" d="M211.057,375.302h31.44c2.234-40.422,0.733-81.19-2.755-121.188  c-5.96-68.348-30.253-137.292-56.134-200.346c4.581,68.241,4.09,137.731,12.728,205.487  C201.261,297.886,205.748,336.672,211.057,375.302z")
			path(style="fill:#5E9E5E;" d="M226.751,375.302h15.747c2.234-40.422,0.733-81.19-2.755-121.188  c-5.96-68.348-30.253-137.292-56.134-200.346C196.269,124.278,217.413,218.103,226.751,375.302z")
			path(style="fill:#80C56E;" d="M191.648,375.302h41.957c-1.925-16.386-4.675-32.614-8.128-48.538  c-15.49-71.44-59.503-138.687-109.491-190.186c31.789,64.118,49.534,132.034,67.11,201.234  C186.256,350.254,189.092,362.752,191.648,375.302z")
			path(style="fill:#9CD38C;" d="M191.648,375.302h19.41c-4.216-38.382-45.084-187.224-95.072-238.723  c31.789,64.118,49.534,132.034,67.11,201.234C186.256,350.254,189.092,362.752,191.648,375.302z")
			path(style="fill:#80C56E;" d="M320.352,375.302c2.556-12.55,5.392-25.048,8.552-37.49c17.576-69.199,35.32-137.115,67.11-201.234  c-49.987,51.499-94.001,118.745-109.491,190.186c-3.453,15.924-6.203,32.152-8.128,48.538L320.352,375.302L320.352,375.302z")
			path(style="fill:#9CD38C;" d="M300.943,375.302c27.449-136.055,63.282-174.605,95.072-238.723  c-49.987,51.499-94.001,118.745-109.491,190.186c-3.453,15.924-6.203,32.152-8.128,48.538h22.547V375.302z")

aside.context
	.name-of-pattern Just White
	button.js-switch Get New Pattern
	.explanation
		| Part of the 
		a(href="https://codepen.io/collection/DQvYpQ/" target="_blank") CSS Grid collection here
		| .

footer
	a(href="https://twitter.com/meowlivia_" target="_blank")
		i.icon-social-twitter.icons
	a(href="https://github.com/oliviale" target="_blank")
		i.icon-social-github.icons
	a(href="https://dribbble.com/oliviale" target="_blank")
		i.icon-social-dribbble.icons
View Compiled
body {
	background: #fff;
	font-family: "Comfortaa", sans-serif;
}

* {
	box-sizing: border-box;
}

aside.context {
	text-align: center;
	color: #333;
	line-height: 1.7;
	a {
		text-decoration: none;
		color: #333;
		padding: 3px 0;
		border-bottom: 1px dashed;
		&:hover {
			border-bottom: 1px solid;
		}
	}
	.explanation {
		max-width: 700px;
		margin: 3em auto 0;
	}
	.name-of-pattern {
		text-align: center;
		font: 700 50px Amatic SC;
	}
	button {
		background: none;
		border: 3px solid #000;
		padding: 1em 1.5em;
		margin: 2em auto;
		font: 700 20px/1 Comfortaa;
		cursor: pointer;
		position: relative;
		&:before {
			content: '';
			transition: .3s ease;
			width: 0;
			height: 100%;
			position: absolute;
			background: #000;
			top: 0;
			left: 0;
			z-index: -1;
		}
		&:hover {
			color: #fff;
			&:before {
				width: 100%;
			}
		}
		&:focus {
			outline: none;
		}
	}
}

footer {
	text-align: center;
	margin: 2em auto;
	width: 100%;
	a {
		text-decoration: none;
		display: inline-block;
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: transparent;
		border: 1px dashed #333;
		color: #333;
		margin: 5px;
		&:hover {
			background: rgba(255, 255, 255, 0.1);
		}
		.icons {
			margin-top: 12px;
			display: inline-block;
			font-size: 20px;
		}
	}
}

.main-content {
	margin: 5em auto 7em;
	max-width: 800px;
	position: relative;
	perspective: 800px;
}

.bathtub {
	position: absolute;
	width: 480px;
	right: 5%;
	bottom: -20%;
	transform: scaleX(-1);
}

.plant {
	position: absolute;
	width: 200px;
	left: -10px;
	bottom: 50px;
	.pot {
		position: absolute;
		background: #444;
		width: 90px;
		height: 140px;
		bottom: -80px;
		left: 50%;
		border-radius: 50% 50% 80% 80% / 100%;
		margin-left: -45px;
		overflow: hidden;
		&:before {
			content: "";
			border-radius: inherit;
			border-left: 35px solid rgba(0,0,0,0.1);
			position: absolute;
			transform: rotate(15deg);
			top: 0;
			left: -10px;
			height: inherit;
			width: inherit;
		}
	}
}

.floor {
	transform-origin: top center;
	transform: rotateX(78deg);
	background: #f3f3f3;
	width: 800px;
	height: 150px;
	bottom: -150px;
	position: absolute;
	left: 0;
}

.bathroom-tiles {
	height: 450px;
	width: 100%;
	display: grid;
	overflow: hidden;
}

.default {
	background: #f5f5f5;
	grid: repeat(11, 1fr) / repeat(20, 1fr);
	grid-gap: 4px;
	padding: 4px;
	div {
		background: #fff;
		border-radius: 6px;
	}
}

.batman {
	background: #999;
	grid: repeat(3, 1fr) / repeat(5, 1fr);
	grid-gap: 3px;
	padding: 3px;
	div {
		background: #777;
		&:nth-child(n+16) {
			display: none;
		}
	}
	+ .floor {
		background: #444;
	}
}

.rustic {
	background: #eee;
	grid-gap: 4px;
	grid: 55% 5px 1fr / repeat(18, 1fr);
	div {
		background: #f9f9f9;
		&:nth-child(1) {
			background: #C69D7D;
			grid-column: 1 / span 18;
		}
		&:nth-child(2) {
			background: #907654;
			grid-column: 1 / span 18;
			margin-top: -5px;
		}
		&:nth-child(n + 21) {
			display: none;
		}
	}
	+ .floor {
		background: #d4b38f;
	}
}

.blue-seas {
	background: #fff;
	grid: repeat(3, 1fr) repeat(2, 2fr) 1fr 2fr repeat(3, 1fr) / repeat(4, 1fr);
	div {
		background: #ebebd3;
		box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
		&:nth-child(-n + 4) {
			background: #155268;
		}
		&:nth-child(n + 13) {
			background: #2d7289;
		}
		&:nth-child(n + 21) {
			background: #ebebd3;
		}
		&:nth-child(n + 29) {
			background: #155268;
		}
		&:nth-child(n + 33) {
			background: #ebebd3;
		}
		&:nth-child(n + 37) {
			background: #155268;
		}
		&:nth-child(n + 41) {
			display: none;
		}
	}
	+ .floor {
		background: #2d7289;
	}
}

.striped {
	grid: 1fr / repeat(10, 1fr);
	background: #fef0c7;
	div {
		&:nth-child(odd) {
			background: #fee9ab;
		}
		&:nth-child(n + 10) {
			display: none;
		}
	}
	+ .floor {
		background: #eaba6b;
	}
}

.chiangmai {
	background: #f3f3f3;
	grid: repeat(3, 1fr) 60px / repeat(6, 1fr);
	grid-gap: 2px;
	padding: 2px;
	div {
		background: #e5e1db;
		border-radius: 3px;
		&:nth-child(n + 19) {
			background: #bcaf97;
		}
		&:nth-child(n + 25) {
			display: none;
		}
	}
	+ .floor {
		background: #e5e1db;
	}
}

.horizontal {
	grid: repeat(8, 70px) / 1fr;
	div {
		background: #f9f9f9;
		box-shadow: inset 0 2px 2px rgba(0,0,0,0.15);
		&:nth-child(n + 8) {
			display: none;
		}
	}
	+ .floor {
		background: #ddedf6;
	}
}

.horizontal-color {
	grid: repeat(10, 50px) / 1fr;
	background: #85ccca;
	div:nth-child(odd) {
		background: #c2e5e4;
	}
	div:nth-child(n + 10) {
		display: none;
	}
	+ .floor {
		background: #85ccca;
	}
}

.brick {
	background: #fff;
	grid: repeat(10, 1fr) / repeat(6, 1fr);
	grid-gap: 2px;
	div {
		background: #ddd;
		&:nth-child(n + 7) {
			margin-left: -50%;
			margin-right: 50%;
		}
		&:nth-child(n + 13) {
			margin-left: 0;
			margin-right: 0;
		}
		&:nth-child(n + 19) {
			margin-left: -50%;
			margin-right: 50%;
		}
		&:nth-child(n + 25) {
			margin-left: 0;
			margin-right: 0;
		}
		&:nth-child(n + 31) {
			margin-left: -50%;
			margin-right: 50%;
		}
		&:nth-child(n + 37) {
			margin-left: 0;
			margin-right: 0;
		}
		&:nth-child(n + 43) {
			margin-left: -50%;
			margin-right: 50%;
		}
		&:nth-child(n + 49) {
			margin-left: 0;
			margin-right: 0;
		}
		&:nth-child(n + 55) {
			margin-left: -50%;
			margin-right: 50%;
		}
		&:nth-child(n + 61) {
			margin-left: 0;
			margin-right: 0;
		}
		&:nth-child(66),
		&:nth-child(12) {
			grid-column: 6;
			grid-row: 2;
		}
		&:nth-child(67),
		&:nth-child(24) {
			grid-column: 6;
			grid-row: 4;
		}
		&:nth-child(68),
		&:nth-child(36) {
			grid-column: 6;
			grid-row: 6;
		}
		&:nth-child(69),
		&:nth-child(48) {
			grid-column: 6;
			grid-row: 8;
		}
		&:nth-child(70),
		&:nth-child(60) {
			grid-column: 6;
			grid-row: 10;
		}
		&:nth-child(n + 66) {
			margin-left: 51%;
		}
		&:nth-child(n + 71) {
			display: none;
		}
	}
	+ .floor {
		background: #f5f5f5;
	}
}

.brick-lg {
	background: #fff;
	grid: repeat(6, 1fr) / repeat(5, 1fr);
	div {
		background: #ffede1;
		box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
		&:nth-child(n + 6) {
			margin-left: -50%;
			margin-right: 50%;
		}
		&:nth-child(n + 11) {
			margin-left: 0;
			margin-right: 0;
		}
		&:nth-child(n + 16) {
			margin-left: -50%;
			margin-right: 50%;
		}
		&:nth-child(n + 21) {
			margin-left: 0;
			margin-right: 0;
		}
		&:nth-child(n + 26) {
			margin-left: -50%;
			margin-right: 50%;
		}
		&:nth-child(n + 31) {
			margin-left: 0;
			margin-right: 0;
		}
		&:nth-child(10),
		&:nth-child(32) {
			grid-column: 5;
			grid-row: 2;
		}
		&:nth-child(20),
		&:nth-child(33) {
			grid-column: 5;
			grid-row: 4;
		}
		&:nth-child(30),
		&:nth-child(34) {
			grid-column: 5;
			grid-row: 6;
		}
		&:nth-child(n + 32) {
			margin-left: 51%;
		}
		&:nth-child(n + 35) {
			display: none;
		}
		&:nth-child(3),
		&:nth-child(6),
		&:nth-child(10),
		&:nth-child(12),
		&:nth-child(15),
		&:nth-child(19),
		&:nth-child(22),
		&:nth-child(24),
		&:nth-child(26),
		&:nth-child(28) {
			background: #d8dbe2;
		}
		&:nth-child(2),
		&:nth-child(5),
		,
		&:nth-child(8),
		&:nth-child(11),
		&:nth-child(14),
		&:nth-child(17),
		&:nth-child(21),
		&:nth-child(33),
		&:nth-child(25),
		&:nth-child(29) {
			background: #68747A;
		}
	}
	+ .floor {
		background: #68747A;
	}
}

.brownery {
	background: #ddd;
	grid: 55% 15px repeat(6, 32px) / repeat(25, 1fr);
	div {
		background: #f9f9f9;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
		border-radius: 2px;
		&:nth-child(-n + 25) {
			background: #bca371;
			box-shadow: inset 0 1px 2px #9a865d;
			border-radius: 0;
		}
		&:nth-child(26) {
			grid-column: span 25;
		}
		&:nth-child(n + 177) {
			display: none;
		}
	}
	+ .floor {
		background: #ddd;
	}
}

.weird-cells {
	background: #ededed;
	grid-gap: 2px;
	grid: repeat(5, 20%) / repeat(20, 1fr);
	padding: 2px;
	div {
		background: #fff;
		&:nth-child(n + 101) {
			display: none;
		}
	}
	+ .floor {
		background: #f1f1f1;
	}
}

.blue-whale {
	background: #fff;
	grid: repeat(21,auto) / repeat(10,1fr);
	grid-gap: 2px;
	div {
		background: #6DD3CE;
		&:nth-child(even) {
			background: #87DBD6;
		}
		&:nth-child(17n) {
			background: #46ACC2;
		}
		&:nth-child(8n) {
			backgorund: #89CAD8;
		}
		&:nth-child(16n) {
			background: #59C3C3;
		}
		&:nth-child(7n+2) {
			background: #4BC6B9;
		}
	}
	+ .floor {
		background: #46ACC2;
	}
}

.chess {
	background: #f9f9f9;
	grid: repeat(6,1fr) / repeat(11,1fr);
	grid-gap: 2px;
	div {
		background: #EDD9B0;
		&:nth-child(odd) {
			background: #F3E5CA;
		}
		&:nth-child(n+67) {
			display: none;
		}
	}
	+ .floor {
		background: #E5B25D;
	}
}

.github {
	background: #f2f7f2;
	grid: 30% repeat(5,22px) 1fr / repeat(32,1fr);
	grid-gap: 3px;
	div {
		background: #c6e48b;
		&:nth-child(3n) {
			background: #7bc96f;
		}
		&:nth-child(7n) {
			background: #239a3b;
		}
		&:nth-child(12n) {
			background: #196127;
		}
		&:nth-child(1),&:nth-child(162) {
			grid-column: span 32;
			background: #f2f7f2;
		}
		&:nth-child(n+163) {
			display: none;
		}
	}
	+ .floor {
		background: #c6e48b;
	}
}

.jungle {
	grid: repeat(11, 1fr) / repeat(20, 1fr);
	grid-auto-flow: dense;
	grid-gap: 2px;
	div {
		background: #A3F7B5;
		&:nth-child(5n) {
			grid-column: span 2;
		}
		&:nth-child(-6n+120) {
			grid-row: span 2;
		}
		&:nth-child(3n) {
			background: #40C9A2;
		}
		&:nth-child(2n) {
			background: #2F9C95;
		}
		&:nth-child(4n) {
			background: #ADE25D;
		}
		&:nth-child(6n) {
			background: #00BFB2;
		}
		&:nth-child(7n) {
			background: #26C485;
		}
		&:nth-child(8n) {
			background: #5DD39E;
		}
		&:nth-child(4) {
			grid-column: 2 / span 3;
			grid-row: 2 /span 3;
			background: #2F9C95;
		}
		&:nth-child(26) {
			grid-column: 9 / span 3;
			grid-row: 5 / span 3;
			background: #40C9A2;
		}
		&:nth-child(31) {
			grid-column: 5 / span 3;
			grid-row: 8 / span 3;
			background: #ADE25D;
		}
		&:nth-child(33) {
			grid-column: 18 / span 3;
			grid-row: 3 / span 3;
			background: #5DD39E;
		}
		&:nth-child(n+138) {
			display: none;
		}
	}
	+ .floor {
		background: #2F9C95;
	}
}

.slanted {
	grid: repeat(12,60px) / repeat(7,120px);
	grid-auto-flow: column;
	div {
		background: #E8F1F2;
		transform: rotate(-20deg);
		margin-left: -18%;
		margin-right: 5%;
		margin-top: -14%;
		margin-bottom: 16%;
		box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.25);
		&:nth-child(n+90) {
			display: none;
		}
	}
	+ .floor {
		background: #f7f7f7;
	}
}

.space {
	grid: 10% repeat(12, 25px) / 20% repeat(18,25px);
	background: #2D93AD;
	div {
		&:nth-child(44) , &:nth-child(50), &:nth-child(64), , &:nth-child(68), &:nth-child(82), &:nth-child(83), &:nth-child(84), &:nth-child(85), &:nth-child(86), &:nth-child(87), &:nth-child(88), &:nth-child(100), &:nth-child(101), &:nth-child(103), &:nth-child(104), &:nth-child(105), &:nth-child(107), &:nth-child(108), &:nth-child(118), &:nth-child(119), &:nth-child(120), &:nth-child(121), &:nth-child(122), &:nth-child(123), &:nth-child(124), &:nth-child(125), &:nth-child(126), &:nth-child(127), &:nth-child(128), &:nth-child(137), &:nth-child(139), &:nth-child(140), &:nth-child(141), &:nth-child(142), &:nth-child(143), &:nth-child(144), &:nth-child(145), &:nth-child(147), &:nth-child(156), &:nth-child(158), &:nth-child(164), &:nth-child(166), &:nth-child(178), &:nth-child(179), &:nth-child(181), &:nth-child(182) {
			background: #99C24D;
		}
	}
	+ .floor {
		background: #C1E2F0;
	}
}

.mid-grid {
	background: #fff;
	grid-gap: 2px;
	grid: repeat(10, 1fr) / 21% 21% repeat(8,1fr) 21% 21%;
	grid-auto-flow: column;
	div {
		background: #e4d9c9;
		&:nth-child(2n) {
			background: #efe0bb;
		}
		&:nth-child(3n) {
			background: #ffefd8;
		}
		&:nth-child(4n) {
			background: #ac9c8b;
		}
		&:nth-child(6n) {
			background: #d4c8b6;
		}
		&:nth-child(7n) {
			background: #ded7cb;
		}
		&:nth-child(-n+4), &:nth-child(n+85) {
			grid-row: span 5;
			background: #dad2c9;
		}
		&:nth-child(n+89) {
			display: none;
		}
	}
	+ .floor {
		background: #f1f1f1;
	}
}

.tiger {
	grid: 100% / .5fr 10px 2fr 5px .5fr 6px .2fr 5px .3fr 8px .6fr 9px 3fr 9px .8fr 5px .3fr 5px .3fr 9px .5fr 3px .6fr 4px 2fr 4px 1fr 4px 1fr;
	background: #FF9F1C;
	div {
		&:nth-child(even) {
			background: #222;
		}
		&:nth-child(n+30) {
			display: none;
		}
	}
	+ .floor {
		background: #FFCA83;
	}
}

.batman, .blue-seas, .chiangmai, .space, .jungle {
	~ .bathtub svg {
		path:nth-child(1),path:nth-child(3), polygon {
			fill: #f6f6f6;
		}
		path:nth-child(2),path:nth-child(4), path:nth-child(5) {
			fill: #ddd;
		}
	}
	~ .plant .pot {
		background: #f6f6f6;
	}
}
View Compiled
var pattern = [
	{ class: "default", name: "Just White" },
	{ class: "batman", name: "Batman's Cave" },
	{ class: "rustic", name: "Rustic, whatever that means" },
	{ class: "blue-seas", name: "Rough Oceans" },
	{ class: "striped", name: "Stripes" },
	{ class: "chiangmai", name: "Chiangmai" },
	{ class: "horizontal", name: "Simply" },
	{ class: "horizontal-color", name: "Stripes II" },
	{ class: "brick", name: "Bricked" },
	{ class: "brick-lg", name: "Bricked Pt II" },
	{ class: "brownery", name: "Barn" },
	{ class: "weird-cells", name: "Prison Bars" },
	{ class: "blue-whale", name: "Calm Seas" },
	{ class: "chess", name: "Chess Board" },
	{ class: "github", name: "Github Contributions" },
	{ class: "jungle", name: "Jungle Chaos" },
	{ class: "slanted", name: "20°" },
	{ class: "space", name: "Space Invader" },
	{ class: "mid-grid", name: "Mom would like it" },
	{ class: "tiger", name: "Tyger, Tyger" }
];

$(".js-switch").click(function() {
	var item = Math.floor(Math.random() * pattern.length);
	$(".bathroom-tiles").attr("class", "bathroom-tiles " +  pattern[item].class);
	$(".name-of-pattern").text(pattern[item].name);
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js