Where did my HTML and CSS go?
Brigitte Jellinek
Railsgirls Munich Nov 30th 2013!
Slide 2
Slide 2 text
You thought
you knew about HTML and CSS
Slide 3
Slide 3 text
But now that you are using Rails:
where did the HTML and CSS go?
Slide 4
Slide 4 text
Changes in HTML
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
The Layout
(for all pages)
One View
(per page)
Cut up
HTML
Slide 7
Slide 7 text
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
it still has a !
<%= link_to "link to my ideas", ideas_path %>
!
Slide 9
Slide 9 text
Links
link_to "text", "url"
link_to "all ideas", ideas_path
create all internal URLs with *_path
Slide 10
Slide 10 text
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!
Slide 11
Slide 11 text
Changes in CSS!
Slide 12
Slide 12 text
Link to CSS with
stylesheet_link_tag
!
!
<%= stylesheet_link_tag "application", media: "all" %>!
*= require_self!
*= require_tree .!
Slide 13
Slide 13 text
All my CSS files are magically
assembled into one file! exceedingly
clever way
to enable
caching
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
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
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