Railsgirls: Where did my HTML and CSS go
•
0 likes•2,309 views
- The HTML and CSS used for a static website is split up and reorganized when using Ruby on Rails. The layout is defined in one file and rendered across all pages, while individual views contain embedded Ruby and generate the HTML. - All links are generated using link_to helpers instead of hardcoding URLs. CSS is linked to via stylesheet_link_tag and the asset pipeline combines all CSS into one file for efficient caching. - CSS preprocessors like SASS and SCSS can be used to write more powerful CSS rules. The document encourages learning more about web development by attending local meetups and courses in Salzburg.
Report
Share
Railsgirls: Where did my HTML and CSS go
- 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?
- 6. The Layout (for all pages) Cut up HTML One View (per page)
- 7. 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
- 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 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!
- 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 exceedingly assembled into one file! 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 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/
- 19. 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