Edge

With edge you define the inner width of the website.

By default edge has a padding of 2 space units to create spacing between your elements and the edge of the website. This is in case the viewport width equals the width of the website. This is called the outer width.

Example-1: this example has the width of the inner width of the edge/website

Snap edge 1.3+

With snap edge you can snap to the outer width of the edge.

Using snap edge is handy when you need a image or background to be full-width for example on a mobile or tablet viewport.

Example 1: has edge inside snap edge

Example 2: basic

Breakout edge Experimental 1.3+

Breakout edge can be used to breakout of the edge to the full width of the website

Warning: this technique is highly experimental. The technique uses 100vw for its calculations, this causes a horizontal scrollbar on computer with a default mouse. The scrollbar can be removed by using overflow-x:hidden; on a div wrapped around the edge.

You can use breakout edge safely when the viewport width is small then the size of the outer width of the edge.

Example 1: Edge inside a breakout element

Example 2: This example might be slightly broken depending on your type of mouse. Causing a negative indent of several pixels.

Roadmap for breakout edge

Create javascript polyfill to create an alternative --vw variable