Steve's Tech Notes

1) Node.js is a really powerful tool nowadays, it has a huge number of plug-ins and is very friendly to developers.   The philosophy - or at least you could build your gadget with such philosophy - of node.js is that you never need to mix-up multiple kinds of syntax, for example php and HTML or HTML and Javascript.

2) I built my project with the following combination:

1. Express, for routing, APIs, etc.
2. Jade, for HTML - this is beautiful and much cleaner than XML-like syntax, meanwhile providing a number of great looping / conditional features.
3. Less CSS, for CSS, this is not very simplified as Stylus but it provides CSS-like syntax which is good so far, and one can easily hook this with external code to provide singular CSS file.
4. Font-Awesome, a very nice icon set - I used git submodule for the first time and the experience is good enough.

3) Detailed procedures are listed as below: npm install express
./node_modules/express/bin/express jade -c less
cd . && npm install
git submodule add git@github.com:FortAwesome/Font-Awesome.git public/stylesheets/fontawesome
with the following base.less/* import reset script */
@import 'reset';

/* set import script */
@base-url: '/';

/* define fundamental colors */
@base-black: #3d3d3d;
@base-dark: #871e1f;
@base-medium: #c62c2d;
@base-light: #fbfbfb;

/* import font set */
@import './fontawesome/less/font-awesome';
@FontAwesomePath: './fontawesome/font/';

/* supporting retina display */
.background-image-set(@src, @fmt) {
background-image: url(~"@{src}.@{fmt}");
background-image: -webkit-image-set(
~"url(@{src}.@{fmt}) 1x",
~"url(@{src}@2x.@{fmt}) 2x");
background-image: -moz-image-set(
~"url(@{src}.@{fmt}) 1x",
~"url(@{src}@2x.@{fmt}) 2x");
background-image: -o-image-set(
~"url(@{src}.@{fmt}) 1x",
~"url(@{src}@2x.@{fmt}) 2x");
background-image: -ms-image-set(
~"url(@{src}.@{fmt}) 1x",
~"url(@{src}@2x.@{fmt}) 2x");*/
}


body {
background-color: @base-light;
color: @base-black;
font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', STHeiti, Arial, "Microsoft Yahei","微软雅黑", "宋体", sans-serif;
font-size: 1em;
}

section {
display: block;
width: 100%;
}
And the following base.jade!!! 5
//Copyright Steve Yang 2013.
html
head
title #{title} - Peppermint
link(rel='stylesheet', href='/stylesheets/#{name}.css');
block scripts
body
block content

Pretty nice experience on HTML & CSS huh? will further route with API...