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)

Cut up
HTML
One View
(per page)
Cut up and reassemble

I'm embedded
ruby and will
produce html

 /
 /app/views
 index.html
  pages/info.html.erb
 ide...
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...
Links

 link_to "text", "url"
 link_to "all ideas", ideas_path
 create all internal URLs with *_path
rake routes
$ rake routes!
Prefix Verb
root GET
ideas GET
new_idea GET
edit_idea GET
idea GET

URI Pattern
Controller#Acti...
Changes in CSS!
Link to CSS with
stylesheet_link_tag
<link rel="stylesheet" href="css/bootstrap.css">!
<link rel="stylesheet" href="css/st...
All my CSS files are magically
exceedingly
assembled into one file!
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: in...
Use SCSS
.button_to, .button_to div, .button_to.and_this_class{ !
display: inline;!
}!

.button_to!
&, div, &.and_this_cla...
Summary
 split up your html-files
  one layout in app/views/layouts/
  many views in app/views/
  using ERB – embedded ...
Learn more! Come to Salzburg

  Summer University "
for Women in IT: Aug25-Sep9 2014
  Call for Lectures out soon!
  We...
Learn More! Come to Salzburg

  Web Dev User group in
Salzburg

  BSc. Web Development

  once a month

  Austrian Pub...
Brigitte Jellinek

http://brigitte-jellinek.at
@bjelline
brigitte.jellinek@fh-salzburg.ac.at
Railsgirls: Where did my HTML and CSS go
Upcoming SlideShare
Loading in …5
×

Railsgirls: Where did my HTML and CSS go

2,143 views

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total views
2,143
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Railsgirls: Where did my HTML and CSS go

  1. 1. Where did my HTML and CSS go? Brigitte Jellinek Railsgirls Munich Nov 30th 2013!
  2. 2. You thought you knew about HTML and CSS
  3. 3. But now that you are using Rails: where did the HTML and CSS go?
  4. 4. Changes in HTML
  5. 5. The Layout (for all pages) Cut up HTML One View (per page)
  6. 6. Cut up and reassemble I'm embedded ruby and will produce html  /  /app/views  index.html  pages/info.html.erb  ideas.html  ideas/index.html.erb  layout/ application.html.erb
  7. 7. 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>!
  8. 8. Links  link_to "text", "url"  link_to "all ideas", ideas_path  create all internal URLs with *_path
  9. 9. rake routes $ rake routes! Prefix Verb root GET ideas GET new_idea GET edit_idea GET idea GET URI Pattern Controller#Action! / pages#info! /ideas(.:format) ideas#index! /ideas/new(.:format) ideas#new! /ideas/:id/edit(.:format) ideas#edit! /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!
  10. 10. Changes in CSS!
  11. 11. 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 .!
  12. 12. All my CSS files are magically exceedingly assembled into one file! clever way to enable caching
  13. 13. The Asset Pipeline: Bigger Picture
  14. 14. Use SASS .button_to, .button_to div, .button_to .btn { ! display: inline;! }! .button_to { ! &, div, .btn { ! display: inline;! }! }!
  15. 15. Use SCSS .button_to, .button_to div, .button_to.and_this_class{ ! display: inline;! }! .button_to! &, div, &.and_this_class! display: inline!
  16. 16. 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
  17. 17. Learn more! Come to Salzburg   Summer University " for Women in IT: Aug25-Sep9 2014   Call for Lectures out soon!   Weekend-Courses in March + May   http://ditact.ac.at   Barcamp on Web Development March 14+15 2014   Every Oct and March   http://lanyrd.com/series/ barcamp-salzburg/
  18. 18. Learn More! Come to Salzburg   Web Dev User group in Salzburg   BSc. Web Development   once a month   Austrian Public University " of Applied Science (FH)   Join us on http://meetup.com   MSc. Web Development   http://multimediatechnology.at
  19. 19. Brigitte Jellinek http://brigitte-jellinek.at @bjelline brigitte.jellinek@fh-salzburg.ac.at

×