If you had to set up a new web site in the past decade you surely know Twitter Bootstrap – a CSS framework that helps you to set up responsive beautiful web sites quickly. But there is another lesser-known star called Zurb Foundation. If you are looking for a simple, (MIT-)free and customizable CSS framework with your Padrino web application then let me get you on track. Skip the ranting about Twitter Bootstrap if you want. 🙂
So did I say that Twitter Bootstrap helps create web sites quickly? I don't know about your experience but I have spent a day just figuring out how to use items in the navbar correctly. Actually the documentation is nice and looks complete. But from the examples I find it very hard to derive how to actually get any non-trivial layout working. Don't believe me? Tell me how long you need to use glyphicons in the navbar in a radio-button fashion. Today I needed another simple layout for an adminsitration web interface and decided to use Twitter Bootstrap again. I wanted to use a nice logo at the top-left but it was slightly too large. It's just a framework, right? So making the navbar higher should be easy. After an hour of unsuccessful fiddling with additional CSS classes I searched the internet and literally found dozens of questions on from annoyed web developers on StackOverflow with even more mind-twisting suggestions and ugly CSS. Also Bootstrap was built using LESS and the SASS version appeared to be more a pet project so I wouldn't know how much or for long I could rely on it. Screw you Bootstrap. If the CSS framework makes work harder than just writing the CSS from scratch then something is wrong.
The Foundation of relief
Adding the Foundation files to your Padrino project
Are you still with me? Great. I assume that you want to use Compass to turn your SCSS files into plain CSS. If your project does not yet use Compass then run:
padrino gen component -c compass
To use Zurb Foundation with your Padrino project first clone the repository I mentioned:
git clone firstname.lastname@example.org:zurb/bower-foundation.git
To load the SCSS files in the right order I recommend you create a file app/stylesheets/application.scss with this content:
// Load normalize.scss as recommended by Zurb Foundation @import "normalize"; // Customize certain layout settings in foundation/_settings.scss @import "foundation/settings"; // Use Zurb Foundation @import "foundation";
"normalize" resets CSS styles to a common standard. "foundation/settings" allows you to change the default values of Foundation – like the background color or height of your navbar. There are actualy much more than 1000 settings documented in app/stylesheets/foundation/_settings.scss that you can alter. I love it. And finally "foundation" gets loaded from app/stylesheets/foundation/foundation.scss.
Now you should be able to use Foundation's components. Just follow its documentation. Good luck.