MIDDLEMAN MEETS SUSY - Speaker Deck

Slide 1

Slide 1 text

!BZVNJLP JO5PLZP.JEEMFNBO.FFUVQ

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ͳͥ.*EEMFNBOΛબΜͩͷ͔

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

࢖ͬͯΈͨ

Slide 6

Slide 6 text

RUby Hiroba 2013

Slide 7

Slide 7 text

IUUQSVCZIJSPCBPSH

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

.JEEMFNBOͰαΠτΛ࡞ͬͨΒ

Slide 10

Slide 10 text

3BJMTͷ࢓ࣄ͕དྷͨʂʂ WJB!NBDIJEB

Slide 11

Slide 11 text

IUUQCMBCP

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

͔͜͜Βຊ୊

Slide 14

Slide 14 text

WHAT’S SUSY?

Slide 15

Slide 15 text

IUUQTVTZPEECJSEOFU

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

IUUQTBTTMBOHDPN

Slide 19

Slide 19 text

IUUQTTRVBSFVQDPNNBSLFU

Slide 20

Slide 20 text

IUUQXXXCBSVDPPSH

Slide 21

Slide 21 text

ͳΜͰ middleman & SUSY?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Getting started

Slide 25

Slide 25 text

STEP 0 Create project

Slide 26

Slide 26 text

$ middleman init hoge DPNNBOEMJOF

Slide 27

Slide 27 text

STEP 1 installation

Slide 28

Slide 28 text

$ gem install susy DPNNBOEMJOF

Slide 29

Slide 29 text

Slide 30

Slide 30 text

gem "susy" (FNpMF $ bundle install DPNNBOEMJOF

Slide 31

Slide 31 text

STEP 2 config

Slide 32

Slide 32 text

require ‘susy’ DPOpHSC

Slide 33

Slide 33 text

STEP 3 usage

Slide 34

Slide 34 text

@import “compass” @import “susy” IPHFTBTT

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

.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) ● ● ● ● ● ● ●

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

OTHER

Slide 42

Slide 42 text

IUUQOFBUCPVSCPOJP

Slide 43

Slide 43 text

POINT

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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