Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bridging Design Gaps with Sass + Compass

Design Orlando
October 09, 2012
Design
7
260

Bridging Design Gaps with Sass + Compass

Nick Walsh discussing the last ten percent of projects and how to use Sass and Compass to aid design.

Design Orlando

October 09, 2012
Tweet

More Decks by Design Orlando

See All by Design Orlando
Craftsmanship
designorlando
1
180
7 in 7
designorlando
2
230
Design Discussion with Justin Mezzell
designorlando
1
270

Other Decks in Design

See All in Design
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4k
東急URBAN HACKSのデザイナーって何やってるの？ 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
200
世界中のチームワークを どうデザインしているのか
ka3zu1ma10
0
230
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
450
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1k
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
210
【Designship 2024｜10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
680
太田博三(@usagisan2020)
otanet
0
200
最速[要出典]アクセシビリティチェック
magi1125
2
130
202409_会社概要資料_Englishver.pdf
zakkerooni
0
210
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
170
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
56k

Featured

See All Featured
Producing Creativity
orderedlist
PRO
341
39k
Site-Speed That Sticks
csswizardry
2
190
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Making the Leap to Tech Lead
cromwellryan
133
9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
A Tale of Four Properties
chriscoyier
157
23k
How to Ace a Technical Interview
jacobian
276
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k

Transcript

  1. None

  2. thanks

  3. design g_ps

  4. None

  5. variables nesting mixins extends

  6. $header: #333; h1 { color: $header; }

  7. aside { float: right; p { font-size: 1.2em; } }

  8. @mixin border($color) { border: 1px solid $color; } aside {

    @include border(black); }

  9. @mixin border($color) { border: 1px solid $color; } aside {

    @include border(black); }

  10. @mixin border($color) { border: 1px solid $color; } aside {

    @include border(black); }
  11. None

  12. codekit fire.app scout

  13. final 10% - deciding in the browser

  14. a different sort of less effort

  15. eyedropper responsive + ie sprite editing vertical rhythm

  16. color 16 / 84

  17. predictable + repeatable

  18. $color-link: #47b4d0; a { color: $color-link; }

  19. None

  20. red() green() blue() mix() hue() saturation() lightness() adjust-hue() lighten() darken()

    saturate() desaturate() grayscale() complement() invert()

  21. red() green() blue() mix() hue() saturation() lightness() adjust-hue() lighten() darken()

    saturate() desaturate() grayscale() complement() invert()

  22. a { color: $color-link; &:hover, &:focus { color: lighten($color-link, 20%);

    } &:active { color: darken($color-link, 20%); } }

  23. a { color: $color-link; &:hover, &:focus { color: lighten($color-link, 20%);

    } &:active { color: darken($color-link, 20%); } }

  24. a { color: $color-link; &:hover, &:focus { color: lighten($color-link, 20%);

    } &:active { color: darken($color-link, 20%); } }
  25. None

  26. $color-link: #47b4d0; a { color: $color-link; color: rgba(71,180,208,0.8); }

  27. $color-link: #47b4d0; a { color: $color-link; color: rgba($color-link,0.8); }

  28. insta-cascade

  29. responsive 29 / 84

  30. aside { background: #333; } @media (min-width: 700px) { aside

    { float: right; width: 30%; } }

  31. aside { background: #333; @media (min-width: 700px) { float: right;

    width: 30%; } }

  32. @mixin respond-to($x) { @media (min-width: $x) { @content; } }

    aside { background: #333; @include respond-to(700px) { float: right; width: 30%; } }

  33. @mixin respond-to($x) { @media (min-width: $x) { @content; } }

    aside { background: #333; @include respond-to(700px) { float: right; width: 30%; } }

  34. @mixin respond-to($x) { @media (min-width: $x) { @content; } }

    aside { background: #333; @include respond-to(700px) { float: right; width: 30%; } }

  35. ie < 9

  36. recreate functionality duplicate code

  37. <!DOCTYPE html> <!--[if lte IE 8]> <html class="ie"> <![endif]--> <!--[if

    gt IE 8]><!--> <html> <!--<![endif]-->

  38. aside { background: #333; @include respond-to(700px) { float: right; width:

    30%; } .ie & { float: right; width: 30%; } }

  39. maintenance + collaboration

  40. @mixin respond-to($x) { @media (min-width: $x) { @content; } .ie

    & { @content; } }

  41. efficiency?

  42. compass 42 / 84

  43. reusable patterns

  44. .box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

  45. @import "compass"; .box { @include box-sizing(border-box); }

  46. sprites 46 / 84

  47. None
  48. None

  49. icons/search.png icons/search-active.png

  50. $icons: sprite-map("icons/*.png");

  51. icons-s3bf80e8870.png

  52. $icons: sprite-map("icons/*.png"); i { background: $icons; display: block; text-indent: -9999px;

    }

  53. .icn-search { @include sprite-dimensions($icons, search); background-position: sprite-position($icons, search); &:hover {

    background-position: sprite-position($icons, search-active); } }

  54. .icn-search { @include sprite-dimensions($icons, search); background-position: sprite-position($icons, search); &:hover {

    background-position: sprite-position($icons, search-active); } }

  55. .icn-search { @include sprite-dimensions($icons, search); background-position: sprite-position($icons, search); &:hover {

    background-position: sprite-position($icons, search-active); } }

  56. .icn-search { @include sprite-dimensions($icons, search); background-position: sprite-position($icons, search); &:hover {

    background-position: sprite-position($icons, search-active); } }

  57. <i class="icn-search">Search</i>

  58. None
  59. None

  60. retina?

  61. icons-hd/search.png icons-hd/search-active.png

  62. $icons: sprite-map("icons/*.png"); $icons-hd: sprite-map("icons-hd/*.png");

  63. i { background: $icons; display: block; text-indent: -9999px; @media (-webkit-min-device-pixel-ratio:

    1.5) { @include background-size(100px 200px); background: $icons-hd; } }

  64. i { background: $icons; display: block; text-indent: -9999px; @media (-webkit-min-device-pixel-ratio:

    1.5) { @include background-size(100px 200px); background: $icons-hd; } }

  65. i { background: $icons; display: block; text-indent: -9999px; @media (-webkit-min-device-pixel-ratio:

    1.5) { @include background-size(100px 200px); background: $icons-hd; } }

  66. i { background: $icons; display: block; text-indent: -9999px; @media (-webkit-min-device-pixel-ratio:

    1.5) { @include background-size(100px 200px); background: $icons-hd; } }

  67. .icn-search { @include sprite-dimensions($icons, search); background-position: sprite-position($icons, search); &:hover {

    background-position: sprite-position($icons, search-active); } }

  68. .icn-search { ... @media (-webkit-min-device-pixel-ratio: 1.5) { background-position: sprite-position($icons-hd, search);

    &:hover { background-position: sprite-position($icons-hd, search-active) } } }

  69. vertical rhythm 69 / 84

  70. None
  71. None
  72. None

  73. $base-font-size: 16px; $base-line-height: 24px; @include establish-baseline;

  74. None

  75. h1 { @include adjust-font-size-to(50px); } h2 { @include adjust-font-size-to(28px); }

    blockquote { @include adjust-font-size-to(20px); background: #ccc; }
  76. None

  77. blockquote { @include adjust-font-size-to(20px); @include adjust-leading-to(2); background: #ccc; text-align: center;

    }
  78. None

  79. p { @include leader(1); @include trailer(1); } h1 { @include

    adjust-font-size-to(50px); @include leader(1, 50px); @include trailer(1, 50px); }
  80. None

  81. h1 { ... @include trailing-border(10px, 1, 50px); }

  82. None

  83. not limited to text

  84. thanks!

  85. @nickawalsh