Github
Version Number
Download
StacksUI logo

StacksUI

About

  • - StacksUI is a UI layout library for the web that uses the paradigm of stacks.
  • - StacksUI uses these vertical and horizontal "stacks" to layout content.
  • - StacksUI is inspired by SwiftUI.

Installing

The simplest way to install StacksUI on your website is by placing this snippet in the head tag of your html. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ehne/StacksUI@master/dist/StacksUI.min.css"/>

Vertical Stacks
.v-stack v1.0.0+

Vertical stacks are vertical elements that contain blocks, or "views". Each element in a v-stack includes 8px of bottom margin, to visually separate the contents of each element in the stack.
To use a vertical stack, simply place the .v-stack class onto a div, and then put elements inside of that parent div, this will create a v-stack.

Example

this is the first element
this is the second
and now, the last one 
<div class="v-stack">
    <div class="v-stack">
        <div class="view">
            this is the first element
        </div>
        <div class="view">
            this is the second
        </div>
        <div class="view">
            and now, the last one
        </div>
    </div>
</div>

Horizontal Stacks
.h-stack v1.0.0+

Horizontal stacks are like v-stacks, but horizontal. meaning that elements get put next to each other sidways.

To create a horizontal stack, just add the class .h-stack to a div, and then put elements inside of that parent div, this will create a h-stack.

To adjust the vertical alignment of elements within the stack, simply add one of these classes along with the .h-stack class: .top, .middle, .bottom.

It is important to note that on mobile devices (screen width < 400px) h-stacks will not be horizontal, instead they will show as full-width v-stacks. To stop this from happening, simply add the .m-keep class to the h-stack element, however it is not recommended that you do this often.

Example

one
two
three
<div class="h-stack">
    <div class="text">one</div>
    <div class="text">two</div>
    <div class="text">three</div>
</div>

Views
.view v1.0.0+

Views act just like any other normal div, except for that they take up the full width that they can. This is very useful in h-stacks, as putting two views next to each other means that the h-stack will be split 50/50. You should only use a .view class when you can't use a v-stack or h-stack.

To make a view, simply add the .view class to a div.

And of course, if they are put into a h-stack they will be shown as full-width on mobile, unless the h-stack has the .m-keep class.

Example

The first half
the second half.
The first half
the second half
the third half.
<div class="h-stack">
    <div class="view">The first half</div>
    <div class="view">the second half.</div>
</div>
<div class="h-stack">
    <div class="view">The first half</div>
    <div class="view">the second half</div>
    <div class="view">the third half.</div>
</div>

Spacer
.spacer v1.0.0+

A spacer will automatically fill in the space between two elements in a h-stack. When a spacer is put into a v-stack, it will create a vertical gap between the elements.

To add a spacer, just add the .spacer class to a div in a stack.

Example

left
right
top
bottom
<div class="h-stack middle m-keep">
    <div class="text">left</div>
    <div class="spacer"></div>
    <div class="text">right</div>
</div>
<div class="v-stack">
    <div class="text">top</div>
    <div class="spacer"></div>
    <div class="text">bottom</div>
</div>

List
.list v1.0.0+

Lists are similar to v-stacks, however, they have a couple of nice features. The list element will assume that its immediate children stacks (either h-stack or v-stack) are rows of the list, separating each row by a line.

To create a list, just use the .list class on an element containing stacks.

Example

One
Two
Three
<div class="list">
    <div class="h-stack">
        <div class="text">One</div>
    </div>
    <div class="h-stack">
        <div class="text">Two</div>
    </div>
    <div class="h-stack">
        <div class="text">Three</div>
    </div>
</div>

Navigation List
.nav v1.0.0+

Navigation lists are a subset of list, that have a lot of the same features, however a navigation list is designed to only be used with a list of links for the user to select.

To create a navigation list, simply add the .nav class to an element that already has the .list class. You will also need to turn each stack into a a tag (rather than a div).

Example

Github
>
Download
>
 
<div class="list nav">
    <a href="https://github.com/ehne/StacksUI" class="h-stack m-keep">
        <div class="text">Github</div>
        <div class="spacer"></div>
        <div class="text">></div>
    </a>
    <a href="https://github.com/ehne/StacksUI/blob/master/dist/StacksUI.min.css" class="h-stack m-keep">
        <div class="text">Download</div>
        <div class="spacer"></div>
        <div class="text">></div>
    </a>
</div>

Customisation
v1.1.0+

You can customise the point at which h-stacks and related elements collapse from flexbox into block styles.

To do this, copy this code, and add it to the top of your html head, just below where you imported StacksUI. 

<style>
  :root{
    --SUI-m:400px
  }
</style>

From there, change the 400px to any value you choose. If the value you have entered is an invalid css width, StacksUI will default to 400px

You can customise all the variables the same way.

Variable Default Use Version Introduced

made by darcylf in 2020