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
ZKK_001.pdf
nicholaspegu
0
1.4k
Карта реализации историй — убийца USM
ashapiro
0
210
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
49k
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
300
Design System for training program
mct
0
280
1年目のクリエイターがつくりあげた！採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
190
Первая беседа о Карте реализации историй
ashapiro
0
290
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.9k
Arborea Art Book
thebogheart
1
290
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
200
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
330
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
510

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Building an army of robots
kneath
302
43k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Building Adaptive Systems
keathley
38
2.3k
Gamification - CAS2011
davidbonilla
80
5k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Bash Introduction
62gerente
608
210k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
A Philosophy of Restraint
colly
203
16k
Embracing the Ebb and Flow
colly
84
4.5k
Code Review Best Practice
trishagee
64
17k

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