Flexspan Grid System

A different kind of Grid System that does not care about IE (Internet Explorer) and has adjustable breakpoints that match your project.

Documentation

Note: This is not just a pre-compiled CSS library that you add to your project but SASS/SCSS partials that you import to your project and customize by modifying SASS variables and compile as part of your project. So this will require a preprocessor. For those who are not command line inclined I personally love Scout-App which is a visual preprocessor or if you like VS Code you could use Live Sass Compiler.

Usage

How to set up Flexspan for your project

1. Download the latest release and place the scss partials on the same server as your project's main scss so that it can compile.

2. Add the following code to your main scss in your project. (Note: you may need to adjust the file path if you put the scss partials in a different directory than your main scss.)

   
       // Breakpoint mixin used with the Flexspan Grid System
       @mixin breakpoint($break) {
           @media screen and (min-width: $break) {
               @content;
           }
       }
   
       // Breakpoints you may use across the site within mixins
       $xxs: 360px;
       $xs: 480px;
       $s: 550px; 
       $sm: 600px;
       $m: 768px;
       $ml: 960px;
       $l: 1024px;
       $xl: 1200px;
       $xxl: 1400px; 
       
       // Breakpoints you plan on using with the Flexspan Grid System
       $breakpointsUsedForGrid:
       "s" $s,
       "m" $m,
       "l" $l;
       
       // CSS Variable
       // NOTE: You can not add SCSS variables to CSS variables, however you can use CSS variables in SCSS mixins
       :root {
           --fs-spacing-col: 15px;
           --fs-spacing-row: 15px;
       }
       
       // Importing the mixings for the Flexspan Grid System
       @import "_flexspan-grid-mixins", "_flexspan-grid-classes";
   

   3. Use the Documentation to use the differnt classes in your HTML

Table of Contents

• Intro
• How To Use
• 12 Grid System
• Breakpoints
• Nested Grids
• Fluid
• Forced Row
• Responsive Columns
• Control the Gap
• Reverse Classes
• Grid Alignment
• Flex vs Forced Container

Team

Main Contributors

• Brock Barnett - Ideator, Lead Developer and Lead Documentation Writer
• Donte White - Developer, Tester and Documentation Writer
• Malcom Harris - Developer and Tester
• Drew Hill - Collaborator and Tester
• Joe Sayegh - Tester

Special thanks to

• Drew Toth
• Paul Goepfert
• Stephen Delancey
• Laura Mahoney
• Josh Mahoney

Inspiration

• Flexbox Grid
• Flexbox Grid Mixins