Statische Websites in Rails 3.1

891 views

Published on

Een presentatie over hoe je statische websites in Rails 3.1 kunt maken.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
891
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Statische Websites in Rails 3.1

  1. 1. Statische websites in Rails 3.1- Maar waarom?- Rails 3.1 project aanmaken met 45north_template- PagesController aanmaken met statische views- Layout, partials en helpers gebruiken- Lo(l)cales- Asset pijpleiding in Rails 3.1- SCSS >>>>>>>>>>>>>>>> (twee schermen verder) >>> CSS- Haml >>>> ERB
  2. 2. 45north_template- Simpele manier om Rails 3.1 template te maken- Github repo: https://github.com/45north/45north_template~/.bash_profilefunction rails3() { curl "https://raw.github.com/45north/45north_template/master/generate_template" | bash -s "$@"; cd "$@";}Terminalrails3 rails3_static
  3. 3. Statische ViewsTerminalrails g controller pages/app/controllers/pages_controller.rbclass PagesController < ApplicationController def index end def about end /config/routes.rb get "about" => "pages#about", :as => :about def contact get "contact" => "pages#contact", :as => :contact end root :to => "pages#index"end/app/views/pages/ index.html.haml / about.html.haml / contact.html.haml- content_for(:title, "Home") - content_for(:title, "About") - content_for(:title, "Contact")%h1 Home %h1 About %h1 Contact
  4. 4. Layout- Alle standaard HTML in layout stoppen- Yield = Awesome/app/views/layouts/application.html.haml!!! HTML5%html %head %title Rails 3 Static - #{yield(:title)} = stylesheet_link_tag("application") = javascript_include_tag("application") = csrf_meta_tags %body %ul#menu %li= link_to("Home", :root) %li= link_to("About", :about) %li= link_to("Contact", :contact) = yield
  5. 5. Partials- Partials = DRY- Voor grote stukken HTML die vaker voorkomen- Template Inheritance in Rails 3.1/app/views/application/_menu.html.haml DRY%ul#menu %li= link_to("Home", :root) %li= link_to("About", :about) %li= link_to("Contact", :contact)Partial toevoegen DON’T REPEAT YOURSELF%body = render("menu") = yield
  6. 6. Helpers- Helpers = DRY- Helpers voor kleine stukken HTML die vaker voorkomen/app/helpers/application_helper.rbmodule ApplicationHelper def menu_li(lbl, path, *args) options = args.extract_options! options.merge!(:class => "active") if url_for(path) == request.fullpath DRY content_tag(:li, link_to(lbl, path), options) endendHelper aanroepen%ul#menu DON’T REPEAT YOURSELF = menu_li("Home", :root) = menu_li("About", :about) = menu_li("Contact", :contact)
  7. 7. Locales- Statische teksten » Locale- YAML (bijna net zo awesome als Haml)/config/locales/en.ymlen: home: page_title: "Home" about: page_title: "About" contact: Meer weten? page_title: "Contact" http://guides.rubyonrails.org/ i18n.htmlLocale aanspreken= t("home.page_title")
  8. 8. Asset pipeline Meer weten? http://guides.rubyonrails.org/JavaScript, CSS en Images asset_pipeline.html/public = No-way/app/assets = Yes-way # => Speciaal voor jouw applicatie./lib/assets = Yes-way # => Je eigen libraries./vendor/assets = Yes-way # => Libraries van anderen./app/assets/javascripts/application.js//= require jquery//= require jquery_ujs//= require_tree ./app/assets/stylesheets/application.css/* *= require_self *= require_tree .*/
  9. 9. SCSS = SASS + CSS syntax- Standaard in Rails 3.1/app/assets/stylesheets/application.css.scss$primary-color: #500;$focus-color: #f00;@mixin menu { padding: 0; margin: 0; float: left; width: 100%; list-style: none; li { Meer weten? float: left; a { color: $primary-color; } http://sass-lang.com/ &.active a { color: $focus-color; } }}#menu { @include menu;}
  10. 10. Haml- Makkelijker HTML schrijven- Beter dan ERB (duh)- 2 spaces (soft tab)- Lange regels = No-go%h1.my_class H1-tag met class%span#my_id Span-tag met id#header Div-tag met id.footer Div-tag met class= "Ruby code uitvoeren en laten zien"- "Ruby code uitvoeren en niet laten zien" Meer weten?/ HTML comment%ul http://haml-lang.com/ %li Nesten doe je zo. %li En zo %li= "En zo met Ruby" %li{ :name => "attribuut" } %li(name="attribuut")
  11. 11. DEMO TIME!https://github.com/RobinBrouwer/rails3_static

×