3 ms·

I agree with you 100% about the need to separate styling from layout. CSS for layout just plain sucks. Layouts that should be simple turn out to require hack up

by ux-app 14y ago

I agree with you 100% about the need to separate styling from layout. CSS for layout just plain sucks. Layouts that should be simple turn out to require hack upon hack to achieve. In regard to your layout in JS question. There is an excellent port of the Cassowary constraint solver in JS [1]. It allows you to specify complex relationships between containers along with weights, which allow you to specify layouts in a sane manner. Performance is very good, especially since it takes advantage of web workers where available. What I hate most about layout in CSS is that it takes something that should be brain-dead simple and turns it into something that requires memorization of edge cases and browser hacks with some added voodoo magic. It's such a waste of brain cycles. To top it all off constraint based solvers have been around for over 20 years... and yet in 2013 we're still dealing with this mess. [1] https://github.com/slightlyoff/cassowary-js-refactor https://github.com/slightlyoff/cassowary-js-refactor

ihodes 14y ago
Though obvious, FWIW: correct link to [1] https://github.com/slightlyoff/cassowary-js-refactor https://github.com/slightlyoff/cassowary-js-refactor
ianstormtaylor 14y ago
Very cool repo and articles that he links to. Lots of the layout constraints (not type-size, colors, etc.) should be solved when Flexbox support lands in the other major browsers. For example a 20% wide container, that gets no wider than 800px and no skinnier than 200px can be solved with Flexbox pretty easily. Not having adequate Flexbox support after it being discussed for soooo long is my other big problem with CSS.
- ux-app 14y ago
  flexbox is great, but it only solves a narrow set of layout issues. There's so much more that a constraint based system brings to the table. A layout system should make it extremely simple to anchor edges between arbitrary containers regardless of their position in the DOM. While we're at it lets scrap the DOM too. It's really painful to see how much it is being contorted to suit the application paradigm.
talmand 14y ago
Your complaint has more to do with how browsers implement CSS, not CSS itself.

by ux-app 14y ago

ihodes 14y ago

Though obvious, FWIW: correct link to [1] https://github.com/slightlyoff/cassowary-js-refactor https://github.com/slightlyoff/cassowary-js-refactor

ianstormtaylor 14y ago

Very cool repo and articles that he links to. Lots of the layout constraints (not type-size, colors, etc.) should be solved when Flexbox support lands in the other major browsers. For example a 20% wide container, that gets no wider than 800px and no skinnier than 200px can be solved with Flexbox pretty easily. Not having adequate Flexbox support after it being discussed for soooo long is my other big problem with CSS.

ux-app 14y ago
flexbox is great, but it only solves a narrow set of layout issues. There's so much more that a constraint based system brings to the table. A layout system should make it extremely simple to anchor edges between arbitrary containers regardless of their position in the DOM. While we're at it lets scrap the DOM too. It's really painful to see how much it is being contorted to suit the application paradigm.

talmand 14y ago

Your complaint has more to do with how browsers implement CSS, not CSS itself.