🍓 StrawberryGrid

Just another simple flexbox grid called 🍓 StrawberryGrid. This was created because you always need a simple, functional, adjustable grid - without unnecessary features.

StrawberryGrid is using the CSS Flexible Box Layout Module (Flexbox) to positioning elements in horizontal and/or vertical stacks - basically our Grid with columns. StrawberryGrid includes features for all properties prefixed with flex, as well as display: flex, display: inline-flex, align-content, align-items, align-self, justify-content and order.

Contents

• Configuration
• Build
• Usage and examples
• Development and contributing

Configuration

Open StrawberryGrid.scss:

// Set the number of columns
$columns: 12 !default;

// Set the gutter between columns
$gutter-width: 1rem !default;

// Set a margin for the outer container
$outer-margin: 2rem !default;

// max width container size
$max-width: 1200px !default;

// possible breakpoints (name, min-width for media query, container width)
// "xs" is default, you don't need to add it.
$breakpoints: sm 48em 46rem, md 62em 61rem, lg 75em 71rem !default;

Build

Command Line

sass --update --style=compressed StrawberryGrid.scss:../dist/StrawberryGrid.min.css

Usage and examples

soon

Development and contributing

Feel free to send pull requests and raise issues.