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

Stick Bootstrap into Polymer

Avatar for takanorip takanorip
April 23, 2018
Technology
84
0

Stick Bootstrap into Polymer

Avatar for takanorip

takanorip

April 23, 2018

More Decks by takanorip

See All by takanorip
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
7
5.4k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
7
1.4k
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.9k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
1.3k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
830
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
5.3k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
310
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.9k

Other Decks in Technology

See All in Technology
ホームラボ紹介
Avatar for 世良泰明 y_sera15
0
180
20260807_第6回_関東kaggler会LT_claw系bot xangiと始める、"寂しくない" kaggle
Avatar for suguuuuuすぐー sugupoko
0
290
LanceDB入門
Avatar for Tomoko Uchida mocobeta
8
550
ボトムアップ文化が強い組織で セキュリティをどう根付かせていくかの現在進行形の話 / Making Security Stick in a Bottom-Up Organization
Avatar for Takashi Yamaguchi yamaguchitk333
0
230
強化学習「理論」入門
Avatar for Etsuji Nakai enakai00
3
3.6k
Goでデータパイプラインを作ろう
Avatar for SansanTech sansantech
PRO
1
470
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
3.2k
今こそ聞きたいソフトウェア設計　ドメイン駆動設計再入門
Avatar for 増田 亨 masuda220
PRO
17
7.4k
攻撃と防御で学ぶAI時代のプロダクトセキュリティ演習
Avatar for Recruit recruitengineers
PRO
9
2.9k
社内の7割が使うデータ基盤を、 データチーム2人で回すためにやったこと
Avatar for KOH koh_yoshi
4
1.4k
Head First モブプログラミング / Head First Mobprogramming
Avatar for TAKAKING22 takaking22
10
12k
AI-DLC実践録_フルサイクル開発への挑戦
Avatar for Miyuki miyuc
0
150

Featured

See All Featured
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
1.1k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
250
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
170
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
540
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
280
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
250
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
320
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
250
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
470

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)