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
3. CSS
8. “Interfaces are not just documents.”
9. Don’t get me wrong
10. Xcode & Cocoa
11. Layout In Cocoa With Auto Layout
12. Layout In Cocoa With Auto Layout
13. Constraints continue[right] + 5 == window[right] continue[bottom] + 5 == window[bottom] General form looks like this m * v + n == y
14. Constraints Constraints must be linear, which means you can't divide or multiply variables like continue[width]
15. Constraints Constraints can have various strengths so a designer is able to influence which constraints will remain unfulfilled first.
17. CSS body { padding-left: 200px; } #nav { position: fixed; width: 200px; height: 100%; top: 0; left: 0; }
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]
19. “Sounds cool but what about the web?!” Most of You, I guess
20. Constraint based layouting and the web
21. Back in 1999
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...
25. Closing thoughts “Programs should be written for people to read, and only incidentally for machines to execute.” Hal Abelson
26. Thank you Martin Klepsch
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
28. Links 2/2 » Overconstrained Mailinglist » Cassowary.js