CSS, Interfaces & What We Can Do About It

A talk about alternative layouting techniques, namely constraint based layouting given at up.front.ug.

Links:

- Constraint Cascading Style Sheets for the Web ’99 — http://www.cs.washington.edu/research/constraints/web/ccss-uwtr.pdf
- Cocoa Auto Layout Intro at WWDC ’11 — https://developer.apple.com/videos/wwdc/2011/
- Cocoa Auto Layout Documentation —https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html
- Visual Format Language Documentation (VFL) — https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage/VisualFormatLanguage.html#//apple_ref/doc/uid/TP40010853-CH3-SW1
- GridStyleSheets (GSS) Site — http://gridstylesheets.org/
- GSS VFL documentation — http://gridstylesheets.org/guides/vfl/
- Angular-Autolayout — http://thenikso.github.io/angular-autolayout/
- Overconstrained Mailinglist — https://groups.google.com/forum/?fromgroups#!topic/overconstrained/
- Cassowary.js — https://github.com/slightlyoff/cassowary.js

Transcript

1. CSS, Interfaces
   and what we can do about it
   up.front.ug
   10th June 2014
   Martin Klepsch
   

   View Slide

2. View Slide

3. CSS
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. “Interfaces are not
   just documents.”
   

   View Slide

9. Don’t get me wrong
   

   View Slide

10. Xcode & Cocoa
    

    View Slide

11. Layout In Cocoa
    With Auto Layout
    

    View Slide

12. Layout In Cocoa
    With Auto Layout
    

    View Slide

13. Constraints
    continue[right] + 5 == window[right]
    continue[bottom] + 5 == window[bottom]
    General form looks like this
    m * v + n == y
    

    View Slide

14. Constraints
    Constraints must be linear, which means you can't
    divide or multiply variables like continue[width]
    

    View Slide

15. Constraints
    Constraints can have various strengths so a designer
    is able to influence which constraints will remain
    unfulfilled first.
    

    View Slide

16. View Slide

17. CSS
    body {
    padding-left: 200px;
    }
    #nav {
    position: fixed;
    width: 200px;
    height: 100%;
    top: 0;
    left: 0;
    }
    

    View Slide

18. Let’s use some
    constraints
    nav[left] == window[left]
    content[right] == window[right]
    nav[height] == window[height]
    content[height] == window[height]
    nav[width] == 200;
    content[left] == nav[right]
    

    View Slide

19. “Sounds cool but
    what about the
    web?!”
    Most of You, I guess
    

    View Slide

20. Constraint based
    layouting and the
    web
    

    View Slide

21. Back in 1999
    

    View Slide

22. View Slide

23. Center anything with two lines
    modal[center-x] == window[center-x]
    modal[center-y] == window[center-y]
    Visual Formatting Language
    @horizontal |-10-[#b1]-10-[#b2]-10-[#b3]-10-[#b4]-10-| in(#panel);
    @horizontal button in(#panel) gap(10);
    A Short Demo...
    

    View Slide

24. View Slide

25. Closing thoughts
    “Programs should be written for people to read, and
    only incidentally for machines to execute.”
    Hal Abelson
    

    View Slide

26. Thank you
    Martin Klepsch
    

    View Slide

27. Links 1/2
    » Constraint Cascading Style Sheets for the Web ’99
    » Cocoa Auto Layout Intro at WWDC ’11
    » Cocoa Auto Layout Documentation
    » Visual Format Language Documentation (VFL)
    » GridStyleSheets (GSS) Site
    » GSS VFL documentation=
    » Angular-Autolayout
    

    View Slide

28. Links 2/2
    » Overconstrained Mailinglist
    » Cassowary.js
    

    View Slide