Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MIDDLEMAN MEETS SUSY

kumano ayumi
November 23, 2013

MIDDLEMAN MEETS SUSY

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

kumano ayumi

November 23, 2013
Tweet

Other Decks in Design

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