MIDDLEMAN MEETS SUSY

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

Transcript

1. !BZVNJLP JO
   5PLZP
   .JEEMFNBO
   .FFUVQ
   
2. Hello! ۽໺
   ѥ༝ඒɹʛɹ,VNBOP
   "ZVNJ ϑϦʔϥϯε !BZVNJLP DBNVSPPSH   8&#Λத৺ʹΠϥετͱσβΠϯͱίʔσΟϯάͷ͓࢓ࣄΛ͍ͯ͠·͢ɻ 3VCZͱ3BJMTͱIBNMͱTBTT͕޷͖Ͱ͢ɻ  HJUIVCDPNLVNBOPBZVNJ
3. ͳͥ.*EEMFNBOΛબΜͩͷ͔
4. ͖͔͚ͬ͸
   ϑΟϤϧυ͞Μͷ ϦϞʔτΠϯλʔϯ ֶशϝχϡʔʹɺ l.JEEMFNBOz
   ͕͔͋ͬͨΒɻ
5. ࢖ͬͯΈͨ
6. RUby Hiroba 2013
7. IUUQSVCZIJSPCBPSH
8. Middleman + Amicus (HTML5 Boilerplate, Haml, Sass, Compass, Susy grid system)
9. .JEEMFNBOͰαΠτΛ࡞ͬͨΒ
10. 3BJMTͷ࢓ࣄ͕དྷͨʂʂ WJB
    !NBDIJEB
11. IUUQCMBCP
12. .JEEMFNBOͰIBNMͱTBTTʹ׳Εͯ ͍͔ͨΒɺ3BJMTͰϚʔΫΞοϓ͢Δ ϋʔυϧ͸ɺ͍͔ͪΒελʔτ͢ΔΑ ΓڪΒ͔͘ͳΓ௿͍΋ͷͩͬͨʢͱࢥ ͍·͢ʣɻ
13. ͔͜͜Βຊ୊
14. WHAT’S SUSY?
15. IUUQTVTZPEECJSEOFU
16. 3FTQPOTJWF
    HSJET
    GPS
    $PNQBTT
    .JEEMFNBOʹݶΒͣ࢖͑·͢ɻ $PNQBTTΛ࢖͑Δ؀ڥͳΒɺେৎ෉ɻ
    
17. SITE using susy 
    4BTT 
    4RVBSF
    .BSLFU 
    #BSDFMPOB
    3VCZ
    $POGFSFODF 
    BOE
    NPSF
18. IUUQTBTTMBOHDPN
19. IUUQTTRVBSFVQDPNNBSLFU
20. IUUQXXXCBSVDPPSH
21. ͳΜͰ middleman & SUSY?
22. ಋೖָ͕ɻ .JEEMFNBOʹ$PNQBTT͕CVOEMF͞Ε ͍ͯΔͷͰɺ4VTZͷHFNΛJOTUBMM͢Δ ͚ͩɻ
23. ศརͳNJYJO܈ɻ ͑ʁ ϒϨΠΫϙΠϯτ͕
    BUCSFBLQPJOUͩ ͚Ͱॻ͚Δͷʁ
24. Getting started
25. STEP 0 Create project
26. $ middleman init hoge 
    DPNNBOE
    MJOF
27. STEP 1 installation
28. $ gem install susy 
    DPNNBOE
    MJOF
29. or
30. gem "susy" 
    (FNpMF $ bundle install 
    DPNNBOE
    MJOF
31. STEP 2 config
32. require ‘susy’ 
    DPOpHSC
33. STEP 3 usage
34. @import “compass” @import “susy” 
    IPHFTBTT
35. $total-columns : 12 $column-width : 4em $gutter-width : 1em $grid-padding : $gutter-width 
    TBTTʹTFUUJOH
36. $total-columns : 12 $column-width : 4em $gutter-width : 1em 1 2 3 4 5 6 7 8 9 10 11 12
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) • • • • • • •
39. +at-breakpoint(8) // Establish our new 8-column container. +container nav +span-columns(8, 8) height : auto .content +span-columns(8, 8) • • • • • • •
41. OTHER
42. IUUQOFBUCPVSCPOJP
43. POINT
44. 4VTZͱ#VSCPO
    /FBU͸HJSE༻ͷ DMBTTΛ༻ҙ͍ͯ͠ͳ͍ɻ ଞͷ$44
    'SBNFXPSLʢ#PPUTUSBQ΍ (SVNCZɺ'PVOEBUJPOͳͲʣͷΑ͏ʹHSJE༻ͷ DMBTTΛ༻ҙ͍ͯ͠ͳ͍ɻ
45. HSJE༻ͷDMBTT͕༻ҙ͞Εͳ͍͜ͱͷ ϝϦοτ
    
    )5.-ଆͰDMBTT͕GBUʹͳΒͳ͍ TBTTଆ͚ͩͰΧϥϜ਺ΛίϯτϩʔϧͰ͖ΔͷͰɺ)5.-ଆͷDMBTTͷ؅ཧָ͕ɻ 
    ೚ҙͷΧϥϜ਺ͷઃఆ͕༰қͰ͋Δ 
46. HSJE༻ͷDMBTT͕༻ҙ͞Εͳ͍͜ͱͷ σϝϦοτ 
    TBTTଆͰDMBTTΛ؅ཧ͢Δͷ͕໘౗ 
    ݁ہಠࣗͷHSJE༻DMBTTΛઃఆ͢Δ৔߹΋ 
47. 4VTZ͸$PNQBTTʹґଘ͢ΔͷͰɺ !JODMVEFΛ ͰলུͰ͖Δͷ͕ͪΐ ͬͱྑ͍ʢॻ͘ͷָ͕ʣɻ
48. ͱʹָ͔͍ͨ͘͠ɻ
49. HAVE A NICE COrDING  THANK YOU!