Guides Layout introduction

Scrollmeister comes with its own layout engine called Guides Layout. The gist of the Guides Layout is that the left and right edge of every single element is snapped to a vertical guide (just like a guide in Photoshop). You can have as many guides as you want and they can also have a width (so you can have gutters).

Define Guides

Use the guides-layout behavior to set up the guides. You give them a name, position and an optional width. The following sets up four guides left, center and right. The left and right guide have a width of 10px and the center guide does not have a width.

<scroll-meister guides-layout="guides: left 0% 10px, center 50%, right 100% 10px">
</scroll-meister>

Position Elements

To snap elements to the guides use the layout behavior.

<scroll-meister guides-layout="guides: left 0% 10px, center 50%, right 100% 10px" debug-guides>
  <element-meister layout="guides: left right;"></element-meister>
  <element-meister layout="guides: left center;"></element-meister>
  <element-meister layout="guides: center right;"></element-meister>
  <element-meister layout="guides: viewport center;"></element-meister>
  <element-meister layout="guides: center viewport;"></element-meister>
</scroll-meister>

The viewport guide is always defined and makes elements snap to the edge of the viewport. As you can see, you can freely position elements without any wrapper elements.

Skip and Consume Elements

By default the elements flow behind each other. If you want two elements side by side, you can use tell the second one to skip a dependency to they both flow after the same element. Then tell the element that follows to consume both elements.

<scroll-meister guides-layout="guides: left 0% 10px, center 50%, right 100% 10px" debug-guides>
  <element-meister layout="guides: left right;"></element-meister>
  <element-meister layout="guides: left center;"></element-meister>
  <element-meister layout="guides: center right; dependencies: skip 1;"></element-meister>
  <element-meister layout="guides: viewport center; dependencies: consume 2;"></element-meister>
  <element-meister layout="guides: center viewport;"></element-meister>
</scroll-meister>

Parallax and Pinning

By default all elements are flow elements. You can change the layout mode to follow to remove the element from the flow and make it follow its leader (a leader is always a flow element).

<scroll-meister guides-layout="guides: left 0% 10px, center 50%, right 100% 10px" debug-guides>
  <element-meister layout="guides: left right;"></element-meister>
  <element-meister layout="guides: left center;"></element-meister>
  <element-meister layout="guides: center right; mode: follow; followerMode: parallax;"></element-meister>
  <element-meister layout="guides: viewport center;"></element-meister>
  <element-meister layout="guides: center viewport;"></element-meister>
</scroll-meister>