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
最近やったCSSの設計と やってみて感じたこと
Search
Daisuke Konishi
December 02, 2017
Programming
0
170
最近やった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
複数ソースから集めて作る自分サイト
dkonishi
0
13
django-import-export で マスターデータ管理生活
dkonishi
0
210
Kansai WordPress Meetup@京都 近況とこれから
dkonishi
0
92
大阪Pythonの会の紹介@Python Kansai #01
dkonishi
1
160
Netlify Functions 叩き初め
dkonishi
0
170
Gatsby.jsでWordPressのフロントエンドを作る
dkonishi
0
280
AWS LambdaからSlackに ○○を送る
dkonishi
0
1.2k
Bench京都怖くない
dkonishi
0
180
WordBench京都への関わりと何を得たか
dkonishi
0
130
Other Decks in Programming
See All in Programming
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
CSC307 Lecture 05
javiergs
PRO
0
210
CSC307 Lecture 08
javiergs
PRO
0
330
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
Temporalを取り巻く仕様を整理する
sajikix
0
120
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Clear Off the Table
cherdarchuk
89
320k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Ruby is Unlike a Banana
tanoku
96
10k
Building an army of robots
kneath
301
42k
Designing with Data
zakiwarfel
96
5k
Teambox: Starting and Learning
jrom
130
8.6k
Making Projects Easy
brettharned
111
5.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
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 ͋͘·Ͱϕʔε ྟػԠมʹରԠ