The evolution of CSS - 2

Transcript

1. Mattia Larentis - @spiritualguru the evolution of css
2. a long time ago...
3. 1980s
4. Nerdz
5. CERN
6. Share documents
7. HTML HyperText Markup Language
8. tags!
9. paragraphs titles bulleted lists
11. people began to talk about STYLE
12. W3C World Wide Web Consortium
13. CSS Cascading Style Sheet
15. version 1.0
17. from 1998 to 2004
18. version 2.0
19. new Browsers
23. WIN
24. TODAY
25. version 3.0
26. New Features
27. Border Radius 2D Transforms Box Shadow RGBA Colors
28. but...
29. CSS SUCKS
30. Problems
31. vars
32. nesting
33. performance
34. is there a solution?
35. YES!
36. preprocessing
37. A system written in another language that adds lots of tasty goodies that don’t exists natively, while still spitting out something a browser can understand
38. {LESS} The dynamic stylesheet language.
39. Sass Syntactically Awesome StyleSheets
40. stylus Expressive, dynamic, robust CSS
42. ok... but... why?
43. it will make you CSS DRY
44. it will save your time
45. it will make your code easy to maintain
46. it will make your CSS more organized
47. it’s fun
48. talk is cheap, show me the code
49. START
50. <link rel="stylesheet/less" type="text/css" href="styles.less" />
51. <script src="less.js"></script>
52. IMPORT
53. @import "vars";
54. VARS
55. @border: 1px; @color: #111; @red: #842210;
56. .my-class { color: @color; border-left: @border; border-right: @border; }
57. .my-class { color: #111; border-left: 1px; border-right: 1px; }
58. OPERATIONS
59. .my-class { color: (@color + #030); border-right: (@border * 2); }
60. .my-class { color: #114411; border-right: 2px; }
61. MIXIN
62. .border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; }
63. .my-class { .border-radius(2px); } .another-class { .border-radius; }
64. .my-class { -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; }
65. .another-class { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
66. NESTING
67. .my-class { h1 { font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { color: @red; } } } }
68. .my-class h1 { font-weight: bold; } .my-class p { font-size: 12px; } .my-class p a { text-decoration: none; } .my-class p a:hover { color: #842210; }
69. Questions?!?
70. Mattia Larentis http://larentis.eu mattia@larentis.eu @spiritualguru github.com/nostalgiaz