Component Layouts

Skyline provides a suite of intrinsically responsive layouts for use in your components. You can use them alone or together to solve common layout challenges.

Available in Vue JS @skyline/vue (10.8.0)

Not seeing what you need here? These are just suggestions for some of our common layout problems. Feel free to create something more bespoke that can be build using Flexbox Utilities or Media Queries

The Cluster

Elements that wrap one at time as they run out of space.

The Stack

Elements within a page that need the same level of vertical spacing.

The Sidebar

When you need a layout with a fixed width sidebar than collapses when its content can no longer fit

These layouts are inspired by Andy Bell's (opens new window) and Heydon Pickering's (opens new window) excellent work in the every-layout (opens new window) website, where you'll also find more info on intrinsically responsive (opens new window) layouts.