IDidlewan·Apr 17, 2014
It all depends on your habits.
If you're satisfied with pure CSS and Javascript, the only thing you really need is a build tool for concatenation, minification and gzip. And livereload. And probably normalize.css.
-> I use uglifyjs and uglifycss
-> I use tiny-lr for livereload (https://www.npmjs.org/package/tiny-lr)
-> I use a Makefile, because it's the most simple to modify and adapt. When I have several targets of the same type (ex: build.min.js and debug.min.js), I use a yaml file with a custom python script for concatenation. See gulp.js and a thousand others for alternatives, YMMV (my Makefile nowadays: https://gist.github.com/idlewan/11012492). Magical bit for running make every time a file changes:
watch:
@inotifywait -m --exclude ".*\.swp|.*~" -e moved_to,close_write -r . | \
while read; do make -s; done
T
Read the rest
o get more from just CSS, you need a CSS precompiler.
-> I use Stylus with the nib library (https://github.com/visionmedia/nib). Alternatives: LESS, SASS, and some others. You might want to add some grid and 'responsive shortcut' mixins on top.
bigger($minwidth)
query = "screen and (min-width: " + $minwidth + ")"
@media query
{block}
// usage:
.my-div
font-size 20px
+bigger(520px)
font-size 30px
For webapp needs, you need a template library (some people prefer using a fat framework that does everything for them, e.g. Angular).
-> I use Jade (https://github.com/visionmedia/jade), because it runs on the server for Python, Node.js and soon Nimrod, and on the client with precompiled templates. Alternatives: Mustache and a thousand others, YMMV.