Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Bootstrap4のカスタマイズ
Search
Kazunori-Kimura
March 17, 2018
Technology
0
210
Bootstrap4のカスタマイズ
Bootstrap4の紹介とCSS、JSのカスタマイズ方法について
Kazunori-Kimura
March 17, 2018
Tweet
Share
More Decks by Kazunori-Kimura
See All by Kazunori-Kimura
path-parser
kazunorikimura
0
320
objectのcloneを行う/How to clone of the object in js
kazunorikimura
0
330
クライアントサイドで大きなデータを扱うときのお話/Web Worker & IndexedDB
kazunorikimura
0
570
How freelance programmer works
kazunorikimura
0
89
moment.js
kazunorikimura
0
59
sequelize.pdf
kazunorikimura
0
500
Toward the world of "ready player one"
kazunorikimura
0
63
npmの便利なパッケージ: forever, winser
kazunorikimura
0
880
npmの便利なパッケージ: Jest
kazunorikimura
0
97
Other Decks in Technology
See All in Technology
どこよりも遅めなWinActor Ver.7.5.0 新機能紹介
tamai_63
0
210
サプライチェーン攻撃に備える
ryunen344
0
290
プログラム検証入門
riru
6
870
Functional TypeScript
naoya
11
4.8k
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
310
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
390
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
46k
Google CloudのLLM活用の選択肢を広げるVertex AIのパートナーモデル
nayuts
0
130
Next.js のページ遷移を全力で止める
ypresto
7
3.3k
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
130
Cloud Run と GitHub Template Repository による軽量なアプリケーションプラットフォーム/ #nikkei_tech_talk
nikkei_engineer_recruiting
0
110
たった1人からはじめる【Agile Community of Practice】~ソース原理とFearless Changeを添えて~
ktc_corporate_it
1
480
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
The Cult of Friendly URLs
andyhume
76
6k
Faster Mobile Websites
deanohume
304
30k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Being A Developer After 40
akosma
84
590k
Designing the Hi-DPI Web
ddemaree
278
34k
Fireside Chat
paigeccino
31
2.9k
Designing for humans not robots
tammielis
248
25k
A designer walks into a library…
pauljervisheath
201
24k
Transcript
Bootstrap4ͷΧελ ϚΠζ 2018-03-17 ଜ ݑن
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
2018-01-18ʹBootstrap4͕ϦϦʔε
લόʔδϣϯͱൺֱͯ͠ ΧελϚΠζ͕ඇৗʹΓ͘͢ͳͬͨ • Sassͷ࠾༻ • JSϑΝΠϧͷػೳ͝ͱͷׂ ʢ͜Εલ͔Βʁʣ
Πϯετʔϧํ๏ $ npm install --save-dev bootstrap
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
CSSͷΧελϚΠζ SassʹΑͬͯॻ͔Ε͍ͯΔ લόʔδϣϯlessͩͬͨͷͰΫη͕͋ͬͨ
Sassͱ http://sass-lang.com/ Sass is the most mature, stable, and powerful
professional grade CSS extension language in the world. ˠ$44֦ுݴޠ
SassͱSCSS 4BTT DTTͰසग़͢Δηϛίϩϯׅހ ͳͲΛলུ 4$44 DTTͷߏจͦͷ··ʹɺηϨΫλʔ ͷೖΕࢠมͳͲͷػೳΛՃ
SassͱSCSS 4BTT DTTͰසग़͢Δηϛίϩϯׅހ ͳͲΛলུ 4$44 DTTͷߏจͦͷ··ʹɺηϨΫλʔ ͷೖΕࢠมͳͲͷػೳΛՃ
Πϯετʔϧ Node.js൛Λ༻͢Δ $ npm install --save-dev node-sass
ϑΥϧμߏ
ΧελϚΠζͷྫ ༻͢Δ߲ͷΈΠϯϙʔτ src/custom.scss
SCSSΛCSSʹม SCSSϒϥβ͕ղऍͰ͖ͳ͍ͷͰCSSʹม $ npx node-sass src/custom.scss docs/bundle.css
αΠζൺֱ ϑΝΠϧαΠζ͕60KBݮ
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
JavaScriptͷΧελϚΠζ node_module/bootstrap/js/srcʹػೳ͝ͱʹ ׂͯ͠ଘࡏ ECMAScript2017Ͱهड़ jQuery, popper.jsʹґଘ ݁߹ͱτϥϯεύΠϧ͕ඞཁ
ϑΥϧμߏ
ΧελϚΠζྫ src/index.js ඞཁͳػೳͷΈimport
docs/bundle.jsੜͷྲྀΕ WebPackͰෳͷϑΝΠϧΛ݁߹ʢόϯυϧʣ babelͰ݁߹ͨ͠ϑΝΠϧΛτϥϯεύΠϧ
WebPackͷΠϯετʔϧ $ npm install --save-dev webpack webpack-cli
WebPackͷ࣮ߦ $ npx webpack src/index.js --output-path="./tmp" --output-filename="bundle.js" --mode=production tmp/bundle.js͕ੜ
babelͷΠϯετʔϧ $ npm install --save-dev babel-cli babel-preset- env babel-plugin-transform-object-rest-spread
babelͷઃఆ { "presets": ["env"], "plugins": ["transform-object-rest-spread"] } .babelrc
babelͷ࣮ߦ $ npx babel tmp/bundle.js -o docs/bundle.js docs/bundle.js͕ੜ
αΠζൺֱ ϑΝΠϧαΠζ͕86KBݮ
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ