MIDDLEMAN MEETS SUSY

2013年11月22日 Tokyo Middleman Meetup #1で発表させていただいた資料です。

Transcript

1. !BZVNJLP JO5PLZP.JEEMFNBO.FFUVQ
   

   View Slide

2. Hello!
   ۽໺ѥ༝ඒɹʛɹ,VNBOP"ZVNJ
   ϑϦʔϥϯε
   !BZVNJLP
   DBNVSPPSH
   
   
   8Λத৺ʹΠϥετͱσβΠϯͱίʔσΟϯάͷ͓࢓ࣄΛ͍ͯ͠·͢ɻ
   3VCZͱ3BJMTͱIBNMͱTBTT͕޷͖Ͱ͢ɻ
    HJUIVCDPNLVNBOPBZVNJ
   

   View Slide

3. ͳͥ.*EEMFNBOΛબΜͩͷ͔
   

   View Slide

4. ͖͔͚ͬ͸ϑΟϤϧυ͞Μͷ
   ϦϞʔτΠϯλʔϯ
   ֶशϝχϡʔʹɺ
   l.JEEMFNBOz͕͔͋ͬͨΒɻ
   

   View Slide

5. ࢖ͬͯΈͨ
   

   View Slide

6. RUby Hiroba 2013
   

   View Slide

7. IUUQSVCZIJSPCBPSH
   

   View Slide

8. Middleman
   +
   Amicus
   (HTML5 Boilerplate,
   Haml, Sass, Compass,
   Susy grid system)
   

   View Slide

9. .JEEMFNBOͰαΠτΛ࡞ͬͨΒ
   

   View Slide

10. 3BJMTͷ࢓ࣄ͕དྷͨʂʂ
    WJB!NBDIJEB
    

    View Slide

11. IUUQCMBCP
    

    View Slide

12. .JEEMFNBOͰIBNMͱTBTTʹ׳Εͯ
    ͍͔ͨΒɺ3BJMTͰϚʔΫΞοϓ͢Δ
    ϋʔυϧ͸ɺ͍͔ͪΒελʔτ͢ΔΑ
    ΓڪΒ͔͘ͳΓ௿͍΋ͷͩͬͨʢͱࢥ
    ͍·͢ʣɻ
    

    View Slide

13. ͔͜͜Βຊ୊
    

    View Slide

14. WHAT’S
    SUSY?
    

    View Slide

15. IUUQTVTZPEECJSEOFU
    

    View Slide

16. 3FTQPOTJWFHSJETGPS$PNQBTT
    .JEEMFNBOʹݶΒͣ࢖͑·͢ɻ
    $PNQBTTΛ࢖͑Δ؀ڥͳΒɺେৎ෉ɻ
    

    View Slide

17. SITE using susy
    4BTT
    4RVBSF.BSLFU
    #BSDFMPOB3VCZ$POGFSFODF
    BOENPSF
    

    View Slide

18. IUUQTBTTMBOHDPN
    

    View Slide

19. IUUQTTRVBSFVQDPNNBSLFU
    

    View Slide

20. IUUQXXXCBSVDPPSH
    

    View Slide

21. ͳΜͰ
    middleman &
    SUSY?
    

    View Slide

22. ಋೖָ͕ɻ
    .JEEMFNBOʹ$PNQBTT͕CVOEMF͞Ε
    ͍ͯΔͷͰɺ4VTZͷHFNΛJOTUBMM͢Δ
    ͚ͩɻ
    

    View Slide

23. ศརͳNJYJO܈ɻ
    ͑ʁ
    ϒϨΠΫϙΠϯτ͕BUCSFBLQPJOUͩ
    ͚Ͱॻ͚Δͷʁ
    

    View Slide

24. Getting
    started
    

    View Slide

25. STEP 0
    Create project
    

    View Slide

26. $ middleman init hoge
    DPNNBOEMJOF
    

    View Slide

27. STEP 1
    installation
    

    View Slide

28. $ gem install susy
    DPNNBOEMJOF
    

    View Slide

29. or
    

    View Slide

30. gem "susy"
    (FNpMF
    $ bundle install
    DPNNBOEMJOF
    

    View Slide

31. STEP 2
    config
    

    View Slide

32. require ‘susy’
    DPOpHSC
    

    View Slide

33. STEP 3
    usage
    

    View Slide

34. @import “compass”
    @import “susy”
    IPHFTBTT
    

    View Slide

35. $total-columns : 12
    $column-width : 4em
    $gutter-width : 1em
    $grid-padding : $gutter-width
    TBTTʹTFUUJOH
    

    View Slide

36. $total-columns : 12
    $column-width : 4em
    $gutter-width : 1em
    1 2 3 4 5 6 7 8 9 10 11 12
    

    View Slide

37. .page
    // page acts as a container for our grid.
    +container
    // header and footer are full-width by default.
    header, footer
    clear: both
    // nav spans 3 columns of total 12.
    nav
    +span-columns(3,12)
    .content
    // content spans the final (omega) 9 columns of 12.
    +span-columns(9 omega,12)
    // main content spans 6 of those 9 columns.
    .main
    +span-columns(6,9)
    // secondary content spans the final 3 (omega) of 9 columns.
    .secondary
    +span-columns(3 omega,9)
    ● ● ● ● ● ● ●
    

    View Slide

38. View Slide

39. +at-breakpoint(8)
    // Establish our new 8-column container.
    +container
    nav
    +span-columns(8, 8)
    height : auto
    .content
    +span-columns(8, 8)
    ● ● ● ● ● ● ●
    

    View Slide

40. View Slide

41. OTHER
    

    View Slide

42. IUUQOFBUCPVSCPOJP
    

    View Slide

43. POINT
    

    View Slide

44. 4VTZͱ#VSCPO/FBU͸HJSE༻ͷ
    DMBTTΛ༻ҙ͍ͯ͠ͳ͍ɻ
    ଞͷ$44'SBNFXPSLʢ#PPUTUSBQ΍
    (SVNCZɺ'PVOEBUJPOͳͲʣͷΑ͏ʹHSJE༻ͷ
    DMBTTΛ༻ҙ͍ͯ͠ͳ͍ɻ
    

    View Slide

45. HSJE༻ͷDMBTT͕༻ҙ͞Εͳ͍͜ͱͷ
    ϝϦοτ
    )5.-ଆͰDMBTT͕GBUʹͳΒͳ͍
    TBTTଆ͚ͩͰΧϥϜ਺ΛίϯτϩʔϧͰ͖ΔͷͰɺ)5.-ଆͷDMBTTͷ؅ཧָ͕ɻ
    ೚ҙͷΧϥϜ਺ͷઃఆ͕༰қͰ͋Δ
    
    

    View Slide

46. HSJE༻ͷDMBTT͕༻ҙ͞Εͳ͍͜ͱͷ
    σϝϦοτ
    TBTTଆͰDMBTTΛ؅ཧ͢Δͷ͕໘౗
    ݁ہಠࣗͷHSJE༻DMBTTΛઃఆ͢Δ৔߹΋
    
    

    View Slide

47. 4VTZ͸$PNQBTTʹґଘ͢ΔͷͰɺ
    !JODMVEFΛͰলུͰ͖Δͷ͕ͪΐ
    ͬͱྑ͍ʢॻ͘ͷָ͕ʣɻ
    

    View Slide

48. ͱʹָ͔͍ͨ͘͠ɻ
    

    View Slide

49. HAVE A NICE
    COrDING 
    THANK YOU!
    

    View Slide