This document summarizes a lightning talk on using the ZURB Foundation front-end framework with Ruby on Rails. It discusses Foundation's grid system, responsive design, components like navigation bars, and how to install Foundation via the foundation-rails gem. Customizing Foundation through variable overrides and additional components like off-canvas menus are also mentioned.

1. ZURB Foundation with Ruby on Rails
Lightning Talk hosted by The Firehose Project
- Myo Thant Kyaw -

2. Responsive front-end framework
Grid System
HTML & CSS
Components
Templates
Code Snippets
typography
forms
buttons
navigation

3. The Grid System (Foundation: block grid)
Sizing Units (pixels vs rems)
Responsive Design
“Anything not under a media query
is going to be considered as mobile”
Browser Compatibility
Community & Support
• “Bootstrap look”

4. Unordered List
<ul class="small-block-grid-2 medium-block-grid-3
large-block-grid-4">
<li><!-- Your content goes here --></li>
<li><!-- Your content goes here --></li>
<li><!-- Your content goes here --></li>
<li><!-- Your content goes here --></li>
<li><!-- Your content goes here --></li>
<li><!-- Your content goes here --></li>
</ul>
HTML

5. http://foundation.zurb.com/docs/components/abide.html

6. “Interchange uses media queries to dynamically load responsive
content that is appropriate for different users' browsers.”
http://foundation.zurb.com/docs/components/interchange.html
<img data-interchange="[/path/to/default.jpg, (default)],
[/path/to/bigger-image.jpg, (large)]">
<img data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))],
[/path/to/bigger-image.jpg, (only screen and (min-width: 1280px))]">

7. Off-canvas (menu outside viewport - slide in when activated)
Side Nav (built-in side navigation bar)
Magellan Sticky Nav (Foundation’s sticky nav bar)
Get ideas from Building Blocks -
http://zurb.com/building-blocks

8. Gemfile >
gem ‘foundation-rails’
$ bundle install
$ rails g foundation:install
app/assets/stylesheets/application.scss
*
*= require_tree .
*= require_self
*= require foundation_and_overrides
*/
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
$(function(){ $(document).foundation(); });
Gotchas
* Don’t name the app “foundation”
** Gem is ‘foundation-rails’
NOT ‘zurb-foundation’ anymore
* CSS and JS lines for Foundation
are automatically added during
installation
*** works only with:
gem ‘rails’, ‘4.1.9’
gem ‘sass-rails’, ‘~> 5.0.0’
(then run $bundle update
and $bundle install)

9. For customization:
(such as $topbar-bg-color for navbar background color):
app/assets/stylesheets/foundation_and_overrides.scss
col-sm-9 small-9 columns
Bootstrap Foundation
http://foundation.zurb.com/docs/components/grid.htmlhttp://getbootstrap.com/examples/grid/

10. Top Nav Bar

11. 2 Column Page

12. Image Hover Effect
http://zurb.com/building-blocks

13. Gradient Button
http://zurb.com/building-blocks