Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Railsgirls: Where did my HTML and CSS go

bjelli
November 30, 2013

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?

bjelli

November 30, 2013
Tweet

More Decks by bjelli

Other Decks in Design

Transcript

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

    View full-size slide

  2. You thought
    you knew about HTML and CSS

    View full-size slide

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

    View full-size slide

  4. Changes in HTML

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

  7. 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 full-size slide

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

    View full-size slide

  9. 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 full-size slide

  10. Changes in CSS!

    View full-size slide

  11. Link to CSS with
    stylesheet_link_tag


    <%= stylesheet_link_tag "application", media: "all" %>
    *= require_self
    *= require_tree .

    View full-size slide

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

    View full-size slide

  13. The Asset Pipeline: Bigger Picture

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

  19. Brigitte Jellinek
    http://brigitte-jellinek.at
    @bjelline
    [email protected]

    View full-size slide