Roots is a toolkit built on best practices for advanced front-end web development. It has a very large number of features, which I’ll attempt to list below. Roots comes in the form of a static site build tool by default, but also includes templates and plugins for express and rails.
- extremely simple installation
- clean and minimal default project template
- clean and intuitive app settings file
- jade, stylus, and coffeescript default stack
- easy to add languages with a simple and well-documented plugin interface
- super fast live reload implementation
- compile errors displayed as a flash message, doesn’t break workflow
- layouts and partials fully supported
- coffeescript and markdown can be written directly in views
- global variables and functions (view helpers)
- extremely robust, modular, and powerful css helper library built in
- single command deploy to heroku, nodejitsu, or github pages
- intelligently minifies html, css, and js on deploy
- efficient client-side js management through bower and require.js
- automatically precompiles jade templates for use in client-side MVCs like backbone
- use dynamic content to create collections, blogs, etc
- compile a single file for multiple languages
Installation is super straightforward and relies only on node.js, which has a well-maintined universal installer. You can install directly through npm with this command (try prefixing with
sudo if you get a permissions error):
npm install roots -g
Roots can be pretty complicated at times, so I made this little series of videos to get you started understanding the major pieces. Hopefully they are helpful, and if there are any other topics you'd like videos on feel free to get in touch!
getting started (6:23)
project structure (9:44)
axis css library (23:45)
dynamic content (9:47)
js templates (6:51)
If you are confused and/or having trouble, one of the solutions below will almost certainly get you back on your feet:
- Consult the docs
- File an issue
- Ask us in the official IRC channel on freenode, #roots-dev
- Tweet at me, and we'll work it out
I'm having a problem with roots and I'm mad at you.
Breathe deep. I know this project is not perfect. I'm only one guy, I'm doing my best — promise! I'd be happy to look into any issue - just file an issue on github and I'll get to it as quickly as I can.
Who are the great-looking people behind this project?
Oh hello, I'm Jeff. I'm lucky enough to write code and design at the best company in the world, carrot creative. You can find/follow me on the twitters here if you want to chat or listen to my craziness. I'd also like to give some huge props to everyone who helped me out with this project, mainly:
- Sam, whose contributions, support, and trolling have been immense.
- Sean, a precocious voice of reason, working hard to push roots forward
Who is responsible for the awesome icons on this site?
Glad you asked! The icons on this site are from entypo, by Daniel Bruce, and he is the man for making such awesome free icons. The roots logo was lovingly crafted by Patrick Lythell.
How do I use roots with haml/sass/compass?
Although it is possible through roots' plugin interface, truthfully roots is not built to be used with ruby libraries like haml, sass, or compass. If roots seems like your kind of jam, but you haven't used jade or stylus before, I would strongly recommend trying them out. They are very similar to haml/sass, and in fact are in many ways cleaner and more flexible. If you really don't think you can handle it, I would recommend checking out middleman, a similar project built on top of ruby with support for haml, sass, and compass out of the box. I have used it before and it's fantastic.