Constraint CSS

http://gridstylesheets.org/guides/ccss/

by strictfp • 12 years ago

142 55 12 years ago

gridstylesheets.org

NaNaN• 12 years ago

I wonder how to use it harmoniously with jQuery plugins...maybe a lot of them would be refactored.

iamstef• 12 years ago

i would like to see two jQuery plugins work harmoniously with each other :P

Mithaldu2• 12 years ago

It seems to need some browser compatibility work:

https://www.dropbox.com/s/5ipil0xd12z7a54/Screenshot%202014-...

Torn• 12 years ago

what browser are you using?

Mithaldu2• 12 years ago

Opera. :)

tkubacki7• 12 years ago

IMHO single most important new CSS tech web badly needs is ShadowDOM - this will make web dev suck less compared to native toolkits development

[edit added below]

...since we will be able to componentize web apps.

Thinking in terms of components is much easier than trying to manage div soup. Please don't by shy and say why I'm wrong instead of downvote.

pothibo2• 12 years ago

ShadowDOM isn't that much needed and I have concern as to how good this is going to be. ShadowDOM IS a div soup. It's just hidden from you.

From a developer standpoint, the DOM still need to be handled. Moreover, I haven't seen any discussion with regards to strings in shadowDOM that needs to be pluralized/genderized.

Also, ShadowDOM is outside the scope of the article. This is probably why you got downvoted.

tkubacki7• 12 years ago

1. "shadowDOM isn't that much needed"

I gave you an argument why I think it's (components) - you just say your opinion - it' not an argument

2. "I have concern as to how good this is going to be"

It IS WORKING already in Chrome. You can try it out [1].

"ShadowDOM IS a div soup." - no it's not. Web component tags are tags like any other HTML tag. You don't get the idea. Div's are like thinking about computer program in terms of electrical signals whereas web components is thinking in terms of program logic. See example video [2] with Google maps component. It just hides unnecessary complexity.

" I haven't seen any discussion with regards to strings in shadowDOM that needs to be pluralized/genderized."

Sorry. Don't get what do you mean. Could you please evaluate ?

"Also, ShadowDOM is outside the scope of the article" well I just express my opinion that there are bigger unsolved issues in webdev than those solved by Constraint CSS

[1] http://www.polymer-project.org/

[2] http://youtu.be/8OJ7ih8EE7s?t=28m26s

masklinn5• 12 years ago

Shadow DOM is no solution to the issue pointed out by OP, which is CSS-based layouting. Flexbox[0] or grid[1]? Sure, they exist specifically to (finally) add actual layouting abilities to CSS.

Thinking in terms of components is much easier than trying to manage div soup.

It still does not solve the issue at hand.

[0] http://caniuse.com/flexbox

[1] http://caniuse.com/css-grid

tkubacki7• 12 years ago

yea - sure you are right. I just say - there are bigger issues with HTML/CSS than that.

bshimmin• 12 years ago

The output from PEG.js for this is... intense: https://github.com/the-gss/engine/blob/master/dist/gss.js#L1... (scroll down a few thousand lines to see what I mean)

mmnumbp• 12 years ago

https://github.com/the-gss/engine/blob/master/dist/gss.js#L1...

This holy if statement from the gods..

d4tocchini5• 12 years ago

LOL. Currently gss.js includes the generated PEG parsers with this madness. When the CLI tools come out, will include a build without the parsers, as it should be...

samwillis• 12 years ago

Some of the layouts that CCSS would solve can be done with the new 'display: flex;' [1] tools. This can now be used in all browsers including IE10 [2].

[1] http://css-tricks.com/snippets/css/a-guide-to-flexbox/

[2] http://caniuse.com/flexbox

notduncansmith9• 12 years ago

I'm a bit jealous of anyone that doesn't have to support IE8. Thankfully we just moved our standard lowest-supported-version of IE to 9, but we still have plenty of projects from when we supported IE8 (even a few from the IE7 days), so it's far from a past problem.

AshleysBrain2• 12 years ago

With new layout modes coming to CSS, including flex and grid, I don't think the statement "float-based & table-based layouts that have remained unimproved to this day" is fair.

d4tocchini5• 12 years ago

Flexbox is a step forward, Grid Layout is awesome but is starting to look like CSS Vars, another spec lost in years of limbo

The myriad of incompatible CSS layout modes, present & coming, are evidence of the lack of a holistic & future-proof foundation. The Constraint CSS primitives can be used to implement Flexbox & Grid Layout in total, not true the other way around. And, such implementations would be fully compatible with each other. BTW, a Grid Layout implementation in GSS is well on its way.

The 2 fundamental layout features lacking in future CSS specs is 1) relative positioning & sizing & 2) true source order independence. Less this is addressed, layout will be tightly coupled with the DOM & good luck centering things

AshleysBrain2• 12 years ago

I'm all for improving what we have, and the new GSS system does look interesting and could possibly influence CSS. But I think you're reacting too strongly to CSS. AFAIK the normal, flex, and grid layout modes are compatible (in the sense that you can mix them in one page and have things like flex inside grid elements and vice versa). Being a lurker on some standardisation email lists some of the best engineers in the world are on there taking everything very seriously, including future-proofing since everyone is well aware anything they add now will basically have to be supported forever.

I'm not sure I understand your two complaints (isn't there already position: relative and percentage sizes?), but I think good engineering is always about making tradeoffs, and while I don't understand GSS enough to criticise it I feel it's unlikely to be a silver bullet that magically fixes everything in itself, and will likely have its own quirks and pitfalls as well.

spiralganglion• 12 years ago

One of the devs of this project gave a talk about the motivation behind it, how it works, and other interesting details [1].

Of note, this project goes a fair bit deeper into advanced layout possibilities than the flexbox and grid modules included in the current CSS spec/drafts. Flexbox, for instance, prescribes a very particular pattern to the layouts that it affords. You must be rather methodical in how you break your layout into nested rows and columns. This focus on rows and columns causes quite a bit of visual shoehorning, or forces you to resort to hacks, at which point you've lost most of the benefit of using flexbox at all. Though for simple- to medium-complexity layouts where the visual arrangement is composed of nested rectangles following simple rules (as most of the web seems to be), flexbox is wonderful once you get the hang of it.

I'm very fond of constraint-based layout systems (and rule systems in general), having written a few of them myself. I feel that while this GSS project isn't a complete realization of the promise they offer, it is a nice step in that direction. I worry about the performance and complexity burdens this project seems to impose, though I say that only looking at the docs, the generated code, and the discussions that emerged the last time this was posted to HN. I will be using it for an in-house dev-facing tool in the near future, and about that I am quite excited.

[1] https://vimeo.com/91393694

d4tocchini5• 12 years ago

And here's a GSS screencast [1] that accompanied a tutorial in most recent issue of Net Magazine [2]

[1] https://vimeo.com/99873002 [2]: http://www.creativebloq.com/net-magazine

notduncansmith9• 12 years ago

Thanks for the link. It did help cement some of the concepts presented on the website, but the presenter did a really poor job of selling some of it: "This... [points to screen] ... I don't know, it's crazy. [next slide]". How does that in any way convey the value of this thing?

Also, his answer to the question "How do we debug GSS styles?" was pretty worrisome: "Just add and remove constraints, and see what breaks it". That sounds to me like what a lot or people are doing with CSS right now, and the idea is horrifying. It's tough to imagine embracing a nondeterministic system where there's no telling what rules you've given it will be obeyed, and which will be ignored - at least in CSS, it's pretty clear when something will be overridden.

ender7• 12 years ago

Performance would always be my key concern with something like a general-purpose constraint solver. I know that LP is a field in its own right, but I don't have a ton of experience there -- do you think there's a practical path to bringing the performance up to a necessary level (i.e. real-time, <10ms calculation times for complex pages)?

d4tocchini5• 12 years ago

Perf is surprisingly good, suitable for modern web apps. The bottleneck is DOM & CSS selector resolution, not the constraint solver - Cassowary is a beast!

We're working on a lib for pre-computing GSS layouts server-side, but it's significantly more hardcore than traditional pre-processing.

What we really need is browser vendors to offer deeper API hooks into layout lifecycle, painting, etc

notduncansmith9• 12 years ago

Does anyone have any real-world examples of GSS? I like the idea, but I'm struggling to imagine what this would look like in an actual system. Maybe I'm nuts but I don't feel constrained by CSS too often. Everything I need, I get from CSS + a decent preprocessor (usually LESS these days). Maybe this is a symptom of using CSS, but I rarely even encounter people describing layouts in the way GSS appears to want me to code them.

I don't have much experience with constraint-based layout systems in general, but from what I read it looks like it's a common practice when developing native solutions. This gives me the impression that systems like GSS are just "CSS for people who are used to building native apps and don't grok CSS".

I don't mean to say that CSS isn't without more than it's fair share of flaws, but I take issue with the statement that doing laying out views on the web is in any way difficult.

themodelplumber• 12 years ago

There is an article about this in the most recent net Magazine issue. The example given made sense but was just edge-casey enough that I came away thinking that normal CSS was probably good enough for me. Plus GSS usage seemed like a bear given the minor advantages.

kenferry• 12 years ago

I rarely even encounter people describing layouts in the way GSS appears to want me to code them.

I don't think that's the case… think of how when you're dragging elements around in Keynote or Powerpoint, how you get guidelines that snap in relationships between elements.

This is centered in that, these things have the same width, the space between these two things is 10, the left edges of these things align.

Those relationships are what's expressed. When someone is designing a layout, those are the terms they're going to be thinking in.

notduncansmith9• 12 years ago

You're right, for some reason this wasn't apparent to me when I was reading about it. Thanks for pointing that out.

state• 12 years ago

I spend quite a bit of time on both sides of this issue: both doing design work and implementing it.

The appeal of GSS definitely lies in how similar it is to how I conceive of layouts functioning. As a designer I want the grid to be based on divisions of the page, and every piece of software I work on appears in many different "page" sizes depending on the device, resolution, &c.

It's not just that I want my grid fields to proportionally resize themselves, but that the elements themselves need to reorganize themselves to suit different grid conditions.

All of that is really just to say that I also want to see answers to your first question. GSS seems like a reasonably good way to think about this, but I want to see more examples of it in the wild, esp. in production.

mtdewcmu6• 12 years ago

>Everything I need, I get from CSS + a decent preprocessor (usually LESS these days). Maybe this is a symptom of using CSS, but I rarely even encounter people describing layouts in the way GSS appears to want me to code them.

I'm not sure how you could possibly know whether or not CSS is good enough without knowing what else may be possible. It sounds like you work with CSS professionally, so it isn't going to bother you if something takes an hour -- that's a perfectly good, billable hour.

Supposedly, people in the past did not know that horses are slow. For my part, I hate CSS. I can't quite imagine what this new system will be like, but it's wonderful to think that progress may be coming.

wmeredith• 12 years ago

I totally hear what you're saying abut the horse analogy: I don't know what I don't know.

What I DO know is that as an interaction designer working with CSS for about 8 years, I can say with some personal conviction that CSS is NOT my bottleneck when it comes to building great software. It has limitations and quirks, like anything else that is reality-based, but it's REALLY powerful for layout in terms of variety and depth of interaction. Add SASS or LESS to your workflow and CSS becomes the bee's knee's so to speak with all the power of functions, variables, arrays, etc...

Everything can be improved, I suppose. However, I've seen poor knowledge of programming concepts in business leadership or toxic office politics dash months of work in an instant. As opposed to fiddly fluid layout issues in CSS. Which any skilled coder can do away with in a few minutes.

notduncansmith9• 12 years ago

I do a lot of CSS at work, yes.

it isn't going to bother you if something takes an hour -- that's a perfectly good, billable hour.

I don't particularly care for the implication that I find working slowly to be acceptable. My company rewards developers well for finishing fixed-bid (i.e. almost all) projects early, since it directly results in more revenue for the company - thus, it's in my direct best interest to get any work done (styling or otherwise) as quickly as possible. Plus, I like anything that makes me more efficient / makes things easier for me.

I'm not sure how you could possibly know whether or not CSS is good enough without knowing what else may be possible.

You've made an error in your reasoning. It would not be possible for me to know that CSS is the best, but it's certainly possible to know that CSS is good enough. There's a certain, explicit bar for "good enough" and that is being able to complete a project in a number of hours that is less than or equal to the amount we quoted our client. I'm able to meet or exceed that bar with regularity - thus, I can conclude that my toolchain as a whole is "good enough".

Supposedly, people in the past did not know that horses are slow.

My mind is definitely open to a better alternative - however, I feel entitled to a healthy degree of skepticism, given that I'm already doing better than "good enough".

ryanwhitney• 12 years ago

The homepage does a better job of explaining it—minus the syntax-shock to those accustomed to CSS—with examples like this: http://cl.ly/image/3U02110W2w22

http://gridstylesheets.org/

chton2• 12 years ago

How does this work with changing style from Javascript? Can I change constraints at runtime and have the entire page be recalculated? I'm not familiar with the Cassowary solver, can it do partial invalidation? or would it need to recalculate the entire layout if only a minor part changes?

d4tocchini5• 12 years ago

It keeps things up to date with DOM changes using Mutation Observers & it does so intelligently so it won't redisplay whole page.

Cassowary is an incremental solver & is optimized for adjusting constraints in runtime.

chton2• 12 years ago

Awesome, that's what I hoped to hear. I'll definitely be trying it out then, anything over CSS :p

Constraint CSS

Related Stories