1 of 59

CSS as

Bytecode

@rtfeldman

2 of 59

3 of 59

4 of 59

5 of 59

Why so much frustration?

6 of 59

CSS was never intended to create

user interfaces

7 of 59

The Languages That

Almost Became CSS

Zack Bloom

8 of 59

1991

content only

9 of 59

AUTHORS create content using HTML

END USERS style it using stylesheets

Separating Content and Presentation

10 of 59

PWP, 1993

(BODY fontSize=normal� BGColor=white� FGColor=black� (H1 fontSize=largest� BGColor=red� FGColor=white)�)

11 of 59

FOSI

</e-i-c>�</outspec>

12 of 59

DSSSL

(define (create-heading heading-font-size)� (make paragraph� font-size: heading-font-size� font-weight: 'bold))��(element h1 (create-heading 24pt))�(element h2 (create-heading 18pt))

13 of 59

“Style sheets are an artificial construct inflicted on us because of the whole non-presentation philosophy we've been using”

—Mosaic browser creator, 1994

14 of 59

CSS, 1996

End users can style content!

body {

vertical-align: middle;

}

15 of 59

fast forward 20 years...

The Web has become the biggest

user interface

delivery platform in history

16 of 59

designed for

used for

creators styling content

building user interfaces

end users styling

the content they read

Why would articles need content to be horizontally and vertically centered?

17 of 59

18 of 59

1995

basic realtime interactivity

gigantic multibillion dollar webapps

19 of 59

keep JS semantics

no relation to JS

Compile-to-JS

elm

20 of 59

keep CSS semantics

no relation to CSS

style-elements

Compile-to-CSS

21 of 59

style-elements

22 of 59

style-elements

Compiles to JS, CSS, and DOM

Written in Elm

Clean-slate semantics

23 of 59

style-elements Design Goals

Create maintainable user interfaces

Long-term cross-platform support

Have one compatibility table

24 of 59

new set of layout primitives

25 of 59

clear

your

mind

26 of 59

1

2

column

27 of 59

1

row

28 of 59

1

row

2

3

29 of 59

row

30 of 59

row

1

2

3

31 of 59

spacing

32 of 59

spacing

33 of 59

spacing

34 of 59

spacing

35 of 59

column

1

2

3

36 of 59

padding

37 of 59

below

38 of 59

1

2

column

39 of 59

1

row

2

3

40 of 59

row

41 of 59

column

42 of 59

below

43 of 59

row? column? below?

44 of 59

row? column? below?

45 of 59

alignLeft

center

alignRight

width (fillPortion 1)

46 of 59

within

47 of 59

Responsiveness

48 of 59

if viewportWidth < 640 then

menu center

Responsiveness

49 of 59

if viewportWidth < 640 then

menu center

else if viewportWidth < 1024 then

Responsiveness

50 of 59

if viewportWidth < 640 then

menu center

else if viewportWidth < 1024 then

List.append [ logo ] (menu alignRight)

Responsiveness

51 of 59

if viewportWidth < 640 then

menu center

else if viewportWidth < 1024 then

List.append [ logo ] (menu alignRight)

else

List.append [ logo, tagline ] (menu alignRight)

Responsiveness

52 of 59

Accessibility

Alt text for images is a required argument

53 of 59

row

column

below/within

spacing

padding

alignment

fillPortion

Responsive!

54 of 59

Designed for maintainability

How should deeply nested layouts interact?

How can we make consistent APIs?

“If it compiles, it styles”

55 of 59

early adopter:

25K → 15K

lines of code

CAUTION: Massive effort, under heavy development!

56 of 59

Clean-Slate Semantics

100% separate package ecosystem, no npm

no runtime exceptions in 2 years and 200,000 LoC

semantic versioning automatically enforced

elm

57 of 59

Want to learn more?

Friday Workshop!

GUIDE

guide.elm-lang.org

SLACK

elmlang.herokuapp.com

58 of 59

CSS was never intended

to create user interfaces

...but we can build a new foundation

by using CSS as bytecode!

59 of 59

@rtfeldman

github.com/rtfeldman/style-elements-demo