Your SlideShare is downloading. ×
0
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
BILL Hour: Try something new! (like Sass or Compass)
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

BILL Hour: Try something new! (like Sass or Compass)

647

Published on

From Aaron Bushnell: You never know if you'll like something until you try it. That's why I recommend trying Sass for your CSS coding. Using the DRY method (Don't Repeat Yourself), Sass makes your …

From Aaron Bushnell: You never know if you'll like something until you try it. That's why I recommend trying Sass for your CSS coding. Using the DRY method (Don't Repeat Yourself), Sass makes your coding easy, quick, and beautiful.

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

  • Be the first to like this

No Downloads
Views
Total Views
647
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. The Ever-Expanding Interwebz or “why you need to try guacamole”
    • 2. The guacamole mystery
    • 3. The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff.
    • 4. The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day.
    • 5. The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital.
    • 6. The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital. • We stay ahead of the curve
    • 7. The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital. • We stay ahead of the curve • We could save time
    • 8. The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital. • We stay ahead of the curve • We could save time • Worst case scenario: method doesn’t work and we move on to something else
    • 9. The guacamole mystery • It wasn’t until I actually tried guacamole that I realized I loved the stuff. • The point is, the internet community introduces a new thing every week, maybe every day. • Trying new methods in our craft is vital. • We stay ahead of the curve • We could save time • Worst case scenario: method doesn’t work and we move on to something else • It’s just plain fun!
    • 10. What is Sass?
    • 11. What is Sass?It’s just plain ol’ CSS
    • 12. On ‘ROIDS!
    • 13. Seriously though. Sass...
    • 14. Seriously though. Sass... • Is an extension of CSS to utilize the DRY principle. (Don’t repeat yourself)
    • 15. Seriously though. Sass... • Is an extension of CSS to utilize the DRY principle. (Don’t repeat yourself) • Repeating yourself makes more work for you and makes the site load slower. That makes clients, users, and us sad.
    • 16. Seriously though. Sass... • Is an extension of CSS to utilize the DRY principle. (Don’t repeat yourself) • Repeating yourself makes more work for you and makes the site load slower. That makes clients, users, and us sad. • Is compiled on-the-fly through the command line or through a GUI application.
    • 17. Seriously though. Sass... • Is an extension of CSS to utilize the DRY principle. (Don’t repeat yourself) • Repeating yourself makes more work for you and makes the site load slower. That makes clients, users, and us sad. • Is compiled on-the-fly through the command line or through a GUI application. • Most importantly, has room for growth and allows us to make better websites much faster.
    • 18. Okay, cool. What’s different?
    • 19. Okay, cool. What’s different? • You don’t need to change anything you know about CSS. You can use the same syntax and be on your merry way.
    • 20. Okay, cool. What’s different? • You don’t need to change anything you know about CSS. You can use the same syntax and be on your merry way. • On-the-fly minification. Let the compiler do the work for you and minify your code.
    • 21. Okay, cool. What’s different? • You don’t need to change anything you know about CSS. You can use the same syntax and be on your merry way. • On-the-fly minification. Let the compiler do the work for you and minify your code. • The compiler has numerous configuration settings to make your CSS hotter than flapjacks.
    • 22. Okay, cool. What’s different? • You don’t need to change anything you know about CSS. You can use the same syntax and be on your merry way. • On-the-fly minification. Let the compiler do the work for you and minify your code. • The compiler has numerous configuration settings to make your CSS hotter than flapjacks. • New features like variables, nestings, mixins, selector inheritance, and color modification.
    • 23. Variables
    • 24. Variables Change it once and for all.$mainColor: #FF6600; h1 { color: #FF6600;h1 { }color: $mainColor;}
    • 25. Variables Change it once and for all.$mainColor: #FFCC00; h1 { color: #FFCC00;h1 { }color: $mainColor;}
    • 26. Variables
    • 27. Variables Mathematics, good sir!h1 { h1 {margin: (16px / 2); margin: 8px;width: (200px * 4); width: 800px;} }
    • 28. Variables
    • 29. Variables Combine you crazy developer, you!$wrapper: 960px; h1 { margin: 8px;h1 { width: 480px;margin: (16px / 2); }width: $wrapper / 2;}
    • 30. Nesting
    • 31. Nesting #stop .doing .this #stuff > .okay?.sidebar { .sidebar {width: 500px; width: 500px; h1 { } color: blue; .sidebar h1 { } color: blue;} }
    • 32. Nesting
    • 33. Nesting Don’t go overboard, though. Your styles should NOT be location dependent.
    • 34. Nesting Don’t go overboard, though. Your styles should NOT be location dependent. Use wisely and with intention.
    • 35. Mixins
    • 36. Mixins Recycle, reduce, and argue?@mixin rounded($radius) { .box {-moz-border-radius: $radius; -moz-border-radius: 10px;border-radius: $radius; border-radius: 10px;} }.box {@include rounded(10px);}
    • 37. Mixins Arguments are great to keep your CSS from repeating yourself.
    • 38. Selector Inheritance
    • 39. Selector Inheritance Inherit other properties without duplication.message { .message, .error {border-width: 1px; border-width: 1px;border-style: solid; border-style: solid;} }.error {@extend .message; .error {color: red; color: red;} }
    • 40. Colors
    • 41. Colors The prism meets the english teacherh1 { h1 {background: lighten(#CC0, 25%); background: #ffff4d;color: darken(#FFCC00, 10%); color: #cca300;} }h2 { h2 {background: desaturate(red, 15%); background: #ec1313;color: saturate(#855, 20%); color: #9e3f3f;} }
    • 42. Colors
    • 43. Colors Many, many more like:
    • 44. Colors Many, many more like: hue
    • 45. Colors Many, many more like: hue invert
    • 46. Colors Many, many more like: hue invert complement
    • 47. Colors Many, many more like: hue invert complement grayscale
    • 48. Colors Many, many more like: hue invert complement grayscale alpha
    • 49. Colors Many, many more like: hue invert complement grayscale alpha opacify?
    • 50. Colors Many, many more like: hue invert complement grayscale alpha opacify? transparentize?!
    • 51. Other Sass-y Things (Couldn’t help myself)
    • 52. Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled
    • 53. Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up.
    • 54. Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */
    • 55. Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */ • Round numbers up or down. Because why not?
    • 56. Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */ • Round numbers up or down. Because why not? • @imports that actually import the CSS without making another HTTP request.
    • 57. Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */ • Round numbers up or down. Because why not? • @imports that actually import the CSS without making another HTTP request. • This means you can create “partials”.
    • 58. Other Sass-y Things (Couldn’t help myself) • Sass commenting that isn’t compiled • // This won’t show up. • /* This will */ • Round numbers up or down. Because why not? • @imports that actually import the CSS without making another HTTP request. • This means you can create “partials”. • Numerous other features
    • 59. Great! How do we use this thing?
    • 60. Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways.
    • 61. Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways. • Command line. Not difficult, don’t be scared.
    • 62. Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways. • Command line. Not difficult, don’t be scared. • Menu bar application (Compass.app ~$7)
    • 63. Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways. • Command line. Not difficult, don’t be scared. • Menu bar application (Compass.app ~$7) • More setup, but greater payoff. Don’t let new things scare you.
    • 64. Great! How do we use this thing? • Your Sass sheets must be “watched” so they can be compiled so you can do this two ways. • Command line. Not difficult, don’t be scared. • Menu bar application (Compass.app ~$7) • More setup, but greater payoff. Don’t let new things scare you. • Caveat: Can’t have some of the team editing .css docs on a project while the rest of the team edits .scss/.sass files. It’s all or nothing
    • 65. When can we start using this?
    • 66. When can we start using this? Today, silly!
    • 67. When can we start using this? Today, silly! It just takes communication.
    • 68. What is Compass?
    • 69. What is Compass?An open-source CSS authoring framework!
    • 70. What is Compass?An open-source CSS authoring framework! (Sass with more features)
    • 71. Features of Compass
    • 72. Features of Compass • Sass targets CSS while Compass targets CSS/HTML workflow.
    • 73. Features of Compass • Sass targets CSS while Compass targets CSS/HTML workflow. • Compass makes repetitive bits of information easier to repeat.
    • 74. Features of Compass • Sass targets CSS while Compass targets CSS/HTML workflow. • Compass makes repetitive bits of information easier to repeat. • Makes writing CSS3 easier and less pain-staking.
    • 75. Quiz Time
    • 76. Quiz TimeHow many browser prefixes are there to create a linear background gradient?
    • 77. 4567
    • 78. 4567
    • 79. Using CSS3
    • 80. Using CSS3background: -moz-linear-gradient(top, #FFF 0%, #000 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#000));background: -webkit-linear-gradient(top, #FFF 0%,#000 100%);background: -o-linear-gradient(top, #FFF 0%,#000 100%);background: -ms-linear-gradient(top, #FFF 0%,#000 100%);background: linear-gradient(top, #FFF 0%,#000 100%);
    • 81. Using Compass
    • 82. Using Compass@import "compass";.box {@include background(linear-gradient(#FFF, #000));}
    • 83. background: -moz-linear-gradient(top, #FFF 0%, #000 100%);background: -webkit-gradient(linear, left top, left bottom,color-stop(0%,#FFF), color-stop(100%,#000));background: -webkit-linear-gradient(top, #FFF 0%,#000 100%);background: -o-linear-gradient(top, #FFF 0%,#000 100%);background: -ms-linear-gradient(top, #FFF 0%,#000 100%);background: linear-gradient(top, #FFF 0%,#000 100%);
    • 84. background: -moz-linear-gradient(top, #FFF 0%, #000 100%);background: -webkit-gradient(linear, left top, left bottom,color-stop(0%,#FFF), color-stop(100%,#000));background: -webkit-linear-gradient(top, #FFF 0%,#000 100%);background: -o-linear-gradient(top, #FFF 0%,#000 100%);background: -ms-linear-gradient(top, #FFF 0%,#000 100%);background: linear-gradient(top, #FFF 0%,#000 100%); ta-da!
    • 85. Border Radius with CSS3
    • 86. Border Radius with CSS3 -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;
    • 87. Using Compass
    • 88. Using Compass @import "compass"; .box { @include border-radius(10px); }
    • 89. -moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px;
    • 90. -moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px; ta-da!
    • 91. Other Compass Additions
    • 92. Other Compass Additions • @import “compass/reset” for Eric Meyer’s Reset
    • 93. Other Compass Additions • @import “compass/reset” for Eric Meyer’s Reset • Can take multiple images, combine them into a sprite, and give you classes and coordinates for each one. Insane.
    • 94. Other Compass Additions • @import “compass/reset” for Eric Meyer’s Reset • Can take multiple images, combine them into a sprite, and give you classes and coordinates for each one. Insane. • Much, much more
    • 95. We meet again, avocado
    • 96. We meet again, avocado • Technology is changing rapidly
    • 97. We meet again, avocado • Technology is changing rapidly • We don’t have to use every new thing that hits the scenes, but we should be trying new things out.
    • 98. We meet again, avocado • Technology is changing rapidly • We don’t have to use every new thing that hits the scenes, but we should be trying new things out. • If it tastes delicious works out, great! If not, hey, we gave it a shot and we learned something new anyway.
    • 99. We meet again, avocado • Technology is changing rapidly • We don’t have to use every new thing that hits the scenes, but we should be trying new things out. • If it tastes delicious works out, great! If not, hey, we gave it a shot and we learned something new anyway. • Try something new and make something happen.

    ×