Splendid layouts

Edge

edge lets you place elements on the edge of a container.

Add icing 🧁 on the edge.

Just pick an edge and place your element there. No need to overthink or dive into CSS positioning complexities.

index.html
<div class="stack">
  <div class="edge-topleft"> Top left </div>
  <!-- ... other positions ... -->
</div>
It might get too sweet if you include too much icing!
Top Left 🧁
Top 🧁
Top Right 🧁
Left 🧁
Right 🧁
Btm Left 🧁
Btm 🧁
Btm Right 🧁

Full-width and full-height edges supported

Just add full to the edge class and you’ll get it.

index.html
<div class="stack">
  <div class="edge-topfull"> Top full </div>
  <!-- ... other positions ... -->
</div>
Top full
Bottom full
Left Full
Right Full