Bootstrap4のカスタマイズ

Bootstrap4の紹介とCSS、JSのカスタマイズ方法について

Transcript

1. Bootstrap4ͷΧελ ϚΠζ 2018-03-17 ໦ଜ ݑن
2.  #PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
3.  #PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
4. 2018-01-18ʹBootstrap4͕ϦϦʔε 
5. લόʔδϣϯͱൺֱͯ͠ ΧελϚΠζ͕ඇৗʹ΍Γ΍͘͢ͳͬͨ • Sassͷ࠾༻ • JSϑΝΠϧͷػೳ͝ͱͷ෼ׂ
 ʢ͜Ε͸લ͔Βʁʣ 
6. Πϯετʔϧํ๏  $ npm install --save-dev bootstrap
7.  #PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
8. CSSͷΧελϚΠζ SassʹΑͬͯॻ͔Ε͍ͯΔ લόʔδϣϯ͸lessͩͬͨͷͰΫη͕͋ͬͨ 
9. Sassͱ͸ http://sass-lang.com/ Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. ˠ
   $44֦ுݴޠ 
10. SassͱSCSS  4BTT DTTͰසग़͢Δηϛίϩϯ΍೾ׅހ ͳͲΛলུ 4$44 DTTͷߏจͦͷ··ʹɺηϨΫλʔ ͷೖΕࢠ΍ม਺ͳͲͷػೳΛ௥Ճ
11. SassͱSCSS  4BTT DTTͰසग़͢Δηϛίϩϯ΍೾ׅހ ͳͲΛলུ 4$44 DTTͷߏจͦͷ··ʹɺηϨΫλʔ ͷೖΕࢠ΍ม਺ͳͲͷػೳΛ௥Ճ
12. Πϯετʔϧ Node.js൛Λ࢖༻͢Δ  $ npm install --save-dev node-sass
13. ϑΥϧμߏ੒ 
14. ΧελϚΠζͷྫ  ࢖༻͢Δ߲໨ͷΈΠϯϙʔτ src/custom.scss
15. SCSSΛCSSʹม׵ SCSS͸ϒϥ΢β͕ղऍͰ͖ͳ͍ͷͰCSSʹม׵  $ npx node-sass src/custom.scss docs/bundle.css
16. αΠζൺֱ  ϑΝΠϧαΠζ͕໿60KB࡟ݮ
17.  #PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
18. JavaScriptͷΧελϚΠζ node_module/bootstrap/js/srcʹػೳ͝ͱʹ෼ ׂͯ͠ଘࡏ ECMAScript2017Ͱهड़ jQuery, popper.jsʹґଘ ݁߹ͱτϥϯεύΠϧ͕ඞཁ 
19. ϑΥϧμߏ੒ 
20. ΧελϚΠζྫ src/index.js  ඞཁͳػೳͷΈimport
21. docs/bundle.jsੜ੒ͷྲྀΕ WebPackͰෳ਺ͷϑΝΠϧΛ݁߹ʢόϯυϧʣ babelͰ݁߹ͨ͠ϑΝΠϧΛτϥϯεύΠϧ 
22. WebPackͷΠϯετʔϧ $ npm install --save-dev webpack webpack-cli 
23. WebPackͷ࣮ߦ $ npx webpack src/index.js --output-path="./tmp" --output-filename="bundle.js" --mode=production  tmp/bundle.js͕ੜ੒
24. babelͷΠϯετʔϧ $ npm install --save-dev babel-cli babel-preset- env babel-plugin-transform-object-rest-spread 
25. babelͷઃఆ { "presets": ["env"], "plugins": ["transform-object-rest-spread"] }  .babelrc
26. babelͷ࣮ߦ $ npx babel tmp/bundle.js -o docs/bundle.js  docs/bundle.js͕ੜ੒
27. αΠζൺֱ  ϑΝΠϧαΠζ͕໿86KB࡟ݮ
28.  #PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ