Layout
We build UIs in nope using rows and columns. There's not a fancy 12-point grid system, nor a table of dozens of class names to memorize.
And instead of 'margin' and 'padding', we use 'padding' and 'spacing' to create gaps around and between elements.
Spacing
Spacing is all about gaps between items. Both rows and columns can define the spacing between their children.
<div class="row spacing-small">
<span class="red"></span>
<span class="green"></span>
<span class="blue"></span>
</div>Padding
Padding defines the gap around items. Just like spacing, it works on both rows and columns.
<div class="row padding-small">
<span class="red"></span>
<span class="green"></span>
<span class="blue"></span>
</div>Alignment
Alignment tells items where to be relative to the parent. You can independently control both horizontal and vertical alignment for any of your rows or columns.
<div class="row center">
<span class="red"></span>
<span class="green"></span>
<span class="blue"></span>
</div>