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

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

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

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

341f9bfd1ef3b1f5f08eddac252f8c5f?s=128

Takashi Kitajima

March 18, 2017
Tweet

Transcript

  1. $44ϑϨʔϜϫʔΫΛͭ͘Ζ͏ʂ '30/5&/%$0/'&3&/$&

  2. ϞϯΩʔϨϯν ΩλδϚλΧγ !JOD   ϑϦʔϥϯε
 8FCσβΠφʔϓϩάϥϚʔ  ௕࡚ 

    8PSE1SFTTϓϥάΠϯ
 .881'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ϑϨʔϜϫʔΫΛ ͭ͘Δʹ͍ͨͬͨܦҢ

  7. None
  8. ɾશ͘ಉ͡෦෼ ɾগ͠ҧ͏͚Ͳ΄ͱΜͲಉ͡෦෼ ɾσβΠϯ͸શવҧ͏͚Ͳେ࿮ͱͯ͠͸ࣅ͍ͯΔ෦෼ ͦͷΑ͏ͳ෦෼Λநग़ͯ͠࢖͍·ΘͤΔΑ͏ʹ൚༻Խ $44ϑϨʔϜϫʔΫ

  9. None
  10. None
  11. $44ϑϨʔϜϫʔΫΛͭ͘Δ ͜ͱʹΑͬͯղܾ͔ͨͬͨ͜͠ͱ

  12. ্ॻ͖ͭΒ͍໰୊

  13. ࣗ෼ͷχʔζʹϚονͨ͠ $44ϑϨʔϜϫʔΫΛͭ͘Γ͍ͨ

  14. 8FC੍࡞ձࣾ γεςϜձࣾ σβΠφʔ ϓϩάϥϚʔ ͞·͟·ͳ σβΠϯςΠετ ίϯϙʔωϯτ දݱ ίʔσΟϯά ͲͷαΠτʹ΋ʮϘλϯʯ͸͋Δ͚Ͳ

    ܗ΋ςΠετ΋શવ͕ͪ͏ͳ σϑΥϧτͷ૷০͕͋ͬͯ΋ͦͷ·· ࢖͑Δ͜ͱͳ͍͠ଧͪফ͢ͷετϨεͩͳ͊͊
  15. 8FC੍࡞ձࣾ γεςϜձࣾ σβΠφʔ ϓϩάϥϚʔ ͞·͟·ͳ σβΠϯςΠετ ίϯϙʔωϯτ දݱ ίʔσΟϯά ૷০͕ͳ͍ࠎ૊Έ͚ͩͷ$44ϑϨʔϜϫʔΫ͕΄͍͠

  16. None
  17. ετϨεΛײ͍ͯͨ͜͡ͱ  ্ॻ͖ͭΒ͍໰୊  14%Ͱʮ༨നαΠζΛ͸͔Δʯͱ͍͏࡞ۀ  qPBUϕʔεάϦουͲ͏ʹ͔ͳΒΜ͔໰୊  ʮ*&ɾͰ΋͋Δఔ౓ϨΠΞ΢τͨ΋ͬͯͶʙʯ໰୊ 

    ෼ׂάϦου͚ͩͰ͸ʜ໰୊
  18. Ͳ͏͍͏ରࡦΛ͔ͨ͠

  19. ্ॻ͖ͭΒ͍໰୊ ղܾ͍ͨ͜͠ͱ

  20. None
  21. None
  22. ίϯϙʔωϯτͷجຊઃܭ w ࢖͍΋͠ͳ͍৭ͷόϦΤʔγϣϯ͸ͳ͠ w ϗόʔ࣌ͷελΠϧ΋ͳ͠ w ϑΥϯταΠζͳͲίϯϙʔωϯτ͕੒ཱ͢ΔͨΊʹ ͳͯ͘΋େৎ෉ͳ΋ͷ΋ະࢦఆ

  23. ·ͩ଍Γͳ͍ʜ

  24. αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯΔ৔߹ #BTJTͷσϑΥϧτͷϘλϯ ্ॻ͖ͯͦ͠ͷαΠτͷ σϑΥϧτͷϘλϯσβΠϯʹ ಠࣗʹ֦ு ಠࣗʹ֦ு @DCUO @DCUO @DCUOGPP @DCUOCBS

  25. αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯͳ͍ʜ #BTJTͷσϑΥϧτͷϘλϯ ͲΕ͕σϑΥϧτͳΜͩʜ @DCUO ΋͸΍NPEJpFSͰ͸ෆՄೳʜ

  26. αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯͳ͍ʜ #BTJTͷσϑΥϧτͷϘλϯ ίϯϙʔωϯτΛΘ͚͍ͨ @DCUO DQSJNBSZCUO DEBOHFSCUO DDBVUJPOCUO DTFOECUO DMPHJOCUO

  27. None
  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%Ͱʮ༨നαΠζΛ͸͔Δʯ ͱ͍͏࡞ۀ ղܾ͍ͨ͜͠ͱ

  34. None
  35. None
  36. MJOFIFJHIU GPOUTJ[F IBMGMFBEJOH IBMGMFBEJOH

  37. 14%Ͱʮ༨നαΠζΛ͸͔Δʯͱ͍͏࡞ۀ w ਖ਼֬ʹ͸͔ΔͨΊʹ͸GPOUTJ[FͱMJOFIFJHIU͔Βߦؒ ͕ԿQYʹͳΔ͔ܭࢉ͠ɺ w ͦͷߦؒ෼ΛҾ͍ͯ༨നαΠζΛಋ͖ग़͞ͳ͚Ε͹ͳ Βͳ͍ w MJOFIFJHIUࣗମ΋૬ର஋Ͱॻͨ͘Ίʹ͸ܭࢉͯ͠ಋ͖ͩ ͞ͳ͚Ε͹ͳΒͳ͍ͷͰΊΜͲ͍͘͞

    w ͦͯͦ͠ΕΒͷ࡞ۀΛશՕॴͰ΍Βͳ͍ͱ͍͚ͳ͍
  38. MJOFIFJHIU΋༨ന΋উखʹ ྑ͍ײ͡ʹͳͬͯ΄͍͠

  39. None
  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ϕʔεάϦου
 Ͳ͏ʹ͔ͳΒΜ͔໰୊ ղܾ͍ͨ͜͠ͱ

  45. None
  46. None
  47. 'MFYJCMFCPYMBZPVU.PEVMF

  48. 'MFYJCMF#PY-BZPVU.PEVMF w ͍ΘΏΔqFYCPY w DMFBSෆཁ w ্෇͖ɺதԝἧ͑ɺԼ෇͖ɺࠨӈۉ౳ׂ෇ɺࢠཁૉͷ ߴ͞౷ҰͳͲɺॊೈͳϨΠΞ΢τ͕ɺ؆୯ͳϓϩύςΟ ͷ૊Έ߹ΘͤͰՄೳ

  49. ʮ*&ɾͰ΋͋Δఔ౓
 ϨΠΞ΢τͨ΋ͬͯͶʙʯ໰୊ ղܾ͍ͨ͜͠ͱ

  50. None
  51. 'MFYJCMF#PY-BZPVU.PEVMF w *&͸BVUPQSFpYFSΛ࢖͑͹ͦΕͳΓʹ͔ͭ͑Δ w *&ҎԼ͸׬શʹະରԠͳͷͰqFYCPY͸શ͔ͭ͑͘ͳ͍

  52. *&ɻɻɻ

  53. ίϯσΟγϣφϧίϝϯτ EJTQMBZJOMJOFCPY 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. EJTQMBZJOMJOFCMPDL UBCMFͰ্ॻ͖ w EJTQMBZqFYͷࢦఆΛ*&ҎԼͰ͸EJTQMBZJOMJOFCPY UBCMF Ͱ্ॻ͖ w தԝἧ͑ɺԼἧ͑ɺࠨӈۉ౳ׂ෇ɺٯॱͷϨΠΞ΢τͳͲ ͸EJTQMBZJOMJOFCMPDLͰ্ॻ͖ͤ͞Δ͜ͱͰରԠ w

    ࢠཁૉͷߴ͞ἧ͑ɺΧϥϜαΠζͷࣗಈۉҰԽͳͲ͸ EJTQMBZUBCMFͰ্ॻ͖ͤ͞Δ͜ͱͰରԠ 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Ͱެ։ͯ͠஌ݟΛγΣΞ͍ͯͩ͘͠͞ɻε λʔ͚ͭ·͢