Upload
myo-t-kyaw
View
340
Download
1
Embed Size (px)
Citation preview
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