Creating Sexy Stylesheets

Slideshow Transcript

1. Slide 1: Creating Sexy Stylesheets Jina Bolton
2. Slide 2: Sexy?
3. Slide 3: Write it clean. Keep it clean.
4. Slide 4: Clarity is beautiful.
5. Slide 5: Comments are your friend.
6. Slide 6: /* Company Name Typography CSS Author Jina Bolton Version v1.0 | 2008-09-25 .................................... */
7. Slide 7: /* COLORS Background 222 Text fff Links c99 Visited Links 966 Hovered Links fcc Headers 9cc Sub-headers 699 .................................... */
8. Slide 8: /* =RESET .................................... */ /* =TYPOGRAPHY .................................... */ /* =STRUCTURE .................................... */ See: http://stopdesign.com/log/2005/05/03/css-tip-flags.html
9. Slide 9: /* STYLESHEET SECTIONS CSS Flags marked with [=] RESET GLOBAL TYPOGRAPHY STRUCTURE FORMS TABLES WIDGETS .................................... */
10. Slide 10: profile.css #profile { width: 600px; /* redefined: IE-6.css, line 25 */ } IE-6.css #profile { width: 620px; /* override: profile.css, line 270 */ }
11. Slide 11: Be organised.
12. Slide 12: @import 'reset.css'; @import 'structure.css'; @import 'typography.css'; @import 'widgets.css';
13. Slide 13: Readability vs. optimisation
14. Slide 14: CSS 3
15. Slide 15: “CSS 3 A giant serving of FAIL ” Alex Russell
16. Slide 16: “CSS 3 (Third time lucky)” —Andy Clarke
17. Slide 17: CSS 1 1996
18. Slide 18: CSS 2 1997
19. Slide 19: CSS 2.1 Candidate Recommendation
20. Slide 20: CSS 3
21. Slide 21: CSS 3 Modules ๏ Sele#ors ๏ Backgrounds & Borders ๏ Multi-column Layout ๏ Advanced Layout ๏ Grid Positioning ๏ Media Queries
22. Slide 22: Backgrounds & Borders Style any box’s borders and background including attaching multiple background-images to a single element.
23. Slide 23: Backgrounds & Borders Style any box’s borders and background including attach multiple background-images to a single element.
24. Slide 24: Backgrounds & Borders <div class=\"vcard\"> <div class=\"addr-bl\"> <div class=\"addr-tr\"> … Style any box’s borders and </div> background including attach multiple </div> </div> background-images to a single element.
25. Slide 25: .vcard { background: #000 Backgrounds } url(a-grad.gif) repeat-x; & Borders .addr-bl { background: url(a-bl.gif) 100% 0 Style any box’s borders and no-repeat; background including attach multiple } background-images to a single .addr-tr { element. background: url(a-tr.gif) 100% 0 no-repeat; }
26. Slide 26: Backgrounds & Borders <div class=\"vcard\">…</div> Style any box’s borders and background including attach multiple background-images to a single element.
27. Slide 27: .vcard { background-color: #000; Backgrounds background-image: url(a-grad.gif), url(a-bl.gif), & Borders url(a-tr.gif); background-repeat: repeat-x, Style any box’s borders and no-repeat, background including attach multiple no-repeat; background-images to a single element. background-position: 0 0, 100% 0, 0 100%; }
28. Slide 28: Backgrounds & Borders Style any box’s borders and background including attach multiple background-images to a single element.
29. Slide 35: <div class=\"vcard\">…</div> .vcard { border-image: url(\"border.png\") 30 30 30 30 stretch; border: double green 1em; }
30. Slide 36: Multi-column Layout Making it simpler to create column layouts without additional markup by using column widths, counts, gaps and rules.
31. Slide 39: <div class=\"entry-content\"> <div class=\"col first\"> … </div> <div class=\"col\"> … </div> </div>
32. Slide 40: .entry-content .col { float: left; width: 467px; margin-left: 30px; } .entry-content .first { margin-left: 0; } /* .entry-content clear-fix rules */
33. Slide 41: <div class=\"entry-content\"> … </div> .entry-content { column-count: 2; column-gap: 30px; }
34. Slide 43: <div class=\"entry-content\"> … </div> .entry-content { column-width: 270px; column-gap: 30px; }
35. Slide 44: Grid Positioning Gives the ability to add invisible grid rules to create grid layouts (like in books and newspapers), and uses sizing and new float properties for placing content.
36. Slide 47: <div class=\"entry-content\"> … </div> .entry-content { column-count: 4; column-gap: 30px; }
37. Slide 49: .entry-content { grid-columns: (30px * *)[4]; column-count: 4; column-gap: 30px; }
38. Slide 51: .entry-content { grid-columns: (30px * *)[4]; grid-rows: 9em 33.3% *; column-count: 4; column-gap: 30px; }
39. Slide 53: <div class=\"entry-content\"> … <img src=\"sushi.jpg\" class=\"photo\" alt=\"\" /> … </div>
40. Slide 54: .entry-content img.photo { ich float: page bottom left; float-offset: 4gr 1gr; }
41. Slide 56: <div class=\"entry-content\"> <h2>What is Sushi?</h2> … <img src=\"sushi.jpg\" class=\"photo\" alt=\"\" /> </div>
42. Slide 57: .entry-content h2 { float: page top left; width: 6gr; height: 1gr; margin-left: -30px; ich } .entry-content img.photo { float: page bottom left; float-offset: 4gr 1gr; }
43. Slide 58: Advanced Layout Aims to fully separate visual layout order from a document’s content by defining “slots” in a grid in which content can flow or be placed, or that remain empty — all without additional markup.
44. Slide 60: a b c d e f g h i j k l
45. Slide 61: a a c d e e g g i j k l
46. Slide 64: @ @ . . e @ @ h . j j @
47. Slide 65: Sele#ors Refined sele#ors to target an element based on an attribute or position in the document flow plus new pseudo-classes and pseudo-elements.
48. Slide 66: Selectors :nth-child(N) :nth-last-child(N) :nth-of-type(N) :nth-last-of-type(N) :last-child :first-of-type :last-of-type :only-child :only-of-type :root :empty :target :enabled :disabled :checked :not(S)
49. Slide 67: :nth-child(N) matches elements on the basis of their positions within a parent element’s list of child elements (from beginning to end)
50. Slide 70: <tr class=\"alt\"></tr> <tr></tr> tr.alt td { background: #ecffd9; }
51. Slide 71: <tr></tr> tr:nth-child(odd) td { background: #ecffd9; }
52. Slide 73: <tr class=\"high-rank\">…</tr> <tr class=\"high-rank\">…</tr> <tr class=\"high-rank\">…</tr> <tr>…</tr> tr.high-rank td { background: #ecffd9; }
53. Slide 74: <tr>…</tr> tr:nth-child(-n+3) td { background: #ecffd9; }
54. Slide 75: :nth-last-child(N) matches elements on the basis of their positions within a parent element’s list of child elements (from end to beginning)
55. Slide 77: <tr>…</tr> <tr class=\"low-rank\">…</tr> <tr class=\"low-rank\">…</tr> <tr class=\"low-rank\">…</tr> tr.low-rank td { opacity: .75; }
56. Slide 78: <tr>…</tr> tr:nth-last-child(-n+2) td { opacity: .75; }
57. Slide 79: :nth-of-type(N) matches elements on the basis of their positions within a parent element’s list of child elements of the same type
58. Slide 82: <p class=\"intro\">…</p> <p>…</p> p.intro { background: #fafcf5; font-size: 1.3em; color: #060; }
59. Slide 83: <p>…</p> p:first-of-type { background: #fafcf5; font-size: 1.3em; color: #030; }
60. Slide 84: Resources
61. Slide 85: Resources ๏ A List Apart http://alistapart.com ๏ SitePoint CSS Reference http://reference.sitepoint.com/css ๏ CSS3.info http://css3.info ๏ CSS Crib Sheet http://mezzoblue.com/css/cribsheet/
62. Slide 86: The Art & Science of CSS by Cameron Adams Jina Bolton David Johnson Steve Smith Jonathan Snook
63. Slide 87: Thank you! Jina Bolton sushiandrobots.com