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
250

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
170
7 in 7
designorlando
2
230
Design Discussion with Justin Mezzell
designorlando
1
270

Other Decks in Design

See All in Design
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.3k
ウェブディレクターを救うBacklog
wattlaa
0
280
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
180
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
22
7.7k
UIをもたらすコンテクストの考察
securecat
9
2.5k
Jeremy's First Day
myates3
1
130
Sociotechnical design for software and human systems
xinyao
2
480
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
710
実務のための マイクロ インタラクション入門
shingo2000
0
350
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
620
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
Design Leadership in Challenging Times
morganepeng
3
300

Featured

See All Featured
Thoughts on Productivity
jonyablonski
57
3.8k
Docker and Python
trallard
33
2.7k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Designing with Data
zakiwarfel
95
4.8k
Web Components: a chance to create the future
zenorocha
305
41k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Done Done
chrislema
178
15k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Bash Introduction
62gerente
604
210k
BBQ
matthewcrist
80
8.7k
GraphQLとの向き合い方2022年版
quramy
31
12k

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