Home

Welcome to the strawberry wiki!

Strawberry is a CSS non-framework based on flexbox to help designers and developers in their work.

Documentation

Read me!

Flexbox container

Use these classes to build a flexbox container faster

Class	Meaning
sb-flex-row-wrap	display: flex; flex-flow: row wrap;
sb-flex-row-nowrap	display: flex; flex-flow: row nowrap;
sb-flex-reverse-row-wrap	display: flex; flex-flow: row-reverse wrap;
sb-flex-reverse-row-no-wrap	display: flex; flex-flow: row-reverse nowrap;
sb-flex-column-wrap	display: flex; flex-flow: column wrap;
sb-flex-column-nowrap	display: flex; flex-flow: column nowrap;
sb-flex-reverse-column-wrap	display: flex; flex-flow: column-reverse wrap;
sb-flex-reverse-column-no-wrap	display: flex; flex-flow: column-reverse nowrap;

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-no-wrap">
</div>

Add these classes to the flexbox container to change wrap direction and inline rules

Class	Meaning
sb-flex-inline	display: inline-flex;
sb-flex-reverse-wrap	flex-wrap: wrap-reverse;

Examples:

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-no-wrap sb-flex-inline">
</div>

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-wrap sb-flex-reverse-wrap">
</div>

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-wrap sb-flex-inline sb-flex-reverse-wrap">
</div>

What about nested flexbox?

Add these classes to the flexbox container to automagically force flexbox items to become flexbox containers as well

Class	Meaning for all items
sb-nested-flex-row-wrap	display: flex; flex-flow: row wrap;
sb-nested-flex-row-nowrap	display: flex; flex-flow: row nowrap;
sb-nested-flex-reverse-row-wrap	display: flex; flex-flow: row-reverse wrap;
sb-nested-flex-reverse-row-no-wrap	display: flex; flex-flow: row-reverse nowrap;
sb-nested-flex-column-wrap	display: flex; flex-flow: column wrap;
sb-nested-flex-column-nowrap	display: flex; flex-flow: column nowrap;
sb-nested-flex-reverse-column-wrap	display: flex; flex-flow: column-reverse wrap;
sb-nested-flex-reverse-column-no-wrap	display: flex; flex-flow: column-reverse nowrap;

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-wrap sb-nested-flex-column-nowrap">
    <div>I'm a flexbox item and a flexbox container as well</div>
    <div>I'm a flexbox item and a flexbox container as well</div>
    <div>I'm a flexbox item and a flexbox container as well</div>
</div>

Add these classes to the flexbox container to change wrap direction and inline rules for nested flexbox

Class	Meaning for all items
sb-nested-flex-inline	display: inline-flex;
sb-nested-flex-reverse-wrap	flex-wrap: wrap-reverse;

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-wrap sb-nested-flex-column-wrap sb-nested-flex-reverse-wrap"> 
    <div>I'm a flexbox item and a flexbox container as well</div>
    <div>I'm a flexbox item and a flexbox container as well</div>
    <div>I'm a flexbox item and a flexbox container as well</div>
</div>


What if you need a nested flexbox container different from others?<br>You can override general nested flexbox rules simply adding one of the main flexbox container classes to it.


**Example:**
```html
<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-wrap sb-nested-flex-column-wrap sb-nested-flex-reverse-wrap"> 
    <div>I'm a flexbox item and a flexbox container as well</div>
    <div class="sb-flex-column-nowrap">I'm a flexbox item and a flexbox container as well, with my own rules</div>
    <div>I'm a flexbox item and a flexbox container as well</div>
</div>