Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Railsgirls: Where did my HTML and CSS go

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

More Decks by bjelli

Other Decks in Design


  1. 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>
  2. 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!
  3. 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 .
  4. All my CSS files are magically assembled into one file!

    exceedingly clever way to enable caching
  5. Use SASS .button_to, .button_to div, .button_to .btn { display: inline;

    } .button_to { &, div, .btn { display: inline; } }
  6. 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
  7. Learn more! Come to Salzburg  Barcamp on Web Development

    March 14+15 2014  Every Oct and March  http://lanyrd.com/series/barca mp-salzburg/  Summer University for Women in IT: Aug25-Sep9 2014  Call for Lectures out soon!  Weekend-Courses in March + May  http://ditact.ac.at
  8. Learn More! Come to Salzburg  BSc. Web Development 

    MSc. Web Development  Austrian Public University of Applied Science (FH)  http://multimediatechnology.at  Web Dev User group in Salzburg  once a month  Join us on http://meetup.com