Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Stick Bootstrap into Polymer

Avatar for takanorip takanorip
April 23, 2018
Technology
0
74

Stick Bootstrap into Polymer

Avatar for takanorip

takanorip

April 23, 2018
Tweet

More Decks by takanorip

See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
580
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
530
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
170
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
950
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.1k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
510
Ubieとアクセシビリティのこれからを考える
Avatar for takanorip takanorip
0
480

Other Decks in Technology

See All in Technology
AIとともに歩んでいくデザイナーの役割の変化
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
470
新規事業におけるGORM+SQLx併用アーキテクチャ
Avatar for hacomono Inc. hacomono
PRO
0
330
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
Avatar for Kenichi Kambara korodroid
2
990
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
Avatar for Gota gotalab555
10
16k
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.2k
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
8.8k
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう！ / Let's build an OAuth protected remote MCP server based on AWS managed services
Avatar for 株式会社カミナシ kaminashi
3
350
初めてのDatabricks Apps開発
Avatar for Takaaki Yayoi taka_aki
1
140
能登半島地震において デジタルができたこと・できなかったこと
Avatar for Masakatsu Sugii ditccsugii
0
250
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
310
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3k
AWSでAgentic AIを開発するための前提知識の整理
Avatar for Kiminori Yokoi nasuvitz
2
190

Featured

See All Featured
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
910
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.7k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
35
6.1k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k

Transcript

  1. Stick Bootstrap into Polymer Takanori Oki
 @Web Components Cafe 2018/04/23

  2. Self-Introduction • Takanori Oki ( @takanorip ) • SmartDrive Inc.

    • Frontend Developer • Nuxt.jsɺReactɺPolymer… • Love fonts
  3. None

  4. I want to use CSS Frameworks for example Bootstrap

  5. granite-bootstrap • Wrapping of Bootstrap CSS as Polymer shared styles

    modules • Replace and Update polymer-bootstrap
  6. None
  7. None
  8. None
  9. None

  10. If you write this way, the layout collapses…

  11. Solution?

  12. None
  13. None

  14. DEMO

  15. It is difficult to thinking about CSS in Polymer…

  16. Generate style modules • Use granite-css-modularizer • A small node

    script to generate Polymer style modules from CSS files

  17. Publicity

  18. I published a book about Web Font!

  19. None
  20. None
  21. None

  22. Thank you! (font : Metropolis)