JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<a href="[role=main]">main!</a>
<p>See this article for how to finish the installation on your platform: http://net.tutsplus.com/tutorials/other/automate-your-projects-with-apache-ant/ (see section Windows- and Mac-Specific Install Bits.)
Apache SSI

To permit SSI on your server, see this article: http://httpd.apache.org/docs/2.2/howto/ssi.html

All the other tools needed in the local build are in the tools folder.

Things you need to know

Media Queries are based on 16px default font size and defined in ems. If you don't go for responsive design (you should!), just replace the default @import rules in /webroot/assets/css/unresponsive.css with your own modular ones. The framework is designed to be modular so you should split the rules into logical modules, and place the styles in /webroot/assets/css/modules.
JavaScript should not be relied on for layout. That's why I've adopted a bulletproof solution from Nicholas Zakas and Tantek Çelik: http://www.nczonline.net/blog/2011/03/22/using-html5-semantic-elements-today/, http://tantek.com/presentations/2010/11/html5-now/.
Don’t use IDs in CSS selectors. Use classes, or ARIA landmark roles instead (referenced with CSS attribute selectors). See also http://oli.jp/2011/ids/.
I'm using Sticky footer solution: http://www.cssstickyfooter.com.
Logic

HTML

Each page has a controller in /webroot/html/pages/pagename/index.shtml. In that file, we include the config file and set variables, define the view, and template file that we need to include, to render that particular page. For more information, see project main index file: https://github.com/akikoo/one-web-boilerplate/blob/master/webroot/html/index.shtml
CSS - six stylesheets by default, included in the following order:

/webroot/assets/css/common/normalize.css (reset styles)
/webroot/assets/css/common/base.css (global, mobile first styles, containing only common colour and typographic rules for basic experience to all users)
/webroot/assets/css/common/utilities.css...