Tweet
Tweet

Slide 1

Slide 1 text

5 TIPS FOR STYLING IN REACT 1 2 3 4 5

Slide 2

Slide 2 text

AVOID NESTED SELECTORS 1 2 3 4 5

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

BEGUN, THE SPECIFICITY WAR HAS

Slide 5

Slide 5 text

KEEP LAYOUT WITHIN COMPONENTS 1 2 3 4 5

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

AVOID MAGIC NUMBERS 1 2 3 4 5

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

MAKE BREAKPOINTS WHEN IT LOOKS WEIRD (DON’T MANAGE GLOBAL BREAKPOINTS) 1 2 3 4 5

Slide 13

Slide 13 text

635 PX t HOME SHOP GALLERY ABOUT CONTACT 600 PX / 900 PX / 1200 PX / 1800 PX THE 100% CORRECT WAY TO DO CSS BREAKPOINTS

Slide 14

Slide 14 text

DON’T
 EXTEND
 STYLES 1 2 3 4 5 (PLEASE REPEAT YOURSELF)

Slide 15

Slide 15 text

SASS STYLED COMPONENTS

Slide 16

Slide 16 text

COINCIDENCE

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

LEARN
 SIBLING SELECTORS 1 2 3 4 5 6 7 8

Slide 19

Slide 19 text

REACT • ONCLICK • HANDLE TAB KEY • HANDLE SPACE BAR • HANDLE ACCESSIBILITY CSS

Slide 20

Slide 20 text

+ > ~ * [ ]

Slide 21

Slide 21 text

USE BETTER EASINGS 1 2 3 4 5 6 7 8

Slide 22

Slide 22 text

linear transition-timing-function border-color box-shadow color opacity transform: rotate cubic-bezier() transform: scale translate MATERIAL.IO / DESIGN / MOTION / SPEED.HTML#EASING animation-timing-function

Slide 23

Slide 23 text

USE A
 RESPONSIVE TYPE SCALE 1 2 3 4 5 6 7 8

Slide 24

Slide 24 text

8 10 12 14 16 20 24 28 36 48

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

“RESPONSIVE TYPE SCALE”

Slide 28

Slide 28 text

THANKS! 1 2 3 4 5 @_DREWPOWERS