UPDATED: January 15, 2016
The template system and associated files and folders used in Rails are known as Views, the V in MVC. View code is primarily found in two high-level folders within a Rails 3.0 or greater application: the
helpers and the
| +- application.html.haml
Most "view" action takes place in the
views folder which can be further subdivided into the
shared folders (home to the majority of any projects foundation front-end code).
The heart of this system by default is
application.html.haml. Almost all Rails view code passes "through it" and in essence becomes "framed"by
application.html.haml before being served.
There is a "Rails way" to organize
application.html.haml and its associated files. Follow this link to review the code I use as foundation markup for any new Rails project I work on; feel free to use this code in your own projects. In essence it is HTML5 Boilerplate (v 5.3.0) in HAML organized into a Rails structure.
NOTE: In my experience the best place to reference when building front-end view templates is HTML5 Boilerplate. This resource is a long-standing and ongoing collaboration between expert front-end developers and the community.
Foundation Code Structure
Structurally the foundation code files and folders fall into place in a Rails application as follows:
| +- images
| | +- fixtures
| | +- icons
| | +- logos
| | +- pics
| +- application.js
| +- custom.js
| +- application_helper.rb
| +- layout
| | +- [_browsehappy.html.haml][_browsehappy]
| | +- _footer.html.haml
| | +- _head.html.haml
| | +- _logo.html.haml
| | +- _scripts.html.haml
| | +- _navigation.html.haml
| | +- application.html.haml
| +- shared
| +- assets
| +- jquery-1.9.1.min.js
| +- modernizr-2.7.1.min
The default Rails folder structure and foundation code folder structure are pretty much identical by design – so that you can cut and paste it into your project in one action. Folders I added , i.e. not default rails folders,are depicted in bold above; new or replacement files include links to their respective github source for your inspection.
In Setting up a Smart HTML Foundation for Rails I will take you through the implementation of this code by creating a new Rails application and replacing the default out-of-the-box Rails files with my foundation code. In Setting up a Smart CSS Foundation for Rails I will share my default Rails CSS foundation. Cheers!
Want to know when the next article is published? Subscribe here. Thanks for reading!