styler

24
Patrick Crowley the.railsi.st

Upload: patrick-crowley

Post on 16-May-2015

1.404 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Styler

Patrick Crowleythe.railsi.st

Page 2: Styler

Styler<%= stylesheets %>

Page 3: Styler

DRY up stylesheet configuration

Page 4: Styler

<head><title>Fruit stand</title><%= stylesheet_link_tag "application" %></head>

Page 5: Styler

<head><title>Fruit stand</title><%= stylesheet_link_tag "application" %><%= stylesheet_link_tag "apples" %></head>

Page 6: Styler

<head><title>Fruit stand</title><%= stylesheet_link_tag "application" %><%= stylesheet_link_tag "apples" %><%= stylesheet_link_tag "bananas" %></head>

Page 7: Styler

<head><title>Fruit stand</title><%= stylesheet_link_tag "application" %><%= stylesheet_link_tag "apples" %><%= stylesheet_link_tag "bananas" %><%= stylesheet_link_tag "cherries" %></head>

Page 8: Styler

<head><title>Fruit stand</title><%= stylesheet_link_tag "application" %><%= stylesheet_link_tag "apples" %><%= stylesheet_link_tag "bananas" %><%= stylesheet_link_tag "cherries" %><!--[if IE 7]><%= stylesheet_link_tag "ie7" %><![endif]--></head>

Page 9: Styler

<head><title>Fruit stand</title><%= stylesheet_link_tag "application" %><%= stylesheet_link_tag "apples" %><%= stylesheet_link_tag "bananas" %><%= stylesheet_link_tag "cherries" %><!--[if IE 7]><%= stylesheet_link_tag "ie7" %><![endif]--><!--[if IE 6]><%= stylesheet_link_tag "ie6" %><![endif]--></head>

Page 10: Styler

<head><title>My website</title><%= stylesheet_link_tag "application" %><% ["apples", "bananas", "cherries"].each do |s| if controller.controller_name == s stylesheet_link_tag s end%><!--[if IE 7]><%= stylesheet_link_tag "ie7" %><![endif]--><!--[if IE 6]><%= stylesheet_link_tag "ie6" %><![endif]--></head>

Page 11: Styler

Let’s DRY it up!

Page 12: Styler

<head><title>My website</title><%= stylesheet_link_tag "application" %><% ["apples", "bananas", "cherries"].each do |s| if controller.controller_name == s stylesheet_link_tag s end%><!--[if IE 7]><%= stylesheet_link_tag "ie7" %><![endif]--><!--[if IE 6]><%= stylesheet_link_tag "ie6" %><![endif]--></head>

Page 13: Styler

<head><title>My website</title><%= stylesheets %></head>

Page 14: Styler

Use Rails naming conventions for css

Page 15: Styler

application.csscontroller.css

controller_action.css

Page 16: Styler

ie7.cssie6.css

(conditionally)

Page 17: Styler

Need more?

Page 18: Styler

<head><title>My website</title><%= stylesheets :include => "reset" %></head>

Page 19: Styler

<head><title>My website</title><%= stylesheets :include => ["reset", "fonts"] %></head>

Page 20: Styler

Generator

Page 21: Styler

script/generate stylesheets

Page 23: Styler

The End

Page 24: Styler