Save 37% off PRO during our Black Friday Sale! »

Railsgirls: Where did my HTML and CSS go

51fe3fb53af0ec95918f6b8d159631e9?s=47 bjelli
November 30, 2013

Railsgirls: Where did my HTML and CSS go

So you converted you static website into a rails app. Where can you find your HTML and CSS now?



November 30, 2013


  1. Where did my HTML and CSS go? Brigitte Jellinek Railsgirls

    Munich Nov 30th 2013
  2. You thought you knew about HTML and CSS

  3. But now that you are using Rails: where did the

    HTML and CSS go?
  4. Changes in HTML

  5. None
  6. The Layout (for all pages) One View (per page) Cut

    up HTML
  7. Cut up and reassemble / index.html ideas.html /app/views pages/info.html.erb ideas/index.html.erb

    layout/application.html. erb I'm embedded ruby and will produce html
  8. Write all Links with link_to <h1>My Static Webpage</h1> <p>it's full

    off important Tags!</p> <p>also, it has a <a href="ideas.html">link to my ideas</a></p> <h1>My Rails App</h1> <p>It's running on rails now.</p> <p>it still has a <%= link_to "link to my ideas", ideas_path %></p>
  9. Links link_to "text", "url" link_to "all ideas", ideas_path create all

    internal URLs with *_path
  10. rake routes $ rake routes Prefix Verb URI Pattern Controller#Action

    root GET / pages#info ideas GET /ideas(.:format) ideas#index new_idea GET /ideas/new(.:format) ideas#new edit_idea GET /ideas/:id/edit(.:format) ideas#edit idea GET /ideas/:id(.:format) ideas#show see all the URLs and names of routes just add _path or _url to the prefix: root_path, ideas_path, new_idea_path, ... let Rails take care of URLs for you!
  11. Changes in CSS!

  12. Link to CSS with stylesheet_link_tag <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet"

    href="css/style.css"> <%= stylesheet_link_tag "application", media: "all" %> *= require_self *= require_tree .
  13. All my CSS files are magically assembled into one file!

    exceedingly clever way to enable caching
  14. The Asset Pipeline: Bigger Picture

  15. Use SASS .button_to, .button_to div, .button_to .btn { display: inline;

    } .button_to { &, div, .btn { display: inline; } }
  16. Use SCSS .button_to, .button_to div, .button_to.and_this_class{ display: inline; } .button_to

    &, div, &.and_this_class display: inline
  17. Summary split up your html-files  one layout in app/views/layouts/

     many views in app/views/  using ERB – embedded ruby inside <% %> Convert all links  use link_to  never write URLs, use path-helpers instead Move you CSS  to the asset pipline app/assets/stylesheets Convert you CSS  to SASS, SCSS or LESS Use all your knowledge of HTML Tags, CSS, ...  with tiny adjustments
  18. Learn more! Come to Salzburg  Barcamp on Web Development

    March 14+15 2014  Every Oct and March  mp-salzburg/  Summer University for Women in IT: Aug25-Sep9 2014  Call for Lectures out soon!  Weekend-Courses in March + May 
  19. Learn More! Come to Salzburg  BSc. Web Development 

    MSc. Web Development  Austrian Public University of Applied Science (FH)   Web Dev User group in Salzburg  once a month  Join us on
  20. Brigitte Jellinek @bjelline