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
470
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.1k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
170
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
930
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.4k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
500
Ubieとアクセシビリティのこれからを考える
Avatar for takanorip takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
Avatar for takanorip takanorip
2
4k

Other Decks in Technology

See All in Technology
これでもう迷わない！Jetpack Composeの書き方実践ガイド
Avatar for ZOZO Developers zozotech
PRO
0
1.1k
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
Avatar for ヤマダ（北野） yamada_r
2
120
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
Avatar for oracle4engineer oracle4engineer
PRO
0
110
2025/09/16 仕様駆動開発とAI-DLCが導くAI駆動開発の新フェーズ
Avatar for オカムラ masahiro_okamura
0
120
実践！カスタムインストラクション＆スラッシュコマンド
Avatar for puku0x puku0x
0
520
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
Avatar for K.Mitsuhashi kaz3284
1
220
Snowflake×dbtを用いたテレシーのデータ基盤のこれまでとこれから
Avatar for Sagara sagara
0
120
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
Avatar for sh_fk2 sh_fk2
3
460
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
Avatar for Kento Kimura aoto
PRO
1
480
人工衛星のファームウェアをRustで書く理由
Avatar for KOBA789 koba789
15
8.2k
データ分析エージェント Socrates の育て方
Avatar for na0 na0
6
2.1k
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
Avatar for AEON aeonpeople
1
230

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
850
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
580
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.7k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k

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)