CSSフレームワークをつくろう！

フロントエンドカンファレンス 2017 のスライドです。

Transcript

1. $44ϑϨʔϜϫʔΫΛͭ͘Ζ͏ʂ '30/5&/%
   $0/'&3&/$&
   
2. ϞϯΩʔϨϯν
   ΩλδϚλΧγ
   
   !JOD
   
    ϑϦʔϥϯε
 8FC
   σβΠφʔϓϩάϥϚʔ
    ௕࡚
    8PSE1SFTT
   ϓϥάΠϯ
 .8
   81
   'PSNɺ4NBSU
   $VTUPN
   'JFMET
    8PSE1SFTT
   ςʔϚ
 )BCBLJSJɺ.JNJ[VLV
    4BTT4UZMVT$44ϑϨʔϜϫʔΫ
 #BTJT
3. ᶃ $44ϑϨʔϜϫʔΫͷํ޲ੑΛ͖ΊΔ
   ᶄ ࢖༻͢ΔϝλݴޠΛ͖ΊΔ
   ᶅ $44ઃܭ໋໊نଇΛ͖ΊΔ
   ᶆ +4·ͰΧόʔ͢Δͷ͔͠ͳ͍ͷ͔໰୊
   ᶇ Ͳ͜·Ͱύοέʔδʹ;͘ΊΔ͔
4. ᶃ $44ϑϨʔϜϫʔΫͷํ޲ੑΛ͖ΊΔ
   ᶄ ࢖༻͢ΔϝλݴޠΛ͖ΊΔ
   ᶅ $44ઃܭ໋໊نଇΛ͖ΊΔ
   ᶆ +4·ͰΧόʔ͢Δͷ͔͠ͳ͍ͷ͔໰୊
   ᶇ Ͳ͜·Ͱύοέʔδʹ;͘ΊΔ͔
5. ᶃ $44ϑϨʔϜϫʔΫΛͭ͘Δʹ͍ͨͬͨܦҢ
   ᶄ $44ϑϨʔϜϫʔΫΛͭ͘Δ͜ͱʹΑͬͯ
 ղܾ͔ͨͬͨ͜͠ͱ
   ᶅ Ͳ͏͍͏ରࡦΛ͔ͨ͠
   ᶆ $44ϑϨʔϜϫʔΫΛͭͬͨ͘͜ͱʹΑͬͯ
 Ͳ͏ͳ͔ͬͨ
6. $44ϑϨʔϜϫʔΫΛ
   ͭ͘Δʹ͍ͨͬͨܦҢ
8. ɾશ͘ಉ͡෦෼
   ɾগ͠ҧ͏͚Ͳ΄ͱΜͲಉ͡෦෼
   ɾσβΠϯ͸શવҧ͏͚Ͳେ࿮ͱͯ͠͸ࣅ͍ͯΔ෦෼ ͦͷΑ͏ͳ෦෼Λநग़ͯ͠࢖͍·ΘͤΔΑ͏ʹ൚༻Խ $44ϑϨʔϜϫʔΫ
11. $44ϑϨʔϜϫʔΫΛͭ͘Δ
    ͜ͱʹΑͬͯղܾ͔ͨͬͨ͜͠ͱ
12. ্ॻ͖ͭΒ͍໰୊
13. ࣗ෼ͷχʔζʹϚονͨ͠
    $44ϑϨʔϜϫʔΫΛͭ͘Γ͍ͨ
14. 8FC੍࡞ձࣾ γεςϜձࣾ σβΠφʔ ϓϩάϥϚʔ ͞·͟·ͳ
    σβΠϯςΠετ
    ίϯϙʔωϯτ
    දݱ ίʔσΟϯά ͲͷαΠτʹ΋ʮϘλϯʯ͸͋Δ͚Ͳ
    ܗ΋ςΠετ΋શવ͕ͪ͏ͳ σϑΥϧτͷ૷০͕͋ͬͯ΋ͦͷ··
    ࢖͑Δ͜ͱͳ͍͠ଧͪফ͢ͷετϨεͩͳ͊͊
15. 8FC੍࡞ձࣾ γεςϜձࣾ σβΠφʔ ϓϩάϥϚʔ ͞·͟·ͳ
    σβΠϯςΠετ
    ίϯϙʔωϯτ
    දݱ ίʔσΟϯά ૷০͕ͳ͍ࠎ૊Έ͚ͩͷ$44ϑϨʔϜϫʔΫ͕΄͍͠
    
17. ετϨεΛײ͍ͯͨ͜͡ͱ  ্ॻ͖ͭΒ͍໰୊
     14%Ͱʮ༨നαΠζΛ͸͔Δʯͱ͍͏࡞ۀ
     qPBUϕʔεάϦουͲ͏ʹ͔ͳΒΜ͔໰୊
     ʮ*&ɾͰ΋͋Δఔ౓ϨΠΞ΢τͨ΋ͬͯͶʙʯ໰୊
     ෼ׂάϦου͚ͩͰ͸ʜ໰୊
18. Ͳ͏͍͏ରࡦΛ͔ͨ͠
19. ্ॻ͖ͭΒ͍໰୊ ղܾ͍ͨ͜͠ͱ
    
22. ίϯϙʔωϯτͷجຊઃܭ w ࢖͍΋͠ͳ͍৭ͷόϦΤʔγϣϯ͸ͳ͠
    w ϗόʔ࣌ͷελΠϧ΋ͳ͠
    w ϑΥϯταΠζͳͲίϯϙʔωϯτ͕੒ཱ͢ΔͨΊʹ ͳͯ͘΋େৎ෉ͳ΋ͷ΋ະࢦఆ
23. ·ͩ଍Γͳ͍ʜ
24. αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯΔ৔߹ #BTJTͷσϑΥϧτͷϘλϯ ্ॻ͖ͯͦ͠ͷαΠτͷ
    σϑΥϧτͷϘλϯσβΠϯʹ ಠࣗʹ֦ு ಠࣗʹ֦ு @DCUO @DCUO @DCUOGPP @DCUOCBS
25. αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯͳ͍ʜ #BTJTͷσϑΥϧτͷϘλϯ ͲΕ͕σϑΥϧτͳΜͩʜ @DCUO ΋͸΍
    NPEJpFS
    Ͱ͸ෆՄೳʜ
26. αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯͳ͍ʜ #BTJTͷσϑΥϧτͷϘλϯ ίϯϙʔωϯτΛΘ͚͍ͨ @DCUO DQSJNBSZCUO DEBOHFSCUO DDBVUJPOCUO DTFOECUO DMPHJOCUO
28. '-0$44 w ຊจϨϕϧ
    w ຊจϨϕϧ
    w ຊจϨϕϧ
    w ຊจϨϕϧ
    w ຊจϨϕϧ
     ! foundation/ # normalizeɺϕʔεελΠϧɺϛοΫεΠϯ౳ ! layout/ # ϔομʔɾϑολʔ౳ϨΠΞ΢τ༻ελΠϧ " object/ʊ ! component/ # ίϯϙʔωϯτ༻ͷελΠϧ ! project/ # ϓϩδΣΫτݻ༗ͷελΠϧ " utility/ # ϔϧύʔɾௐ੔༻ελΠϧ
29. #BTJT͸ʜ ! core/ # BasisΛߏ੒͢ΔίΞ෦෼ # ! function/ # ؔ਺ # ! mixin/ # ϛοΫεΠϯ # " abstract/ # ίϯϙʔωϯτΛߏ੒͢ΔϛοΫεΠϯ ! foundation/ # normalizeɺϕʔεελΠϧ ! layout/ʊ " object/ʊ ! component/ # ίϯϙʔωϯτ༻ͷελΠϧ ! project/ʊ " utility/ # ϔϧύʔɾௐ੔༻ελΠϧ
30. #BTJTͷ࣋ͭDMBTT͕͍Βͳ͍Ҋ݅ͷ৔߹ w DPSF͚ͩ!JNQPSU͢Ε͹ϕʔεͷελΠϧ΋ίϯϙʔω ϯτͷελΠϧ΋Ұ੾ు͖ग़͞Εͣແବ͕গͳ͍
    w BCTUSBDUϨΠϠʔͷNJYJOΛ۩৅Խͯ͠ඞཁͳίʔυΛ ෇͚଍͢ܗʹ͢Ε͹ΦϦδφϧͷίϯϙʔωϯτΛͭ ͘Δͷ΋؆୯
31. BCTUSBDUͷ۩৅Խ .my-btn { @include _btn(( border: null, )); &--primary { … } &--secondary { … } &--block { … } }
32. BCTUSBDUͷ۩৅Խ .c-send-btn { @include _btn(); … } .c-caution-btn { @include _btn(); … } .c-login-btn { @include _btn(); … }
33. 14%Ͱʮ༨നαΠζΛ͸͔Δʯ
    ͱ͍͏࡞ۀ ղܾ͍ͨ͜͠ͱ
    
36. MJOFIFJHIU GPOUTJ[F IBMGMFBEJOH IBMGMFBEJOH
37. 14%Ͱʮ༨നαΠζΛ͸͔Δʯͱ͍͏࡞ۀ w ਖ਼֬ʹ͸͔ΔͨΊʹ͸GPOUTJ[FͱMJOFIFJHIU͔Βߦؒ ͕ԿQYʹͳΔ͔ܭࢉ͠ɺ
    w ͦͷߦؒ෼ΛҾ͍ͯ༨നαΠζΛಋ͖ग़͞ͳ͚Ε͹ͳ Βͳ͍
    w MJOFIFJHIUࣗମ΋૬ର஋Ͱॻͨ͘Ίʹ͸ܭࢉͯ͠ಋ͖ͩ ͞ͳ͚Ε͹ͳΒͳ͍ͷͰΊΜͲ͍͘͞
    w ͦͯͦ͠ΕΒͷ࡞ۀΛશՕॴͰ΍Βͳ͍ͱ͍͚ͳ͍
38. MJOFIFJHIU΋༨ന΋উखʹ
    ྑ͍ײ͡ʹͳͬͯ΄͍͠
    
40. w ҰݴͰ͍͏ͱMJOFIFJHIUͱ༨നͷαΠζΛ౷Ұ͠ɺഒ ਺Ͱ஋Λઃఆ͍ͯ͘͜͠ͱͰόϥϯεΛ੔͑Δ
    w ྫ͑͹
    QYɺQYɺQYɺQY
    ͷΑ͏ͳ۠੾Γ
    w ͦΕʹ͋ΘͤͯจࣈαΠζ΋ഒ਺Ͱઃఆ
    w ͨͩɺ೔ຊޠͩͱจࣈ͕େ͖͘ͳΓ͗ͨ͢Γɺͦ΋ͦ ΋ͦΜͳσβΠϯ͕͍ͭ΋͘Δͱ͸ݶΒͳ͍
41. จࣈαΠζΛج४ʹউखʹܭࢉͤ͞Δʂ @function _vertical-rhythm($font-size, $coefficient: 1) { $between-lines : _strip-unit(_rem2px($_between-lines)); $base-line-height: _strip-unit(_rem2px($_base-line-height)); $base-font-size : _strip-unit(_rem2px($_base-font-size)); $font-size : _strip-unit($font-size); $line-height: $font-size + ($between-lines * $coefficient); @if ($line-height < $font-size + ($between-lines * 2)) { @return _vertical-rhythm($font-size, ($coefficient + 1)); } @else { @if ($font-size % $base-font-size == 0 and $font-size > $base-font-size) { @return $line-height - ($between-lines / 2); } @return $line-height; } }
42. จࣈαΠζΛج४ʹউखʹܭࢉͤ͞Δʂ /* margin */ @include _margin-bottom(1); /* padding */ @include _padding(.5); /* จࣈαΠζͱͦΕʹԠͨ͡࠷దͳline-height */ @include _font-size-line-height(16px);
43. ͍΍͍΍ɺ݁ہ͸͔Βͳ͍ΜͩͬͨΒ
    ҧ͏஋ʹͳͬͯͳ͍ʜʁ
44. qPBUϕʔεάϦου
 Ͳ͏ʹ͔ͳΒΜ͔໰୊ ղܾ͍ͨ͜͠ͱ
    
47. 'MFYJCMF
    CPY
    MBZPVU
    .PEVMF
    
48. 'MFYJCMF
    #PY
    -BZPVU
    .PEVMF w ͍ΘΏΔqFYCPY
    w DMFBSෆཁ
    w ্෇͖ɺதԝἧ͑ɺԼ෇͖ɺࠨӈۉ౳ׂ෇ɺࢠཁૉͷ ߴ͞౷ҰͳͲɺॊೈͳϨΠΞ΢τ͕ɺ؆୯ͳϓϩύςΟ ͷ૊Έ߹ΘͤͰՄೳ
49. ʮ*&ɾͰ΋͋Δఔ౓
 ϨΠΞ΢τͨ΋ͬͯͶʙʯ໰୊ ղܾ͍ͨ͜͠ͱ
    
51. 'MFYJCMF
    #PY
    -BZPVU
    .PEVMF w *&͸BVUPQSFpYFSΛ࢖͑͹ͦΕͳΓʹ͔ͭ͑Δ
    w *&ҎԼ͸׬શʹະରԠͳͷͰqFYCPY͸શ͔ͭ͑͘ͳ͍
52. *
    &
    ɻɻɻ
53. ίϯσΟγϣφϧίϝϯτ
    EJTQMBZ
    JOMJOFCPY
    
    UBCMF ✕
54. ίϯσΟγϣφϧίϝϯτͰ*&༻$44ΛಡΈࠐΉ <!--[if lt IE 10]> <link rel="stylesheet" href="node_modules/ sass-basis/dist/css/plugin/basis-ie9/basis- ie9.min.css" /> <![endif]-->
55. EJTQMBZ
    JOMJOFCMPDL
    UBCMF
    Ͱ্ॻ͖ w EJTQMBZ
    qFYͷࢦఆΛ*&ҎԼͰ͸EJTQMBZJOMJOFCPY
    UBCMF Ͱ্ॻ͖
    w தԝἧ͑ɺԼἧ͑ɺࠨӈۉ౳ׂ෇ɺٯॱͷϨΠΞ΢τͳͲ ͸
    EJTQMBZ
    JOMJOFCMPDL
    Ͱ্ॻ͖ͤ͞Δ͜ͱͰରԠ
    w ࢠཁૉͷߴ͞ἧ͑ɺΧϥϜαΠζͷࣗಈۉҰԽͳͲ͸
    EJTQMBZ
    UBCMF
    Ͱ্ॻ͖ͤ͞Δ͜ͱͰରԠ
    w qFYCPYͷશͯΛ࠶ݱ͢Δ͜ͱ͸Ͱ͖ͳ͍͕ɺରԠՄೳൣғ ΛΘ্͔ͬͨͰ࢖͑͹͋Δఔ౓࠶ݱͰ͖Δ
56. ෼ׂάϦου͚ͩͰ͸ʜ໰୊ ղܾ͍ͨ͜͠ͱ
    
57. w ࣮૷ଆ͕ޮ཰ԽͷͨΊʹ#PPUTUSBQΛউखʹ࢖͍ͬͯΔ ͱσβΠφʔ͞Μ͕άϦουγεςϜΛҙࣝͤͣʹσβ Πϯ͍ͯ͠Δ͜ͱ͸ී௨ʹ͋Γ͑Δ
    w ΋͠ҙࣝͯ͠΋Β͍ͬͯͨͱͯ͠΋ίϯςϯπʹΑͬͯ ͸ʮ͚ͦͩ͜͸ΧϥϜʹ͍ͨ͠ʯΈ͍ͨͳ͜ͱ͸͋Γ ͑Δ
    w ࣮຿తʹ͸άϦουͷ฼਺ʢ#PPUTUSBQͳΒʣ͕ݻఆ ͞Ε͍ͯͳ͍΄͏͕Ԡ༻͕͖͖΍͍͢
58. ฼਺͕ՄมͳάϦουγεςϜΛ ͭ͘Ε͹͑͑΍Μ
    
59. #BTJTͷάϦουγεςϜ <div class=“_c-row”> <div class=“_c-row__col _c-row__col--1-4”> </div> </div>
60. #BTJTͷάϦουγεςϜ <div class=“_c-row”> <div class=“_c-row__col _c-row__col--1-4”> </div> </div> ࣮ࡍͷαΠζ
    
    ΧϥϜαΠζ
    ʸ
    ߦ͋ͨΓͷΧϥϜ਺ ͜ͷྫͷ৔߹ͩͱɺ
    
    
61. #BTJTΛ࢖ͬͨ͜ͱʹΑͬͯ
    Ͳ͏ͳ͔ͬͨ
62. w $44ϑϨʔϜϫʔΫ͸ͦͷαΠτ͚ͩ͸ͳ͘৭ʑͳαΠ τͰ࢖͍·Θ͢΋ͷͳͷͰɺͲ͏ઃܭ͢Ε͹൚༻తʹ ࢖͍·ΘͤΔΑ͏ʹͳΔͷ͔Λڧ͘ҙࣝ͢ΔΑ͏ʹͳͬ ͨ
    w ͦ͏͍͏ҙࣝ෇͚͕͞Εͨ͜ͱͰ$44ϑϨʔϜϫʔΫ֎ ͷ$44Λॻ͘ͱ͖ͷޮ཰΋ྑ͘ͳͬͨ
    w 4BTTΛωετ͙Β͍ʹ͔͠࢖͍ͬͯͳ͔͚ͬͨͲɺม ਺΍NJYJOΛͲ͏࢖͑͹΋ͬͱޮ཰తʹͳΔͷ͔΋ҙࣝ Ͱ͖ΔΑ͏ʹͳͬͨ
63. ίʔσΟϯά࡞ۀ͕
    ָ͘͠ͳͬͨ
    
64. ·ͱΊ w طଘͷ$44ϑϨʔϜϫʔΫʹͬ͘͠Γ͖͍ͯͳ͍ͷͰ͋Ε͹ɺͲ͏ ͍͏ͱ͜Ζʹͬ͘͠Γ͖͍ͯͳ͍ͷ͔ɺͦΕΛղܾ͢Δʹ͸Ͳ͏͠ ͨΒྑ͍ͷ͔Λ੔ཧͯ͠ɺࣗ෼ʹͽͬͨΓ͸·ΔΦϦδφϧͷ$44 ϑϨʔϜϫʔΫΛͭͬͯ͘Έ·͠ΐ͏
    w ࠓճ͓࿩ͨ͠ࢪࡦ͸͋͘·Ͱ๻ͷχʔζɾϫʔΫϑϩʔʹ࠷దԽ͞ Εͨ΋ͷͰ͢
    w ࠷దղ͸Έͳ͞ΜͷχʔζɾϫʔΫϑϩʔʹΑͬͯมΘΔ͸ͣͰ͢
    w ͭͬͨ͘Βͥͻ
    (JU)VC
    Ͱެ։ͯ͠஌ݟΛγΣΞ͍ͯͩ͘͠͞ɻε λʔ͚ͭ·͢