Embed Size (px)
DESCRIPTION
So you converted you static website into a rails app. Where can you find your HTML and CSS now?
Citation preview
Where did my HTML and CSS go? Brigitte Jellinek Railsgirls Munich Nov 30th 2013 !
You thought you knew about HTML and CSS
But now that you are using Rails: where did the HTML and CSS go?
Changes in HTML
The Layout (for all pages)
One View (per page)
Cut up HTML
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
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> !
Links
link_to "text", "url" link_to "all ideas", ideas_path create all internal URLs with *_path
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!
Changes in CSS!
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 . !
All my CSS files are magically assembled into one file! exceedingly
clever way to enable caching
The Asset Pipeline: Bigger Picture
Use SASS .button_to, .button_to div, .button_to .btn { !
display: inline; !
} !
.button_to { !
&, div, .btn { !
display: inline; !
} !
} !
Use SCSS .button_to, .button_to div, .button_to.and_this_class{ !
display: inline; !
} !
.button_to!
&, div, &.and_this_class!
display: inline!
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
Learn more! Come to Salzburg
Barcamp on Web Development March 14+15 2014
Every Oct and March
http://lanyrd.com/series/barcamp-salzburg/
Summer University "for Women in IT: Aug25-Sep9 2014
Call for Lectures out soon!
Weekend-Courses in March + May
http://ditact.ac.at
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
