$30 off During Our Annual Pro Sale. View Details »

RWD 一小時就上手

evenwu
August 03, 2013

RWD 一小時就上手

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

evenwu

August 03, 2013
Tweet

More Decks by evenwu

Other Decks in Technology

Transcript

  1. ʪ ௓ ዒ ௣ ʰ ဈ
    RWD
    SUSY responsive grid for compass.
    ṺЗ

    View Slide

  2. ࿠ወ
    × &WFO8Vڜ⼡ቒ
    × GCNFFWFOXV

    View Slide

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

    View Slide

  4. XJLJQFEJBPSH

    View Slide

  5. XIJUFIPVTFHPW

    View Slide

  6. ZBIPPDPN

    View Slide

  7. ʪ ௓ ዒ ௣ ʰ ဈ
    RWD
    SUSY responsive grid for compass.
    Ṻḕ

    View Slide

  8. TVTZPEECJSEOFU

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. અᕦTIPXDBTFዒ㉜

    View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. X-large Large Medium small

    View Slide

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

    View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. normal open menu

    View Slide

  23. mobile desktop

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. ୹⪗TVTZ
    ⼝Ӧᙏ㐖

    View Slide

  28. $-*୹⪗
    IUUQTVTZPEECJSEOFUHVJEFTHFUUJOHTUBSUFETUBSUJOTUBMM

    View Slide

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

    View Slide

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

    View Slide

  31. !JNQPSUTVTZ

    View Slide

  32. ࡷ⨲โဎ㏴⭺HSJE⭺஄
    $total-­‐columns    :  4;          
     
     
     
     
     
     
     
     
    $column-­‐width      :  60px;    
     
     
     
     
     
     
     
     
     
     
    $gutter-­‐width      :  20px;  
    $grid-­‐padding      :  10px;
    $grid&padding
    $total&columns
    $column&width
    $gutter&width

    View Slide

  33. × ය⃯ፌ৖㍵ḑᐩ⌀஖ࠧӎ≸
    $POUBJOFS஘ࠨ
    .page  {
       @include  container;
    }

    View Slide

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

    View Slide

  35. View Slide

  36. .main .sidebar

    View Slide

  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);  }
    × ೹٬⯘ᄥᘍͥয়᝖

    View Slide

  38. View Slide

  39. 3FTQPOTJWFHSJE๭㞬Х㡳
    @include  at-­‐breakpoint($media-­‐layout)  {
       .page  {  @include  container;  }
    }

    View Slide

  40. Ӕˮ⭈NFEJBMBZPVU

    View Slide

  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    tag.
    മᴣ

    View Slide

  42. NFEJBMBZPVUʯৡമᴣ
    $media-­‐layout:  12;
    //  使⽤用  12  欄布局  (susy  ⾃自⼰己去計算  min-­‐width)
    $media-­‐layout:  30em;
    //  設定  min-­‐width  30em
    $media-­‐layout:  30em  12;
    //  設定  min-­‐width  30em,  並使⽤用  12  欄

    View Slide

  43. ӻˮ⭈"U#SFBLQPJOU
    @include  at-­‐breakpoint(30em  12)  {
       .page  {  @include  container;  }
    }

    View Slide

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

    View Slide

  45. TVTZTBTTӻ⼣ת
    $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
    ୘࿟ፕ༩⏳ḕێٽ㡠

    View Slide

  46. TVTZTBTTӻ⼣ת
    $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
    ୘࿟ፕ༩⏳ḕێٽ㡠

    View Slide

  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;
       }
    }
    ʱʫ㏡ḑ⯃᝖㡧 ٨⇄ש㡧

    View Slide

  48. View Slide

  49. 6*ӏ̲ḕ⢫ᱝቶ්
    .button  {
       //  ⼀一堆預設樣式
       @include  at-­‐breakpoint($desktop)  {
           //  桌⾯面版本樣式
       }
    }

    View Slide

  50. View Slide

  51. ⽢ፕ㐈Ѹܚ
    .attendee  {
       @include  isolate-­‐grid(1);
       @include  at-­‐breakpoint($desktop)  {
           @include  isolate-­‐grid(2);
       }
    }
    ဈᖧᬡ
    ͬϪᘐͥḕHBMMFSZMJTU
    ᐸ㍻ᬡ
    ͬϪᘐͥḕHBMMFSZMJTU

    View Slide

  52. View Slide

  53. ٩̨ᴣTVTZ╽ХHSJE
    @for  $col  from  1  through  $total-­‐columns  {
       .span#{$col}  {
           @include  span-­‐columns($col);
       }
    }

    View Slide

  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;
    }

    View Slide

  55. View Slide

  56. ʪ ௓ ዒ ௣ ʰ ဈ
    RWD
    SUSY responsive grid for compass.
    Ṻḕ

    View Slide

  57. 5 ) " / , 4 8 & - $ 0 . &
    GCDPNHSPVQTTVTZUFNQMF
    TVTZἤ₳௄

    View Slide