JSFiddle - React, Tailwind, and code Playground

by Andy Novocin

HTML

<body id="css-zen-garden">
<div class="page-wrapper">

	<section class="intro" id="zen-intro">
		<header role="banner">
			<h1>CSS Zen Garden</h1>
			<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
		</header>

		<div class="summary" id="zen-summary" role="article">
			<p>A demonstration of what can be accomplished through <abbr title="Cascading Style Sheets">CSS</abbr>-based design. Select any style sheet from the list to load it into this page.</p>
			<p>Download the example <a href="/examples/index" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/examples/style.css" title="This page's sample CSS, the file you may modify.">css file</a></p>
		</div>

		<div class="preamble" id="zen-preamble" role="article">
			<h3>The Road to Enlightenment</h3>
			<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.</p>
			<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <abbr title="World Wide Web Consortium">W3C</abbr>, <abbr title="Web Standards Project">WaSP</abbr>, and the major browser creators.</p>
			<p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
		</div>
	</section>

	<div class="main supporting" id="zen-supporting" role="main">
		<div class="explanation" id="zen-explanation" role="article">
			<h3>So What is This About?</h3>
			<p>There is a continuing need to show the power of <abbr title="Cascading Style Sheets">CSS</abbr>. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will...

CSS

*	{ 
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
  box-sizing:border-box;
} 

.salmon {
  color: salmon;
}

.lightSalmon {
  color: lightsalmon;
}

.darkSalmon {
  color: darksalmon;
}

.dashed-border {
  border-style: dashed;
}

.dotted-border {
  border-style: dotted;
}

.spaced {
  margin: 1em;
  padding: 1em;
}

.block {
  display: block;
}

.relative {
  display: relative;
}

.inline-block {
  display: inline-block;
}

.width-1-3 {
  width: 33.333333333333336%;  
}

.width-1-5 {
  width: 20%;  
}

.absolute {
  position: absolute;
}

.col-1-3 {
  left: 0%;
}

.col-2-3 {
  left: 33.333333333333336%;
}

.col-3-3 {
  left: 66.66666666666667%;
}

.col-1-5 {
  left: 0%;
}

.col-2-5 {
  left: 20%;
}

.col-3-5 {
  left: 40%;
}

.col-4-5 {
  left: 60%;
}

.col-5-5 {
  left: 80%;
}

.flex-parent {
  display: flex;
}

JavaScript

// The main functionality in this version will be in the classes BaseStyle, Layout,
// and Modules.  At instantiation they will compute an attribute rules which will be an array of 
// pairs of semantic selectors and display classes like my example project.  
// The remaining code deals with injecting those rules.

var chooseRandom = function(myArray){
  return myArray[Math.floor(Math.random()*myArray.length)];
};

var BaseStyle = function(){
  //Generate a set of default rules that apply 
  //at the tag level... 
  var blockTags = ['div', 'article', 'section', 'header', 'footer', 'nav', 'figure', 'li'];
  this.sections = ['section', 'aside', 'div.main'];
  var headers = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
  var textHolders = ['a', 'em', 'strong', 'abbr'];
  var that = this;
  this.bestColors = ['salmon', 'lightSalmon', 'darkSalmon'];
  this.borderStyles = ['dashed-border', 'dotted-border'];//, 'dot-border', 'img-border-bill', 'img-border-pizza', 'no-border'];
  this.rules = [];
  var that = this;
  headers.forEach( function(tag, index){
    that.rules.push([tag, chooseRandom(that.bestColors)]);
  });
  var borderStyle = chooseRandom(that.borderStyles);
  that.sections.forEach(function(tag){
    that.rules.push([tag, borderStyle]);
    that.rules.push([tag, 'spaced']);
  });
};

var layoutTree = function(tree){
  if (tree.kids.length == 0){
    return [];
  }
  
  var rules = [];
  //roll a die to decide 
  //stacked / columns / grid / inline-block / flex
  switch (chooseRandom(['stacked', 'columns'])){//,'iblock', 'flex'])) {
    case 'stacked':
      tree.kids.forEach(function(kid){
        rules.push([tree.parent + " " + kid.parent, 'block']);
      });
      break;
    case 'columns':
      rules.push([tree.parent, 'relative']);
      tree.kids.forEach(function(kid, index){
        rules.push([tree.parent + " " + kid.parent, 'absolute']);
        rules.push([tree.parent + " " + kid.parent, 'block']);
        rules.push([tree.parent + " " + kid.parent,...