Splendid layouts

Basic Usage

edge lets you place elements on the edges of a container. Two conditions must be present for edge to work flawlessly:

  1. edge must be used in a stack or relative container.
  2. When used in a stack, the stack-ing element must not have paddings.
<div class="stack">
  <div class="edge-topright">...</div>
</div>

Edges

Top edges

There are four top edges.

  • edge-topleft: Place content at the top left edge
  • edge-top: Place content at the top edge
  • edge-topright: Place content at the top right edge
  • edge-topfull: Place content at the top edge, spanning the full width
<div class="stack">
  <div class="edge-topleft">...</div>
  <div class="edge-top">...</div>
  <div class="edge-topright">...</div>
  <div class="edge-topfull">...</div>
</div>

Bottom edges

There are four bottom edges.

  • edge-bottomleft: Place content at the bottom left edge
  • edge-bottom: Place content at the bottom edge
  • edge-bottomright: Place content at the bottom right edge
  • edge-bottomfull: Place content at the bottom edge, spanning the full width
<div class="stack">
  <div class="edge-bottomleft">...</div>
  <div class="edge-bottom">...</div>
  <div class="edge-bottomright">...</div>
  <div class="edge-bottomfull">...</div>
</div>

Left edges

There are four left edges.

  • edge-lefttop: Place content at the left top edge
  • edge-left: Place content at the left edge
  • edge-leftbottom: Place content at the left bottom edge
  • edge-leftfull: Place content at the left edge, spanning the full height
<div class="stack">
  <div class="edge-left">...</div>
  <div class="edge-leftfull">...</div>
</div>

Right edges

There are two right edges.

  • edge-righttop: Place content at the right top edge
  • edge-right: Place content at the right edge
  • edge-rightbottom: Place content at the right bottom edge
  • edge-rightfull: Place content at the right edge, spanning the full height
<div class="stack">
  <div class="edge-righttop">...</div>
  <div class="edge-right">...</div>
  <div class="edge-rightbottom">...</div>
  <div class="edge-rightfull">...</div>
</div>

Manipulating Edge Positions

You can finetune the edge positions with:

  • --tx: changes position on the x-axis
  • --ty: changes position on the y-axis

Here are a few things to note when manipulating edges:

  • Elements on the corner edges have both --tx and ty values set to -50%.
  • Elements on the top, bottom, left, and right edges have either --tx or --ty set to -50%.
  • Positive values push the element towards the center of the container
  • Negative values push the element away from center the container.
--tx
-50%
--ty
-50%
Top Left
Top Right
Bottom Left
Bottom Right

Convenient utilities for finer edge control

You can use start and end keywords to control the position of the element on the main axis.

Here, start and end function like logical properties — so start moves the element to the left while end moves the element to the right.

Top Edges

<div class="stack">
  <div class="edge-topleft-start">Topleft start</div>
  <div class="edge-topleft-end">Topleft end</div>
  <div class="edge-topright-start">Topright start</div>
  <div class="edge-topright-end">Topright end</div>
</div>

Bottom edges

<div class="stack">
  <div class="edge-topleft-start">Topleft start</div>
  <div class="edge-topleft-end">Topleft end</div>
  <div class="edge-bottomright-start">Bottomright start</div>
  <div class="edge-bottomright-end">Bottomright end</div>
</div>

Left edges

<div class="stack">
  <div class="edge-lefttop-start">Lefttop start</div>
  <div class="edge-lefttop-end">Lefttop end</div>
  <div class="edge-leftbottom-start">Leftbottom start</div>
  <div class="edge-leftbottom-end">Leftbottom end</div>
</div>

Right edges

<div class="stack">
  <div class="edge-righttop-start">Righttop start</div>
  <div class="edge-righttop-end">Righttop end</div>
  <div class="edge-rightbottom-start">Rightbottom start</div>
  <div class="edge-rightbottom-end">Rightbottom end</div>
</div>