JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<header id="header" class="primary">
	<div class="container">
		<div class="branding">
			<h1>
				<a href="">This is Columns</a>
			</h1>
		</div>
	</div>
</header>

<div class="torso group">
	<div class="main" role="main">
		<div class="columns"></div>
	</div>
	
	<aside class="primary">
		<label for="column_widths">Column Widths</label>
		<input type="text" name="column_widths" value="1 2 1" />

		<label for="gutter_width">Gutter Width</label>
		<input type="text" name="gutter_width" value="16px" />

		<label for="padding">Column Padding</label>
		<input type="text" name="padding" value="8px 16px" />
	</aside>
</div>

<footer class="primary">
	<div class="container">
		<div class="copyright">©2013 iMarc LLC.</div>
	</div>
</footer>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
/* = Table of Contents =

 * Variables
 * Web Fonts
 * Base
 * Mixins
 * Grouping
 * Layout
 * Typography
 * Iconography
 * Navigation
 * Forms
 * Messaging
 * Tables
 * Section Specific
 * Page Specific
 * Media Queries
 * Print Styles
 */
/* = Variables = */
/* = Web Fonts = */
@font-face {
  font-family: 'imarcicons';
  src: url("../css/fonts/imarcicons.eot");
  src: url("../css/fonts/imarcicons.eot?#iefix") format("embedded-opentype"), url("../css/fonts/imarcicons.woff") format("woff"), url("../css/fonts/imarcicons.ttf") format("truetype"), url("../css/fonts/imarcicons.svg#imarcicons") format("svg");
  font-weight: normal;
  font-style: normal; }

/* = Base = */
a, abbr, address, article, aside, audio, b, blockquote, body, canvas, cite,
code, dd, div, dl, dt, em, fieldset, footer, form, h1, h2, h3, h4, h5, h6,
header, html, i, iframe, img, label, li, nav, object, ol, p, pre, section,
span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, ul, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline; }

article, aside, footer, header, nav, section {
  display: block; }

audio, canvas, video {
  display: inline-block; }

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

html {
  background: #2c2c2c;
  color: #555555;
  font-family: Arial, Helvetica, sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  background: #FCFCFC;
  font-size: 16px;
  line-height: 1.5;
  min-width: 310px; }

img {
  -ms-interpolation-mode: bicubic;
  max-width: 100%;
  vertical-align: middle; }

::-moz-selection {
  background: #fff6b5;
  text-shadow: none; }

::selection {
  background: #fff6b5;
  text-shadow: none; }

/* = Mixins = */
/* = Grouping = */
.group:before, .group:after,
.container:before,
.container:after {
  content: '';
  display: table;...

JavaScript

$(function() {
	$('.columns').each(function() {
		var html = $(this).html()
			.replace(/					/g, '');
		html = '<div class="columns">\n' + html + '</div>\n';

		var code = $('<code lang="html" />').text(html);

		$(this).nextAll('pre:first').append(code);
	});

	var content = function(index) {
		var content = '<h4>Column ' + index + '</h4>\n';
		if (index == 0) {
			content += '<p>This first column is larger just to prove that the length of the content does not';
			content += 'break any of the functionality.</p>\n';
		}

		return content;
	};

	var update = function() {
		var columnSets = $('input[name="column_widths"]').val().split(/ *, */);
		var gutterWidth = $('input[name="gutter_width"]').val();

		var main = $('.main');
		main.empty();

		for (var j=0; j<columnSets.length; j++) {
			var columnWidths = columnSets[j].split(/ +/);

			var columns = $('<div class="columns">');
			
			var width;
			for (var i=0; i<columnWidths.length; i++) {
				width = columnWidths[i];

				if (parseInt(width) == width) {
					width = (width * 100) + "%";
				}
				if (i>0) {
					$('<hr />')
						.css('width', gutterWidth)
						.appendTo(columns);
				}
				$('<div />')
					.html( content(i) )
					.css({
						padding: $('input[name="padding"]').val(),
						width: width
					})
					.appendTo(columns);
			}

			main.append(columns);
		}
	};

	update();

	$('aside.primary input, aside.primary select').change(update);
	$('aside.primary input, aside.primary select').keyup(update);
});