Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
最近やったCSSの設計と やってみて感じたこと
Daisuke Konishi
December 02, 2017
Programming
0
120
最近やったCSSの設計と やってみて感じたこと
【CSS】Meetup Kansai U30 #2 #u30_kansai これまでの組み方とこれからどうしよっかって考えてる話
Daisuke Konishi
December 02, 2017
Tweet
Share
More Decks by Daisuke Konishi
See All by Daisuke Konishi
django-import-export で マスターデータ管理生活
dkonishi
0
130
Kansai WordPress Meetup@京都 近況とこれから
dkonishi
0
44
大阪Pythonの会の紹介@Python Kansai #01
dkonishi
1
110
Netlify Functions 叩き初め
dkonishi
0
93
Gatsby.jsでWordPressのフロントエンドを作る
dkonishi
0
240
AWS LambdaからSlackに ○○を送る
dkonishi
0
990
Bench京都怖くない
dkonishi
0
110
WordBench京都への関わりと何を得たか
dkonishi
0
83
WordPress.comで数ヶ月 ブログを書いてみてわかったこと
dkonishi
0
1.5k
Other Decks in Programming
See All in Programming
GraphQL+KMM開発でわかったこと / What we learned from GraphQL+KMM development
kubode
0
130
2022 FrontEnd Training
mixi_engineers
1
280
既存画面の Jetpack Composeでの書き換え: FAANSでの事例紹介 / Case study of rewriting existing screens with Jetpack Compose
horie1024
0
140
How useEvent would change our applications
koba04
1
1.7k
TechFeed Conference 2022 - Kotlin Experimental
jmatsu
0
810
Explore Java 17 and beyond
josepaumard
3
650
From Java 11 to 17 and beyond
josepaumard
0
300
スモールチームがAmazon Cognitoでコスパよく作るサービス間連携認証
tacke_jp
2
660
microCMS × imgixを活用して品質とレスポンスを両立したポートフォリオサイトを作成した話
takehitogoto
0
420
Cloud-Conference-Day-Spring Cloud + Spring Webflux: como desenvolver seu primeiro microsserviço reativo em Java?
kamilahsantos
1
120
プログラミングを勉強したいと言われたら
yuba_4
0
410
Micro Frontends with Module Federation: Beyond the Basics @codecrafts2022
manfredsteyer
PRO
0
110
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
85
3.9k
Happy Clients
brianwarren
89
5.5k
The Invisible Side of Design
smashingmag
289
48k
The Mythical Team-Month
searls
208
39k
What's new in Ruby 2.0
geeforr
336
30k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Why Our Code Smells
bkeepers
PRO
324
54k
Mobile First: as difficult as doing things right
swwweet
212
7.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
12k
Support Driven Design
roundedbygravity
86
8.4k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Web development in the modern age
philhawksworth
197
9.3k
Transcript
Meetup Kansai U30 #2 ࠷ۙͬͨCSSͷઃܭͱ ͬͯΈͯײͨ͜͡ͱ Daisuke KONISHI
Meetup Kansai U30 #2 Daisuke KONISHI @skd_nw coroutine inc. /
WebΤϯδχΞ WordBenchژ ϞσϨʔλʔ CSSϑϨϯζ
Meetup Kansai U30 #2 ࠷ۙͬͨ͜ͱΛॻ͍ͯ·͢
Meetup Kansai U30 #2 ࠷ۙస৬͠·ͨ͠ ϚʔΫΞοϓΤϯδχΞ ɹˣ WebΤϯδχΞ (WebϑϩϯτΤϯυଟΊ αʔόʔαΠυษڧத)
Meetup Kansai U30 #2 ͜Ε·Ͱ • தʙେنͷίʔϙϨʔταΠτ • ޙෳճߋ৽༗ΓͷLP ɹͷ࣮Λͯ͠·ͨ͠
Meetup Kansai U30 #2 ͜Ε·Ͱ • σβΠϯʹରԠ͢ΔͨΊϑϧεΫϥον • CSSϝλݴޠSassΛ༻ •
FLOCSS + Atomic Design • Codekit -> gulp(node-sass)
Meetup Kansai U30 #2 σβΠϯʹରԠ͢ΔͨΊ ϑϧεΫϥον σβΠφʔ͕දݱ͍ͨ͠ܗʹσβΠϯ͠ɺͦΕΛ ࣮͢Δελϯε ※σβΠφʔͳΜͱͳ࣮͘Λ͔͍ͬͯΔ ※࣮Ͱ͖Δ͔ෆ҆ͳͱ͖૬ஊ͢Δ(ਓ͍ͨ)
͜Ε·Ͱ
Meetup Kansai U30 #2 CSSϝλݴޠSassΛ༻ ࢿྉͷ๛͞ͱशಘͷ͔͢͠͞ΒSassΛ༻ ͜Ε·Ͱ
Meetup Kansai U30 #2 FLOCSS + Atomic Design • FLOCSSͷϨΠϠʔͷ͚ํ͕ྑ͔ͬͨ
https://github.com/hiloki/flocss • component ϨΠϠʔ͕ΒΈ͗͢ΔͨΊ Atomic DesignͷࢥͰׂ • BEMʹΑΔ֊ߏͷࢹ֮Խ ͜Ε·Ͱ
Meetup Kansai U30 #2 Codekit ͔Β gulp(node-sass) • GUIͰઃఆͰ͖ΔͨΊָͱ͍͏
• git Ͱ branch ΛΓସ͑Δʹ config ϑΝΠϧ͕ ߋ৽͞ΕΔ • ֎͢ΔࡍʹΞϓϦඇॴ࣋ => Node.js ͰແঈͰ୭Ͱ࡞ΕΔڥʹ ͜Ε·Ͱ
Meetup Kansai U30 #2 ͜Ε͔Βͷ࣮Ͱߟ͑Δ͜ͱ • WebαΠτͰͳ͘WebγεςϜͷ࣮ • ظతͳӡ༻ •
ϝϯόʔͷCSSशख़Λߟྀ • ݟͨΑΓ·ͣػೳʹϦιʔεΛׂ͘
Meetup Kansai U30 #2 ͜Ε͔Βͷ࣮(ߟ͑த) • CSSϑϨʔϜϫʔΫΛ࠾༻ • ઃܭFLOCSSϕʔε
Meetup Kansai U30 #2 CSSϑϨʔϜϫʔΫΛ࠾༻ • υΩϡϝϯτ͕͋ΔͷΛ༻͢Δ ͜ͱͰޙʑͷฤूΛΓ͘͢ • Foundation,
UI Kit, Bluma
Meetup Kansai U30 #2 ઃܭFLOCSSϕʔεʹ • Ҏલ·ͰͷߏͰΓ͖ΕΔਓ͕গͳ͍ => ·ͣFLOCSS(+BEM)ʹ׳ΕΔ •
ͦͦ͜Ε·ͰͷߏͰ·ͳ͖Ό͍ ͚ͳ͍ͷ͕গͳͦ͏ʁ
Meetup Kansai U30 #2 ͋͘·Ͱϕʔε ྟػԠมʹରԠ