Bootstrapの簡単カスタマイズ

Bootstrap-sassをnode-sassを使用して簡単にカスタマイズする方法について

Transcript

1. Bootstrapͷ
 ؆୯ΧελϚΠζ ໦ଜ ݑن
2. ࣗݾ঺հ • ໦ଜ ݑن (͖ΉΒ ͔ͣͷΓ) • ϑϦʔϥϯε5೥໨ • ۀ຿ΞϓϦ։ൃ • JavaScript, C#, Java, Objective-C, PHP 
3. Bootstrapͱ͸ʁ • Twitter͕ެ։͍ͯ͠ΔCSSϑϨʔϜϫʔΫ • HTMLͰద੾ʹclassࢦఆ͢Δ͜ͱͰWebσβ Πϯͷ஌ࣝͳ͠ʹιϨφϦͷݟͨ໨ʹͳΔ • http://getbootstrap.com/ 
4. ͳΜͰΧελϚΠζ͢Δͷʁ • ૉͷ··Ͱ࢖༻͢ΔͱΈΜͳಉ͡ݟͨ໨ʹ 
5. bootstrap-sass • ར༻ऀ͕ΧελϚΠζͰ͖ΔΑ͏ʹɺ.scss ϑΝΠϧΛؚΊͨϓϩδΣΫτ • https://github.com/twbs/bootstrap-sass 
6. Sassͱ͸ • CSSϝλݴޠͷͻͱͭ • http://sass-lang.com/ 
7. CSSϝλݴޠͱ͸ʁ • ίʔσΟϯάޮ཰ΛߴΊΔͨΊɺ௨ৗͷCSS ʹҎԼͷΑ͏ͳػೳΛ௥Ճͨ͠ݴޠͷ͜ͱ ม਺ ηϨΫλͷωετ ϑΝΠϧͷ෼ׂ
   ϞδϡʔϧԽJNQPSUػೳ NJYJO
   ؔ਺ͷΑ͏ͳػೳ ࢛ଇԋࢉ ੍ޚߏจ 
8. ୅දతͳCSSϝλݴޠ • Sass (SCSS) • less • Stylus • PostCSS 
9. ΧελϚΠζͷखॱ • Node.js؀ڥ͕੔͍ͬͯΕ͹؆୯ 
10. node-sassΛ࢖༻ 1. bootstrap-sassΛμ΢ϯϩʔυ
 npm install bootstrap-sass 2. node-sassΛμ΢ϯϩʔυ
 npm install -g node-sass 3. scssϑΝΠϧΛϓϦίϯύΠϧ
 node-sass node_modules/bootstrap-sass/assets/stylesheets/ _bootstrap.scss dist/css/bootstrap.min.css --output-style compressed --source-map dist/css/bootstrap.min.css.map 
11. ΧελϚΠζ༻ϓϩδΣΫτ • https://github.com/Kazunori-Kimura/bootstrap- customize-base 1. ϓϩδΣΫτΛμ΢ϯϩʔυ
 git clone git@github.com:Kazunori-Kimura/ bootstrap-customize-base.git 2. ࣮ߦ͢Δ͚ͩ
 npm start 
12. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ 2017೥΋ΑΖ͓͘͠ئ͍͍ͨ͠·͢