Stacks4Stacks

Websites like CSS Tricks do an admirable job at documenting CSS Flexbox; through use of simple illustrations and sample code. But what if you want to use this brilliant CSS technique in RapidWeaver today, without needing lots of code? The FlexBox stack could prove to be one of the most useful layout stacks you use in RapidWeaver. Some examples of the FlexBox stack are presented below for you. More examples are available in the download file, ready to copy and paste into your own websites too, and experiment or further extend.

Examples

These are some real examples of the FlexBox stack in use. The downloadable project file contains many more examples.

Setup

Download and install the FlexBox stack in the normal way. Open your Stacks Library to drag and drop a copy of the stack into your page.

The basic notion is to click on the blue button to add each block to your layout. If you select the main FlexBox stack or a FlexBox Item stack in edit mode you are presented with many options to customise your layout. All the terminology used for each setting is roughly the same as that used by websites like CSS Tricks and W3 Schools.

All settings carry informational tooltips. Most number boxes let you specify both positive and negative values, in whatever units of measurement you prefer using (e.g. px or rem).

FlexBox is designed around two main breakpoints; mobile and desktop. Typically it has been found many RapidWeaver users start by designing for desktop screen widths first, and then want adjustments for tablet or mobile. The breakpoint (the point at which a boundary is set between mobile and desktop) is changeable in the stack settings.

Beyond the settings shown, there is much more than can be accomplished using custom CSS code. For example if you wanted to apply some background images to your layout blocks, this is easily achievable with custom code. Help is available for hire, if you need this. If you wanted to do something like rounded corners on each of your grid items, the code is as simple as this:

.my_flexbox_item {
	border-radius: 0.5rem;
}

Lots more is possible with custom CSS too; through targeting either the main FlexBox container or individual blocks (items) within your FlexBox.

Browser compatibility

Nearly all modern web browsers support CSS Flexbox. A complete charts and details can be found here. Support is lacking in obsolete versions of Internet Explorer and goes "patchy" with unsupported versions of Firefox, Chrome and Safari. In web browsers that do not support CSS Flexbox, your layout will simply get rendered as a vertical stack of items. Therefore there's never a danger your content cannot be seen.

Theme compatibility

The FlexBox stack was designed for some ThemeFlood theme customers and has not received much testing in other themes or frameworks. There isn't anything in this stack to prevent it from being used in themes or frameworks from other companies. Also worth bearing in mind that CSS Flexbox is a well-established, industry standard. However, take into account that there could be unconventional code in certain themes or frameworks that interferes with FlexBox or modifies what it does.