How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
Report
Share
•0 likes•1,752 views
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
•0 likes•1,752 views
Report
Share
Download to read offline
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.
More Related Content
What's hot
What's hot(6)
More from Robin Pokorny
More from Robin Pokorny(13)
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
- 1. @ROBINPOKORNY BEAUTY Future-Ready into a Ugly Old How to Turn Your CSS Clean
- 2. $ git clone git@ :
- 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
- 20. You do not write CSS for yourself.
- 25. 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
- 27. .sidebar .wrapper .design nav
- 28. paint out Cascade makes it a page. easy to
- 35. 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
- 36. .sidebar .wrapper .design nav
- 37. btn btn-primary btn-lg <div class=" … </div> ">
- 38. CSS is a pattern book not a crayon set.
- 40. // 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
- 45. It is OK not to be perfect.
- 47. $ exit User @robinpokorny <robin@medvedi.eu> is now logged out. Use utility hand to raise a question.