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

Stick Bootstrap into Polymer

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for takanorip takanorip
April 23, 2018
Technology
83
0

Stick Bootstrap into Polymer

Avatar for takanorip

takanorip

April 23, 2018

More Decks by takanorip

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

Other Decks in Technology

See All in Technology
10サービス以上のメール到達率改善を地道に継続的に進めている話 / Continue to improve email delivery rates across multiple services
Avatar for Takashi Yamaguchi yamaguchitk333
4
270
もっとコンテンツをよく構造化して理解したいので、LLM 時代こそ Taxonomy の設計品質に目を向けたい〜！
Avatar for MasatoMasaMasa morinota
0
240
AI時代に越境し、 組織を変えるQAスキルの正体 / QA Skills for Transforming an Organization
Avatar for miisan mii3king
5
4.2k
Shiny New Tools Won't Fix Your Problem
Avatar for Trisha Gee trishagee
1
120
AIの揺らぎに“コシ”を与える階層化品質設計
Avatar for ICKX ickx
0
270
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
8k
新卒エンジニア研修、ハンズオンの設計における課題と実践知/ #tachikawaany
Avatar for Ichiro Nishiuma nishiuma
2
140
会社説明資料｜株式会社ギークプラス ソフトウェア事業部
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
210
Building a Study Buddy AI Agent from Scratch: From Passive Chatbots to Autonomous Systems
Avatar for Patrick Eichler itchimonji
0
150
The 7 pitfalls of AI
Avatar for Uwe Friedrichsen ufried
0
200
Vision Banana: Image Generators are Generalist Vision Learners
Avatar for Kazuyuki Miyazawa kzykmyzw
0
340
React 19×Rustツール 進化の「ズレ」を設計で埋める
Avatar for Hayashi Takao remrem0090
1
110

Featured

See All Featured
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
1
33
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
260
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
740
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
120
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.1k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.7k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
340
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.2k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
220

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)