RWD 一小時就上手

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

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