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
- jade, stylus, and coffeescript default stack
- 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
- extremely robust, modular, and powerful css helper library built in
- global variables and functions (view helpers)
- clean and intuitive app settings file
- single command deploy to heroku
- intelligently minifies html, css, and js on deploy
- efficient client-side js management through bower and require.js
- easy to extend with a simple and well-documented plugin interface
- automatically precompiles jade templates for use in client-side MVCs like backbone
- use dynamic content to create collections, blogs, etc
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 need help or something is confusing, feel free to consult the docs, file an issue, or get in touch with me directly. I can't debug your app, but if you have found an issue or have a feature request I'd be more than happy to discuss and try to implement it!
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. <3
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.
Can I contribute to this project?
Yes! In fact, I would love it if you did. The repo for the command line client is right here on github, and the repo for the css library is here. Please, help a brother out!