Your SlideShare is downloading. ×
0
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty

651

Published on

Slides from my WebExpo presentation: http://webexpo.net/prague2013/talk/how-to-turn-your-ugly-old-css-into-clean-future-ready-beauty/ …

Slides from my WebExpo presentation: http://webexpo.net/prague2013/talk/how-to-turn-your-ugly-old-css-into-clean-future-ready-beauty/

I hope to add annotations soon.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
651
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. @ROBINPOKORNY BEAUTY Future-Ready into a Ugly Old How to Turn Your CSS Clean
  • 2. $ git clone git@ :
  • 3. Homepage http://localhost:9001/home
  • 4. Homepage http://localhost:9001/home Developer Tools base.css:9 float: right; background- color: ; <!DOCTYPE html>     <head>         <meta charset="utf-8">         <meta http-equiv="X-UA-Compatible" content="IE=edge">         <title>Homepage</title>         <meta name="description" content="Just another demo">         <meta name="viewport" content="width=device-width">         <link rel="stylesheet" href="css/normalize.css">         <link rel="stylesheet" href="css/base.css">     </head>     <body>         <h1>Hello, this is Robin’s demo site.</h1> <p>
  • 5. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0%
  • 6. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0%
  • 7. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0%
  • 8. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0%
  • 9. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0% About us http://localhost:9001/about-us Blog http://localhost:9001/blog Contacts http://localhost:9001/contacts
  • 10. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0% About us http://localhost:9001/about-us Blog http://localhost:9001/blog Contacts http://localhost:9001/contacts
  • 11. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0% About us http://localhost:9001/about-us Blog http://localhost:9001/blog Contacts http://localhost:9001/contacts
  • 12. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0% About us http://localhost:9001/about-us Blog http://localhost:9001/blog Contacts http://localhost:9001/contacts
  • 13. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0% About us http://localhost:9001/about-us Blog http://localhost:9001/blog Contacts http://localhost:9001/contacts
  • 14. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0% About us http://localhost:9001/about-us Blog http://localhost:9001/blog Contacts http://localhost:9001/contacts
  • 15. 2013
  • 16. 2005
  • 17. 1996
  • 18. You do not write CSS for yourself.
  • 19. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 index.html 1,1 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1.css 1,1 CSS 1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 2.css 1,1 CSS 2 1 2 3 4 5 6 7 8 9 10 11 12 13 14 3.css 1,1 CSS 3
  • 20. .intro div:nth-child(2) p:last-child
  • 21. .sidebar .wrapper .design nav
  • 22. paint out Cascade makes it a page. easy to
  • 23. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 index.html 1,1 CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1.css 1,1 HTML 1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 2.css 1,1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 3.css 1,1 HTML 2 HTML 3
  • 24. .sidebar .wrapper .design nav
  • 25. btn btn-primary btn-lg <div class=" … </div> ">
  • 26. CSS is a pattern book not a crayon set.
  • 27. OOCSS @stubbornella
  • 28. // Includes layout and typography @import url('layout.less'); @import url('article.less'); @import url('navigation.less'); @import url('buttons.less'); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.less 1,1 0% #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background- 1 2 3 4 5 6 7 8 9 10 11 12 13 14 base.css 1,1 #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background- 1 2 3 4 5 6 7 8 9 10 11 12 13 14 base.css 1,1 #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background- 1 2 3 4 5 6 7 8 9 10 11 12 13 14 base.css 1,1 #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background- 1 2 3 4 5 6 7 8 9 10 11 12 13 14 base.css 1,1
  • 29. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz NOW FUTURE CODEBASE
  • 30. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz NOW FUTURE CODEBASE
  • 31. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz NOW FUTURE CODEBASE abcdefghijklmnopqrstuvwxyz IN 1 MIN
  • 32. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz NOW FUTURE CODEBASE
  • 33. It is OK not to be perfect.
  • 34. Criticism good.is ~ @OliverJAsh
  • 35. $ exit User @robinpokorny <robin@medvedi.eu> is now logged out. Use utility hand to raise a question.

×