CSS and Other Cool Stuff

Taking a look at becoming a better Front-End Designer with the power of Modular CSS and CSS Preprocessors. Bringing in UI Design Principles to drive the point home that, at heart, we are all designers.

Transcript

1. Ricardo Vazquez, UI/UX Designer @iamrvazquez
2. I love art, I love code, I love coding art™
3. design
4. design matters
5. design matters LOT a
6. TheGreat discontent
7. Design must be useful, aesthetic, discrete, lasting, useful. Most importantly, good design must be as little as possible.
8. WeARE DESIGNERS
9. WhO Code...
10. style.css
11. global.css
12. bits.css typography.css layout.css footer.css ui.css modules.css
13. S e p a r a t e your CSS, or I’m coming after you.
14. bits.css typography.css layout.css footer.css ui.css modules.css global.css
15. @import ‘bits.css’ @import ‘ui.css’ @import ‘typography.css’
16. Wishful Thinking
17. Sass Me up
18. OMFG WTH IS SASS?
19. NBD.
20. Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.
21. A computer program that modifies data to conform with the input requirements of another program.
22. SASS
23. SASS CSS
24. CSS MAGIC SASS
25. SASS + CSS = MAGIC
26. THe OTHERS
30. I used to Drink the hard stuff
31. Let’s get Started
32. Variables
33. $siteBg = #B9C1C7 $labelBg = #02ADEA $moduleClr = #AEAFB0
34. span display: inline-block background: $labelBg margin: 5px 5px 0 0
35. NESTING
36. .photo-details display: none &.active display: block h4 color: $blue font-size: 14px font-family: $helvetica font-weight: bold text-transform: uppercase .select width: 236px
37. .photo-details.active h4 .select width: 236px
38. Don’t. Repeat. YOURSELF.
39. BE A Designer
40. MIXxxINS
41. @mixin underline-on-hover( ) text-decoration: none &:hover text-decoration: underline
42. =underline-on-hover( ) text-decoration: none &:hover text-decoration: underline
43. a:link color: $active background: $buttonBg padding: 5px 10px +underline-on-hover
44. String Interpolation in CSS?
45. HELL YES
46. =vendorize($property, $value) -webkit-#{$property}: $value -moz-#{$property}: $value -ms-#{$property}: $value -o-#{$property}: $value #{$property}: $value
47. +vendorize(appearance, none)
48. +vendorize(appearance, none) +vendorize(box-sizing, border-box)
49. +vendorize(appearance, none) +vendorize(box-sizing, border-box) +vendorize(animation-play-state, paused)
50. v =group( ) &:before, &:after content: "\0020" display: block height: 0 overflow: hidden &:after clear: both
51. v EXtending
52. .sidebar-box margin: 0 0 10px 0 background: $bg padding: 10px .sidebar-auth-box @extend .sidebar-box input[type=text] padding: 10px border: 1px solid #ccc
53. Simple, right?
54. Still, we shouldn’t be spending our time writing mixins and extending all over the place. There’s gotta be something better.
55. COMPASS i’m lost... get me a
57. Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.
58. @import "compass/css3/border-radius" @import "compass/css3/transition" @import "compass/css3/opacity" @import "compass/css3/box-shadow" @import "compass/css3/text-shadow"
59. +single-box-shadow (rgba(0,0,0,0.3),0px,1px,3px,false,true)
60. ADMIT I Must
61. on UI A WORD and UX
62. Our vision is optimized to see structure Know your user State visualization Focus Help User testing Aesthetics
63. And LOGIC Emotion
64. Envision your users, and design logically; it will yield emotion if you let it breathe.
65. CSS is Modular
66. CSS is scalable
67. CSS is design
68. CSS is code
69. CSS is smart
70. CSS is not alone
71. READ!
72. CREATE!
73. SHARE!
74. Make OUR Community Better
75. CULL & Surrender
76. @iamrvazquez rvazquez.ca THANK YOU