Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Self-Introduction • Takanori Oki ( @takanorip ) • SmartDrive Inc. • Frontend Developer • Nuxt.jsɺReactɺPolymer… • Love fonts

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

I want to use CSS Frameworks for example Bootstrap

Slide 5

Slide 5 text

granite-bootstrap • Wrapping of Bootstrap CSS as Polymer shared styles modules • Replace and Update polymer-bootstrap

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

If you write this way, the layout collapses…

Slide 11

Slide 11 text

Solution?

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

DEMO

Slide 15

Slide 15 text

It is difficult to thinking about CSS in Polymer…

Slide 16

Slide 16 text

Generate style modules • Use granite-css-modularizer • A small node script to generate Polymer style modules from CSS files

Slide 17

Slide 17 text

Publicity

Slide 18

Slide 18 text

I published a book about Web Font!

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Thank you! (font : Metropolis)