Slide 1

Slide 1 text

Collaborative Style Syntax

Slide 2

Slide 2 text

Nick Hehr • empathetic community member • front-end developer at Namely • Hoodie & Tessel Contributor • Mustached Human • @hipsterbrown

Slide 3

Slide 3 text

OVERVIEW • What is “functional” CSS? • Why is it nice at Namely? • Moving Forward

Slide 4

Slide 4 text

What is “functional” CSS?

Slide 5

Slide 5 text

Functional CSS is… • Immutable • Composable • Clearly Named • Flexible

Slide 6

Slide 6 text

Immutable

Slide 7

Slide 7 text

http:/ /csswizardry.com/2015/03/immutable-css/

Slide 8

Slide 8 text

http:/ /johnotander.com/immutable-css/

Slide 9

Slide 9 text

Composable

Slide 10

Slide 10 text

https:/ /github.com/mrmrs/css-uncut

Slide 11

Slide 11 text

https:/ /github.com/mrmrs/css-uncut

Slide 12

Slide 12 text

Clearly Named

Slide 13

Slide 13 text

http:/ /www.basscss.com/

Slide 14

Slide 14 text

http:/ /www.basscss.com/docs/white-space/#margins

Slide 15

Slide 15 text

http:/ /www.basscss.com/docs/colors/

Slide 16

Slide 16 text

http:/ /tachyons.io/

Slide 17

Slide 17 text

Flexible

Slide 18

Slide 18 text

http:/ /www.basscss.com/customize/

Slide 19

Slide 19 text

http:/ /tachyons.io/

Slide 20

Slide 20 text

Why is it nice at Namely?

Slide 21

Slide 21 text

GOALS • Consistency • Performance • Documentation

Slide 22

Slide 22 text

CONSISTENCY

Slide 23

Slide 23 text

Consistency • Shared Jargon (i.e. “what’s a popover?”) • Sensible Defaults • Abstracted Values (rems, hex colors, etc)

Slide 24

Slide 24 text

PERFORMANCE

Slide 25

Slide 25 text

http:/ /cssstats.com/stats?url=https%3A%2F%2Fnamely.namely.com

Slide 26

Slide 26 text

1.04 MB === A LOT OF CODE

Slide 27

Slide 27 text

http:/ /cssstats.com/stats?url=http%3A%2F%2Ftheguardian.com&name=The%20Guardian

Slide 28

Slide 28 text

http:/ /cssstats.com/stats?url=http%3A%2F%2Fetsy.com&name=Etsy

Slide 29

Slide 29 text

http:/ /cssstats.com/stats?url=http%3A%2F%2Fgithub.com&name=GitHub

Slide 30

Slide 30 text

http:/ /cssstats.com/stats?link=http%3A%2F%2Fnamely.surge.sh%2Fapp.css

Slide 31

Slide 31 text

DOCUMENTATION

Slide 32

Slide 32 text

Documentation • Self-Documenting (nearly) • Simpler Codebase • Finite

Slide 33

Slide 33 text

http:/ /www.lightningdesignsystem.com/design/layout

Slide 34

Slide 34 text

Moving Forward

Slide 35

Slide 35 text

Namely UI

Slide 36

Slide 36 text

Namely UI • Flexible set of React components • Library of functional CSS utilities • Self-Documenting (nearly) via static site

Slide 37

Slide 37 text

https:/ /github.com/namely/styleguide

Slide 38

Slide 38 text

http:/ /namely.surge.sh/

Slide 39

Slide 39 text

Thank You