ZURB Foundation with Ruby on RailsLightning Talk hosted by The Firehose Project- Myo Thant Kyaw -

What is ZURB Foundation?

Responsive front-end frameworkGrid SystemHTML & CSSComponentsTemplatesCode Snippetstypographyformsbuttonsnavigation

Foundation VS BootstrapThe Grid System (Foundation: block grid)Sizing Units (pixels vs rems)Responsive DesignAnything not under a media query is going to be considered as mobileBrowser CompatibilityCommunity & SupportBootstrap look

Foundation: Block Grid

Unordered List

HTML

Foundation: Built-in Form Validationhttp://foundation.zurb.com/docs/components/abide.html

Foundation: InterchangeInterchange uses media queries to dynamically load responsive content that is appropriate for different users' browsers.

http://foundation.zurb.com/docs/components/interchange.html

Foundation Feature HighlightsOff-canvas (menu outside viewport - slide in when activated)

Side Nav (built-in side navigation bar)

Magellan Sticky Nav (Foundations sticky nav bar)

Get ideas from Building Blocks - http://zurb.com/building-blocks

Ready for Foundation with Rails?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* Dont name the app foundation** Gem is foundation-railsNOT zurb-foundation anymore* CSS and JS lines for Foundation are automatically added duringinstallation*** works only with:gem rails, 4.1.9gem sass-rails, ~> 5.0.0(then run $bundle updateand $bundle install)

CustomizationsFor customization:(such as $topbar-bg-color for navbar background color):app/assets/stylesheets/foundation_and_overrides.scsscol-sm-9small-9 columns

Bootstrap

Foundation

http://foundation.zurb.com/docs/components/grid.htmlhttp://getbootstrap.com/examples/grid/

Some Code Snippets - 1

Top Nav Bar

Some Code Snippets - 22 Column Page

Some Code Snippets - 3Image Hover Effect

http://zurb.com/building-blocks

Some Code Snippets - 4Gradient Button

http://zurb.com/building-blocks