RWD 一小時就上手

F8ca23da626499de4b476d7ccaf2950b?s=47 evenwu
August 03, 2013

RWD 一小時就上手

介紹一套 compass framework: SUSY 快速的在一小時內建構你的 responsive web design.

F8ca23da626499de4b476d7ccaf2950b?s=128

evenwu

August 03, 2013
Tweet

Transcript

  1. ʪ ௓ ዒ ௣ ʰ ဈ RWD SUSY responsive grid

    for compass. ṺЗ
  2. ࿠ወ × &WFO8Vڜ⼡ቒ × GCNFFWFOXV

  3. ͸٩ἇ ൘̨խḕ⋧⃷ ፕถ৛ኖ௣ወ SFTQPOTJWFEFTJHO

  4. XJLJQFEJBPSH

  5. XIJUFIPVTFHPW

  6. ZBIPPDPN

  7. ʪ ௓ ዒ ௣ ʰ ဈ RWD SUSY responsive grid

    for compass. Ṻḕ
  8. TVTZPEECJSEOFU

  9. TVTZወ̍㞬㡳 × TVTZዅʫ৺चትDPNQBTTḋ௻ḑSFTQPOTJWFHSJEGSBNFXPSL × ̍㞦㡬ٍዅʫ৺(SJE㡙

  10. ӱ̜HSJEGSBNFXPSLḕ⎟㟂 × ٣ⓗมGMVJE▎GJYFEXJEUI˅⽐ᇊ × 3FTQPOTJWF%FTHJOᩜ᝖̴༦⯘ּᘍͥ × ༮⨈ḑQBEMBZPVUNFEJVNHSJE٣ዅEFTLUPQHSJE⌾௑ᚚΜᬝ × 㕘㕰ḑIUNM

  11. TVTZHSJEGSBNFXPSL × ㋁ˮGMVJE▎GJYFEXJEUI⽜ፒNBHJD㡙 × 3FTQPOTJWF%FTHJO٨̴̨༦⯘ּᘍͥ㡙 × ࿼̨QBEMBZPVUNFEJVNHSJE٨̨㋱͸୷ჭ × ˨᠜ḑIUNM㡠਒ڑ㡤$44ፒ㞼௑㕰㡡

  12. અᕦTIPXDBTFዒ㉜

  13. None
  14. None
  15. None
  16. None
  17. X-large Large Medium small

  18. Ѹ⼓ᕿḕᐵ୑ ተဈᴣTVTZ٤⬏ʪ⼢

  19. None
  20. None
  21. None
  22. normal open menu

  23. mobile desktop

  24. Ѹ⼓ᕿḕᐵ୑ ᪯⌙␽ᴣTVTZ٤⬏ʪৢ

  25. սʱḕዒ㉜٩ႋΘ ሡㅣୗƟ⯞⊅ↄƟޔۢݨ

  26. ㌸᛭ × ፎ4BTT × ἃ$PNQBTT × ፎ⪑&YUFOTJPOT × ̨ʱ⾯ʴፎḑ⮣㡬 ╾௓ፎᴟGJSFBQQ

  27. ୹⪗TVTZ ⼝Ӧᙏ㐖

  28. $-*୹⪗ IUUQTVTZPEECJSEOFUHVJEFTHFUUJOHTUBSUFETUBSUJOTUBMM

  29. 'JSFBQQဈֽ୹⪗TVTZ ӰவGJSFBQQӧයTVTZݬ㡤٣ዅৡ░ˮơ

  30. × ʲ⹴⼍ל㡤⭂মፎԹ᱒ʫϪTVTZNBTUFS⳻ቛ৫ × IUUQTHJUIVCDPNFSJDBNTVTZBSDIJWFNBTUFS[JQ × SFOBNF⳻ቛ৫᨟TVTZ ˁʿՙ⼍Ϫ⳻ቛ৫ GJSFBQQဈֽ୹⪗TVTZ

  31. !JNQPSUTVTZ

  32. ࡷ⨲โဎ㏴⭺HSJE⭺஄ $total-­‐columns    :  4;          

                    $column-­‐width      :  60px;                         $gutter-­‐width      :  20px;   $grid-­‐padding      :  10px; $grid&padding $total&columns $column&width $gutter&width
  33. × ය⃯ፌ৖㍵ḑᐩ⌀஖ࠧӎ≸ $POUBJOFS஘ࠨ .page  {    @include  container; }

  34. × ൎ͸ံHSJEᵍԹΘܙ × ᝥ༦DISPNFCVH͚˙ፒᙔ㡤GJSFGPYፌ₪ %FCVHNPEF .page  {    @include  container;

       @include  susy-­‐grid-­‐background; }
  35. None
  36. .main .sidebar

  37. × Հឧᘍͥ 4QBO$PMVNOTՁឫᘐͥ .main  {  @include  span-­‐columns(9,  12);  } .sidebar

     {  @include  span-­‐columns(3  omega,  12);  } .main  {  @include  span-­‐columns(9  omega,  12);  } .sidebar  {  @include  span-­‐columns(3,  12);  } × ೹٬⯘ᄥᘍͥয়᝖
  38. None
  39. 3FTQPOTJWFHSJE๭㞬Х㡳 @include  at-­‐breakpoint($media-­‐layout)  {    .page  {  @include  container;  }

    }
  40. Ӕˮ⭈NFEJBMBZPVU

  41. NFEJBMBZPVUஷ㋯ʰፕ⼓㞬৛₋⽖ᇍ㡠 $media-­‐layout:  12;              

         //  Use  12-­‐col  layout  at  matching  min-­‐width. $media-­‐layout:  30em;                //  At  min  30em,  use  closest  fitting  layout. $media-­‐layout:  30em  12;          //  At  min  30em,  use  12-­‐col  layout. $media-­‐layout:  12  60em;          //  Use  12  cols  up  to  max  60em. $media-­‐layout:  30em  60em;      //  Between  min  30em  &  max  60em,  use  closest  layout. $media-­‐layout:  30em  12  60em;//  Use  12  cols  between  min  30em  &  max  60em. $media-­‐layout:  60em  12  30em;//  Same.  Larger  length  will  always  be  max-­‐width. $media-­‐layout  :  12  lt-­‐ie9;    //  Output  is  included  under  `.lt-­‐ie9`  class,                                                        //  for  use  with  IE  conditional  comments                                                        //  on  the  <html>  tag. മᴣ
  42. NFEJBMBZPVUʯৡമᴣ $media-­‐layout:  12; //  使⽤用  12  欄布局  (susy  ⾃自⼰己去計算  min-­‐width)

    $media-­‐layout:  30em; //  設定  min-­‐width  30em $media-­‐layout:  30em  12; //  設定  min-­‐width  30em,  並使⽤用  12  欄
  43. ӻˮ⭈"U#SFBLQPJOU @include  at-­‐breakpoint(30em  12)  {    .page  {  @include  container;

     } }
  44. ⯔ם⯔⾵٩̨Ɵ⾵ʪᕿ .page  {    @include  at-­‐breakpoint(30em  12)  {  @include  container;

     } } @include  at-­‐breakpoint(30em  12)  {    .page  {  @include  container;  } }
  45. TVTZ TBTTӻ⼣ת $pad:  768px  8; $desktop:  1000px  12; .page  {

     @include  container;  } @include  at-­‐breakpoint($pad)  {    .page  {  @include  set-­‐container-­‐width;  } } @include  at-­‐breakpoint($desktop)  {    .page  {  @include  set-­‐container-­‐width;  } } Ӕ္NFEJBMBZPVU ୘࿟ፕ༩⏳ḕێٽ㡠
  46. TVTZ TBTTӻ⼣ת $pad:  768px  8; $desktop:  1000px  12; .page  {

       @include  container;    @include  at-­‐breakpoint($pad)  {        @include  set-­‐container-­‐width;    }    @include  at-­‐breakpoint($desktop)  {        @include  set-­‐container-­‐width;    } } Ӕ္NFEJBMBZPVU ୘࿟ፕ༩⏳ḕێٽ㡠
  47. ৡ⊤ၵ $pad:  768px  8; $desktop:  1000px  12; .page  {  

     @include  container(  $total-­‐columns,  $pad,  $desktop  ); } $pad:  768px  8; $desktop:  1000px  12; .page  {    @include  container;    @include  at-­‐breakpoint($pad)  {        @include  set-­‐container-­‐width;    }    @include  at-­‐breakpoint($desktop)  {        @include  set-­‐container-­‐width;    } } ʱʫ㏡ḑ⯃᝖㡧 ٨⇄ש㡧
  48. None
  49. 6*ӏ̲ḕ⢫ᱝቶ් .button  {    //  ⼀一堆預設樣式    @include  at-­‐breakpoint($desktop)  {

           //  桌⾯面版本樣式    } }
  50. None
  51. ⽢ፕ㐈Ѹܚ .attendee  {    @include  isolate-­‐grid(1);    @include  at-­‐breakpoint($desktop)  {

           @include  isolate-­‐grid(2);    } } ဈᖧᬡ ͬϪᘐͥḕHBMMFSZMJTU ᐸ㍻ᬡ ͬϪᘐͥḕHBMMFSZMJTU
  52. None
  53. ٩̨ᴣTVTZ╽ХHSJE @for  $col  from  1  through  $total-­‐columns  {    .span#{$col}

     {        @include  span-­‐columns($col);    } }
  54. ࿤ХʪϪⳔ۰ᬟDTTGSBNFXPSL @for  $width  from  1  through  3  {    @for

     $height  from  1  through  3  {        .block-­‐#{$width}-­‐#{$height}  {            @include  span-­‐columns($width);            padding-­‐top:  columns($height);        }    } } .block  {    margin-­‐bottom:  gutter($context);    @include  nth-­‐omega; }
  55. None
  56. ʪ ௓ ዒ ௣ ʰ ဈ RWD SUSY responsive grid

    for compass. Ṻḕ
  57. 5 ) " / , 4    8

    & - $ 0 . & GCDPNHSPVQTTVTZUFNQMF TVTZἤ₳௄