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

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

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

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

Takashi Kitajima

March 18, 2017
Tweet

More Decks by Takashi Kitajima

Other Decks in Programming

Transcript

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

    8PSE1SFTTϓϥάΠϯ
 .881'PSNɺ4NBSU$VTUPN'JFMET  8PSE1SFTTςʔϚ
 )BCBLJSJɺ.JNJ[VLV  4BTT4UZMVT$44ϑϨʔϜϫʔΫ
 #BTJT
  2. 8FC੍࡞ձࣾ γεςϜձࣾ σβΠφʔ ϓϩάϥϚʔ ͞·͟·ͳ σβΠϯςΠετ ίϯϙʔωϯτ දݱ ίʔσΟϯά ͲͷαΠτʹ΋ʮϘλϯʯ͸͋Δ͚Ͳ

    ܗ΋ςΠετ΋શવ͕ͪ͏ͳ σϑΥϧτͷ૷০͕͋ͬͯ΋ͦͷ·· ࢖͑Δ͜ͱͳ͍͠ଧͪফ͢ͷετϨεͩͳ͊͊
  3. '-0$44 w ຊจϨϕϧ w ຊจϨϕϧ w ຊจϨϕϧ w ຊจϨϕϧ w

    ຊจϨϕϧ ! foundation/ # normalizeɺϕʔεελΠϧɺϛοΫεΠϯ౳ ! layout/ # ϔομʔɾϑολʔ౳ϨΠΞ΢τ༻ελΠϧ " object/ʊ ! component/ # ίϯϙʔωϯτ༻ͷελΠϧ ! project/ # ϓϩδΣΫτݻ༗ͷελΠϧ " utility/ # ϔϧύʔɾௐ੔༻ελΠϧ
  4. #BTJT͸ʜ ! core/ # BasisΛߏ੒͢ΔίΞ෦෼ # ! function/ # ؔ਺

    # ! mixin/ # ϛοΫεΠϯ # " abstract/ # ίϯϙʔωϯτΛߏ੒͢ΔϛοΫεΠϯ ! foundation/ # normalizeɺϕʔεελΠϧ ! layout/ʊ " object/ʊ ! component/ # ίϯϙʔωϯτ༻ͷελΠϧ ! project/ʊ " utility/ # ϔϧύʔɾௐ੔༻ελΠϧ
  5. BCTUSBDUͷ۩৅Խ .c-send-btn { @include _btn(); … } .c-caution-btn { @include

    _btn(); … } .c-login-btn { @include _btn(); … }
  6. จࣈαΠζΛج४ʹউखʹܭࢉͤ͞Δʂ @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; } }
  7. จࣈαΠζΛج४ʹউखʹܭࢉͤ͞Δʂ /* margin */ @include _margin-bottom(1); /* padding */ @include

    _padding(.5); /* จࣈαΠζͱͦΕʹԠͨ͡࠷దͳline-height */ @include _font-size-line-height(16px);
  8. EJTQMBZJOMJOFCMPDL UBCMFͰ্ॻ͖ w EJTQMBZqFYͷࢦఆΛ*&ҎԼͰ͸EJTQMBZJOMJOFCPY UBCMF Ͱ্ॻ͖ w தԝἧ͑ɺԼἧ͑ɺࠨӈۉ౳ׂ෇ɺٯॱͷϨΠΞ΢τͳͲ ͸EJTQMBZJOMJOFCMPDLͰ্ॻ͖ͤ͞Δ͜ͱͰରԠ w

    ࢠཁૉͷߴ͞ἧ͑ɺΧϥϜαΠζͷࣗಈۉҰԽͳͲ͸ EJTQMBZUBCMFͰ্ॻ͖ͤ͞Δ͜ͱͰରԠ w qFYCPYͷશͯΛ࠶ݱ͢Δ͜ͱ͸Ͱ͖ͳ͍͕ɺରԠՄೳൣғ ΛΘ্͔ͬͨͰ࢖͑͹͋Δఔ౓࠶ݱͰ͖Δ