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?

Transcript

1. Where did my HTML and CSS go?
   Brigitte Jellinek
   Railsgirls Munich Nov 30th 2013
   

   View Slide

2. You thought
   you knew about HTML and CSS
   

   View Slide

3. But now that you are using Rails:
   where did the HTML and CSS go?
   

   View Slide

4. Changes in HTML
   

   View Slide

5. View Slide

6. The
   Layout
   (for all pages)
   One View
   (per page)
   Cut up
   HTML
   

   View Slide

7. 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
   

   View Slide

8. Write all Links with link_to
   My Static Webpage
   it's full off important Tags!
   also, it has a
   link to my ideas
   My Rails App
   It's running on rails now.
   it still has a
   <%= link_to "link to my ideas", ideas_path %>
   

   View Slide

9. Links
   link_to "text", "url"
   link_to "all ideas", ideas_path
   create all internal URLs with *_path
   

   View Slide

10. 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!
    

    View Slide

11. Changes in CSS!
    

    View Slide

12. Link to CSS with
    stylesheet_link_tag
    
    
    <%= stylesheet_link_tag "application", media: "all" %>
    *= require_self
    *= require_tree .
    

    View Slide

13. All my CSS files are magically
    assembled into one file! exceedingly
    clever way
    to enable
    caching
    

    View Slide

14. The Asset Pipeline: Bigger Picture
    

    View Slide

15. Use SASS
    .button_to, .button_to div, .button_to .btn {
    display: inline;
    }
    .button_to {
    &, div, .btn {
    display: inline;
    }
    }
    

    View Slide

16. Use SCSS
    .button_to, .button_to div, .button_to.and_this_class{
    display: inline;
    }
    .button_to
    &, div, &.and_this_class
    display: inline
    

    View Slide

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
    

    View Slide

18. 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
    

    View Slide

19. 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
    

    View Slide

20. Brigitte Jellinek
    http://brigitte-jellinek.at
    @bjelline
    brigitte.jellinek@fh-salzburg.ac.at
    

    View Slide