Marathia’s Stacks

RapidWeaver stacks for the rest of us

RapidWeaver stacks for the rest of us

  • Stacks Image 91360
  • Stacks Image 91364
  • Stacks Image 91368

SmartColumns2 Stacks demo #1

demo #1 | demo #2 | demo #3 | demo #4a | demo #4b | demo 4c | back to product page
Unless stated otherwise, all examples on this page are responsive, so the columns will be shown below each other on small screens (max. 768px wide). In case you're on a bigger screen, resize your window to see the effect.
This is the Smart3columns2 stack: equal height, fluid equal width columns. Below a screen width of 768px, the three columns will be shown below each other.

As you can see, each column can be styled individually and you can align the content of each stack to the top, middle or bottom.
I’m aligned to the middle and do not contain as much text as my neighbor to the left, but more than my neighbor to the right.
I’m aligned to the bottom.

Again the Smart2columns2 stack: equal height, fluid columns. The width of the left column is 60% and the width of the gutter 1%, so the width of the right column will be (100-60-1)=39%. Below a screen width of 768px, the two columns will be shown below each other. Resize your window and see what happens.

As you can see, the column on the right has the same height, although there’s much less text in it.
I'm almost empty, but I’m still as heigh as my neighbor :)

This is the Smart4­columns2 stack. The left column has a fixed width of 300px; the second and the third column have a width of 20%. What’s left is for the right column…

Below a screen width of 768px, the four columns will be shown below each other.
I’m aligned to the top!
I’m aligned to the middle…
…and I’m to the bottom.

Stacks Image 91266
The right column of this Smart2­columns2 stack has a fixed width of 80px; the breakpoint is set to 0px, so at any screen width the two columns stay next to each other.

Icon by www.artdesigncat.com

Stacks Image 91274
In this Smart3­columns2 stack the first column has a width of 18%, the second column a width of 60%, and the gutter a width of 2%, so the right column is also 18%*
* (100-(18+2+60+2))=18

Below a screen width of 480px, the columns will be shown below each other.

Icons by www.artdesigncat.com
Stacks Image 91280

This is the Smart3­columns2 stack. Both the middle and the left column have a fixed width of 200px; this column is fluid.

Below a screen width of 768px, the three columns will be shown below each other.
I have a fixed width of 200px. On small screens, I’m aligned to the left.
I have a fixed width of 200px. On small screens, I’m aligned to the center.

Again the Smart3­columns2 stack. The only difference with the example above is the aligning of the middle and the left column on small screens (below a screen width of 768px).
I have a fixed width of 200px. On small screens, I’m aligned to the right.
I have a fixed width of 200px on big screens, but on small screens, I’m full width.

You can use an (optionally semi-transparent) solid color on the background…
…or a tiled background image.
You can even combine a background image with an (optionally semi-transparent) background.

Obviously, you will only see the background color when the background image is partially transparent.
New in version 2: you can now also have an image filling the background, automatically cutting of what doesn’t fit.

In this example, the background color, border color etc. is not set in the Smart4­columns2 stack, but in the four individual Text stacks inside the Smart4­columns stack.
In the Smart4­columns stack, all columns are set to vertical align: bottom.
The result: vertical aligned columns!
Nice, isn’t it?
One thing though: Text stacks can only have solid borders, no dotted, dashed, double, inset, outset like in the SmartColumns stacks…

…unless you wrap the content of each column in the SuperB&B2 Stack that is!
This stack allows you to use border and background options not provided by standard stacks.
The result: non-solid borders!
Even background gradients are possible.

Yes, this website uses cookies too. Here’s the annoying but obligatory cookie warning. More info…