Category: JS

Grid Style Sheets for Constraint-based Layouts

iOS-like Auto Layout applied to browser displays. Based on the same constraint algorithm.

CSS manages features like color and font selection quite well. But there’s an important fault at the core of CSS that rears its head when designing the actual layout of pages. Despite its declarative syntax it merely describes how a page will fit together, almost in an imperative way. An element will have so many pixels of padding, be a certain width, be floated right – but this doesn’t say anything about where it fits in relation to its neighbours and the page as a whole. It certainly doesn’t account for where it should be displayed on different sized screens, as this requires multiple definitions for a selector with media queries controlling the breakpoints.

Fortunately, there’s a better way. The solution is nothing short of the drastic solution of bypassing the entire browser layout engine, and replacing it with one that doesn’t suck. This way, we get to define what we want the layout to be, not how the layout should be constructed…

The solution is a JS library Grid Style Sheets, and it’s available right now for use in today’s browsers. It’s an implementation of the Cassowary constraint solver algorithm – the very same one used by Apple in its recent Auto Layout tooling – and it feels like something from the future. Note that this has nothing to do with traditional Layout Grids as used by designers, and available in CSS form – The Grid is the startup who has created GSS.

source

The Future of Javascript Animation with Famo.us

After much anticipation, hype and controversy, Famo.us is finally being released today for limited public consumption. When I first saw the Famo.us webpage in late 2012, I was intrigued by what I thought was impossible to do on the web. Suspending disbelief for a moment, I began to wonder what code would look like if the animation magic I was seeing were suddenly possible to write in JavaScript.

Ultimately, developing in Famo.us is straightforward; however the concepts do differ from standard web development. In this primer I’m going to go over why Famo.us is different, the basics of writing Famo.us apps, and a list of resources to help you become a guru.

These days, web browsers apply hardware acceleration to certain CSS properties. When rendering a typical webpage, you can gain the benefits of this acceleration if you trigger CSS based animations. The browser still has to work hard to recompute the layout of your page from a change to the DOM. In practice this means that if your app is making changes to the DOM that require the browser to re-layout your page, you’ll lose hardware acceleration and generally see inconsistent and slow performance.

Famo.us is built around a neat idea: by directly using the CSS matrix3d transform in combination with the window.requestAnimationFrame function, you can describe the complete layout and animation of your app in a way that’s hardware accelerated with consistent performance.

Surfaces

The basic building blocks of a Famo.us application are Surfaces. Surfaces are simply divs that contain HTML. They make up your app at the most granular level and often do not contain sophisticated layout or content that you want to animate within the surface. A typical app is built out of many surfaces containing mostly text or images and targeted with basic visual CSS.

The Scene Graph contains your app’s surfaces along with Transforms. Transforms are used to position surfaces and thereby layout the UI of your app. They are also used to describe animation.

source