Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS, Interfaces & What We Can Do About It

746d139f9b7c20f00641fd91bd26b451?s=47 mklappstuhl
June 10, 2014

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

746d139f9b7c20f00641fd91bd26b451?s=128

mklappstuhl

June 10, 2014
Tweet

Transcript

  1. CSS, Interfaces and what we can do about it up.front.ug

    10th June 2014 Martin Klepsch
  2. 1996

  3. CSS

  4. 2014

  5. None
  6. None
  7. None
  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.
  16. None
  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

  22. None
  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...
  24. None
  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