Grid Style Sheets for Constraint-based Layouts

https://raygun.io/blog/2014/06/next-gen-constraint-layouts-browser-grid-style-sheets

by _query • 12 years ago

75 17 12 years ago

_query• 12 years ago

Would love to see the same concept applied via some kind of css preprocessor so you don't need to calculate everything at runtime. One could build the whole layout for a set of static resolutions, like in twitter bootstrap: one default resolution for each kind of device. Then one would deliver the generated css instead of the gss and the runtime.

DomKM• 12 years ago

Dan Tocchini, a GSS author, said that this was on the roadmap: http://domkm.com/posts/2014-01-08-garden-cssom-ccss/#comment...

ollysb• 12 years ago

Quite a challenge by the sound of it, their solution is to precalculate the resolved constraints for various different screen sizes.

bergie• 12 years ago

Some early work at https://github.com/the-gss/gss2css

namanyayg• 12 years ago

Stuff like this and famous.us is changing the way we develop, for the good. All welcome changes. The question is, what about IE?

bybjorn2• 12 years ago

In this video the author says it works in IE11 and will be working in IE10 "within a couple of weeks" http://vimeo.com/91393694 .. which would mean it's working in 10 now .. also, if they manage to make the preprocessor stuff, then it will work in "all" browsers (that understand the generated css of course..)

brianzelip• 12 years ago

Did you perhaps mean to reference http://famo.us/?

zghst2• 12 years ago

Really? Famo.us the hype ware that has been coming soon for years?

All that hype led to nothing but an ugly API that is confusing and going toward nowhere. There are no scientific or studious concepts behind it, I really feel like those guys let us down.

malandrew2• 12 years ago

    "Famo.us the hype ware that has been coming soon for years?"

It's available at http://famo.us/

    "There are no scientific or studious concepts behind it"

A retain-mode scene graph, the basis of famo.us, is definitely a tried and true computer engineering concept.

Quick question: Have you actually used famo.us?

Disclaimer: I'm an engineer at famo.us.

nikso• 12 years ago

For an AngulaJS flavor of this, there is angular-autolayout: http://thenikso.github.io/angular-autolayout/

zghst2• 12 years ago

The JavaScript solution to everything has to stop, it's madness.

Why not instead push for standards? Just a few months ago these guys were hyping this up even though it has tons of performance issues, bugs that the explicitly ignore, it doesn't work in IE and forget about getting this to work on mobile.

I'd really like to see for once, a dev get down and dirty and work on an actual standard instead of pushing out a JS solution that will be abandoned in 12 months time.

d4tocchini2• 12 years ago

GSS was built not for standards, but for our flagship product, that's our priority right now. Our approach to organically influence standards is to make the APIs work in real world products, and if enough momentum builds to begin the necessary working drafts.

I'd like to see more polyfills of potential standards. Waiting years on end for things like CSS Vars or the Grid Layout Module is getting real old.

Instead of hating on JavaScript, the only turing complete tool we have in the browsers, we should be pushing for extensibility standards. API hooks into the internals of CSS selector resolution, layout calculations, etc so devs can add new features in a performant & predictable manner that may never trickle down from the ivory tower of standards.

fortunateson• 12 years ago

This is how things start. This could be the future of CSS that becomes part of browsers some day.

malandrew2• 12 years ago

The JavaScript solution to everything is the best way to explore which ideas are actually worth converting into a standard. It's much better to implement something as JavaScript that can then be used with any browser than for some half-baked idea to be implemented in a browser, that the other browser makers end up copying and now we're stuck with yet another standard, but half-baked way of doing things.

Every javascript solution that becomes popular ends up informing those ideas the browser makers end up standardizing. CommonJS and RequireJS have both informed the ES6 modules API. All the promise implementations out there have informed the promises API in ES6. etc. etc.

Grid Style Sheets for Constraint-based Layouts

Related Stories