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
72

Stick Bootstrap into Polymer

Avatar for takanorip

takanorip

April 23, 2018
Tweet

More Decks by takanorip

See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
340
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3.6k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
140
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
900
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
14
7.3k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
4
2k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
500
Ubieとアクセシビリティのこれからを考える
Avatar for takanorip takanorip
0
460
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
Avatar for takanorip takanorip
2
3.9k

Other Decks in Technology

See All in Technology
Sansanのデータプロダクトマネジメントのアプローチ
Avatar for SansanTech sansantech
PRO
0
230
Four Keysから始める信頼性の改善 - SRE NEXT 2025
Avatar for ozaki-kota ozakikota
0
210
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
Avatar for kazeburo kazeburo
1
450
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for jackal5647 aaguide
0
500
Claude Code に プロジェクト管理やらせたみた
Avatar for 佐藤圭吾 unson
8
4.9k
TableauLangchainとは何か？
Avatar for yuta cielo1985
1
150
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
Avatar for Hiroka Zaitsu zaimy
1
310
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for cassowary3740 supportflight
1
120
LLM時代の検索
Avatar for shibuiwilliam shibuiwilliam
2
640
SREのためのeBPF活用ステップアップガイド
Avatar for Sohei Iwahori egmc
2
900
microCMSではじめるAIライティング
Avatar for himaratsu himaratsu
0
120
AWS CDKの仕組み / how-aws-cdk-works
Avatar for k.goto gotok365
10
890

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
281
13k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.6k

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)