What is different about this grid system from the others out there?
- No IE support. The death to internet explorer happened on June 15, 2022. Which is good because having to build in IE fallbacks or just simply supporting it out of the box has been holding grid systems back from using the latest CSS advances.
- Pre-defining rows is optional. Most grid systems force you to create a row and even calls the sections inside of it a column. Whereas this grid system allows you to truly use flex and have rows naturally form as the content needs to but for when you need, forcing rows is still available.
- A true gap system. In most grid systems margins are used to fake a gap system. In this grid system the gap CSS property is used, meaning it only creates a space between two elements in the grid and does not add a space when it is against the edge of the grid. Additionally, gaps are able to be controlled at a global level
- Customizable Breakpoints. Most grid systems use a max-width breakpoint system which does not align with most standards, it forces you to add more classes than you would need to and it doesn't allow you to have a section not flexed until a certain size. With this grid system you not only have min-width but also you have control over the breakpoint values to match your site. Like most grid systems by Default though you have 3 breakpoints, "s" for small, "m" for medium and "l" for large but in this one you can add more, for example if you needed an extra large you could add "xl" to your $breakpointsUsedForGrid list and now be able to use "fs-xl-6" to do a 50% at that breakpoint.
- Offsets in both Directions. In other grid systems you can only offset from the left of your element but in Flexspan you can offset from either side. The advantage of this is it allows you to not have to wrap each element in its own row if you want at certain breakpoints for an element to be on its own row without actually visually spanning the whole row.
How to put in on the site
Sites are often complex and end up having multiple styles sheets. Remember you only want 1 set of classes to appear across your own site. So with that in mind we have two files you can pull into your site and an example of the code you can use to pull in those files.
The "flexspan-grid-mixins.scss" if a file you could pull in multiple SCSS partials if need be as repeating mixins in your SCSS files will not add duplicates to the final CSS file like classes do. However be cautious with adding the ":root" CSS and the "flexspan-grid-classes.scss" file multiple times in you SCSS files since these are creating classes it will duplicate those classes and you don't want to accidently overwrite yourself or have a bloated CSS file.
So if you are making a brand new SCSS style sheet you would add the following to your base SCSS partial or layout SCSS partial depending on your SASS Structure conventions.
// 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";
Based on 12 Grid System
These classes are based on a 12 column grid system. So instead of trying to determine what percentage width your element needs to be you can use these classes you just need to know how many columns your element will span across.
Using these classes produces a percent based flex-basis allowing for elements to fall into their own rows with an equal yet controllable gapping between elements. Think of classes you use as creating the the percentage by taking the number you use in the class and dividing it by 12 and then moving the decimal point over two places. For example fs-12 would span 100% of the parent container and fs-6 would span 50% and fs-4 would be 33.33%.
Keep in mind, if the contents of the element does not allow the width of the element to shrink to its correct width, then you may see more rows form than you expect. To address this look into Fluid and Max-Width options.
<div class="fs-container">
<!-- Column 1 -->
<div class="fs-12">
<div class="block-of-content">fs-12</div>
</div>
<!-- Column 2 -->
<div class="fs-1">
<div class="block-of-content">fs-1</div>
</div>
<!-- Column 3 -->
<div class="fs-11">
<div class="block-of-content">fs-11</div>
</div>
<!-- Column 4 -->
<div class="fs-2">
<div class="block-of-content">fs-2</div>
</div>
<!-- Column 5 -->
<div class="fs-10">
<div class="block-of-content">fs-10</div>
</div>
<!-- Column 6 -->
<div class="fs-3">
<div class="block-of-content">fs-3</div>
</div>
<!-- Column 7 -->
<div class="fs-9">
<div class="block-of-content">fs-9</div>
</div>
<!-- Column 8 -->
<div class="fs-4">
<div class="block-of-content">fs-4</div>
</div>
<!-- Column 9 -->
<div class="fs-8">
<div class="block-of-content">fs-8</div>
</div>
<!-- Column 10 -->
<div class="fs-5">
<div class="block-of-content">fs-5</div>
</div>
<!-- Column 11 -->
<div class="fs-7">
<div class="block-of-content">fs-7</div>
</div>
<!-- Column 12 -->
<div class="fs-6">
<div class="block-of-content">fs-6</div>
</div>
<!-- Column 13 -->
<div class="fs-6">
<div class="block-of-content">fs-6</div>
</div>
<!-- Column 14 -->
<div class="fs-1">
<div class="block-of-content">fs-1</div>
</div>
<!-- Column 15 -->
<div class="fs-6">
<div class="block-of-content">fs-6</div>
</div>
<!-- Column 16 -->
<div class="fs-5">
<div class="block-of-content">fs-5</div>
</div>
</div>
To create a "50/50" section all you have to do is create an element with a class of fs-container and then add two elements inside of it with a class of fs-6. In some other grid systems you have to create rows but in this grid system you do not have to, two flex-span-6 elements will fit on one row naturally.
<div class="fs-container">
<!-- Column 1 -->
<div class="fs-6"></div>
<!-- Column 2 -->
<div class="fs-6"></div>
</div>
Breakpoints
When working with grid sysyem, all classes come equipped with multiple breakpoint values (exception being "fs-container", "fs-row", and "fs-forced-container"). Breakpoints are based off $breakpointsUsedForGrid list within your SASS.
- fs-{breakpoint}-6
- fs-{breakpoint}-middle
- fs-{breakpoint}-self-bottom
- fs-col-count-{breakpoint}-6
<div class="fs-container">
<!-- Column 1 -->
<div class="fs-6 fs-m-4">
<div class="block-of-content">fs-6 fs-m-4</div>
</div>
<!-- Column 2 -->
<div class="fs-6 fs-m-4">
<div class="block-of-content">fs-6 fs-m-4</div>
</div>
<!-- Column 3 -->
<div class="fs-12 fs-m-4">
<div class="block-of-content">fs-12 fs-m-4</div>
</div>
</div>
<div class="fs-container">
<!-- Column 1 -->
<div class="fs-12 fs-m-2 fs-l-3">
<div class="block-of-content">fs-12 fs-m-2 fs-l-3</div>
</div>
<!-- Column 2 -->
<div class="fs-8 fs-m-7 fs-l-3">
<div class="block-of-content">fs-8 fs-m-7 fs-l-3</div>
</div>
<!-- Column 3 -->
<div class="fs-4 fs-m-5 fs-l-6">
<div class="block-of-content">fs-4 fs-m-5 fs-l-6</div>
</div>
</div>
Nested Grids
Nesting grids inside grids inside grids is a prime example of how to do complex layouts. Though, keep in mind when you are developing sites you should keep your layout classes separate from your element styles. In this example below you will see any styling goes on separate classes from the grid system classes.
<div class="fs-container">
<!-- Level 1 -->
<div class="fs-m-7 column-level1">
Level 1: fs-m-7
<div class="fs-container container-level2">
<!-- Level 2 -->
<div class="fs-m-9 column-level2">
Level 2: fs-m-9
<div class="fs-container container-level3">
<!-- Level 3 -->
<div class="fs-m-4 column-level3">
Level 3: fs-m-4
</div>
<!-- Level 3 -->
<div class="fs-m-8 column-level3">
Level 3: fs-m-8
</div>
</div>
</div>
<!-- Level 2 -->
<div class="fs-m-3 column-level2">
Level 2: fs-m-3
<!-- Level 3 -->
<div class="fs-container container-level3">
<div class="fs-m-auto column-level3">
Level 3: fs-m-auto
</div>
</div>
</div>
</div>
</div>
<!-- Level 1 -->
<div class="fs-m-5 column-level1">
Level 1: fs-m-5
<div class="fs-container container-level2">
<!-- Level 2 -->
<div class="fs-m-12 column-level2">
Level 2: fs-m-12
<div class="fs-container container-level3">
<!-- Level 3 -->
<div class="fs-m-6 column-level3">
Level 3: fs-m-6
</div>
<!-- Level 3 -->
<div class="fs-m-6 column-level3">
Level 3: fs-m-6
</div>
</div>
</div>
</div>
</div>
</div>
Fluid
With the grid system, other than having percentage based columns you also have the flexibility to utilize fluid columns which resize based off the existing space in the flex container.
To enable fluid columns you can do so by adding "fs-fluid" to the parent container.
<div class="fs-container fs-fluid">
<!-- Column 1 -->
<div class="fs-1">
<div class="block-of-content">fs-1</div>
</div>
<!-- Column 2 -->
<div class="fs-1">
<div class="block-of-content">fs-1</div>
</div>
<!-- Column 3 -->
<div class="fs-1">
<div class="block-of-content">fs-1</div>
</div>
</div>
You can also make a column fluid by adding "fs-auto" in place of the percentage columns
<div class="fs-container">
<!-- Column 1 -->
<div class="fs-auto">
<div class="block-of-content">fs-auto</div>
</div>
<!-- Column 2 -->
<div class="fs-5">
<div class="block-of-content">fs-5</div>
</div>
<!-- Column 3 -->
<div class="fs-2">
<div class="block-of-content">fs-2</div>
</div>
</div>
In certain cases where you might want majority of columns to be fluid but specific ones to be defined sizes, you can do so by adding "fs-no-grow" to a flex element.
<div class="fs-container fs-fluid">
<!-- Column 1 -->
<div class="fs-2 fs-no-grow">
<div class="block-of-content">fs-2 fs-no-grow</div>
</div>
<!-- Column 2 -->
<div class="fs-1">
<div class="block-of-content">fs-1</div>
</div>
<!-- Column 3 -->
<div class="fs-1">
<div class="block-of-content">fs-1</div>
</div>
</div>
No-Wrapping Rows
When using "fs-row", columns are forced into one singular row rather than breaking into multiple rows once width of columns exceeds container.
<div class="fs-row">
<!-- Column 1 -->
<div class="fs-4">
<div class="block-of-content">fs-row </div>
</div>
<!-- Column 2 -->
<div class="fs-auto">
<div class="block-of-content"></div>
</div>
<!-- Column 3 -->
<div class="fs-1">
<div class="block-of-content"></div>
</div>
</div>
By default there is no margin below fs-row however when you need it then you can add the class "fs-row-gap" but remember to be careful when adding this as the last row you likely do not want that margin as you can seen in the example below it adds an un-needed space compared to the example above to when the last row does not have" fs-row-gap" added.
<!-- fs-row with no gap -->
<div class="fs-row ">
<!-- Column 1 -->
<div class="fs-4">
<div class="block-of-content">Just fs-row</div>
</div>
<!-- Column 2 -->
<div class="fs-auto">
<div class="block-of-content"></div>
</div>
<!-- Column 3 -->
<div class="fs-1">
<div class="block-of-content"></div>
</div>
</div>
<!-- fs-row with gap -->
<div class="fs-row fs-row-gap">
<!-- Column 1 -->
<div class="fs-4">
<div class="block-of-content">fs-row fs-row-gap</div>
</div>
<!-- Column 2 -->
<div class="fs-auto">
<div class="block-of-content"></div>
</div>
<!-- Column 3 -->
<div class="fs-1">
<div class="block-of-content"></div>
</div>
</div>
<!-- fs-row with gap -->
<div class="fs-row fs-row-gap">
<!-- Column 1 -->
<div class="fs-4">
<div class="block-of-content">fs-row fs-row-gap</div>
</div>
<!-- Column 2 -->
<div class="fs-auto">
<div class="block-of-content"></div>
</div>
<!-- Column 3 -->
<div class="fs-1">
<div class="block-of-content"></div>
</div>
</div>
"Flexed" Container vs "Forced" Container
In some cases you may want to really leverage flexbox to literally flex in size to fill up row, columns to be differnt widths, or even have content centered along the vertical axis. This is when you use the "fs-container" class and and add differnt classes to the flex/child elements to display it to your liking. This method uses Flexbox css.
fs-containerExample Text
Example Text
Example Text
Example Text
<div class="fs-container ">
<!-- Column 1 -->
<div class="fs-m-6">
<div class="block-of-content">fs-m-6<br> <img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-6">
<div class="block-of-content">fs-m-6<br> Example Text</div>
</div>
<!-- Column 3 -->
<div class="fs-m-12">
<div class="block-of-content">fs-m-12<br> Example Text</div>
</div>
<!-- Column 4 -->
<div class="fs-m-7">
<div class="block-of-content">fs-m-7<br> Example Text</div>
</div>
<!-- Column 5 -->
<div class="fs-m-2">
<div class="block-of-content">fs-m-2<br> Example Text</div>
</div>
</div>
In other cases, you may want to predetermine how many columns there are, and if you are okay with the columns always being equal widths. We call this Forced and you use the "fs-forced-container" class and then instead of adding a class to each direct child, on that container you indicate the amount of columns you want to force. This method uses Grid css.
<div class="fs-forced-container fs-col-count-1 fs-col-count-m-2">
<!-- Column 1 -->
<div class="">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
<!-- Column 2 -->
<div class="">
<div class="block-of-content">Example Text</div>
</div>
<!-- Column 3 -->
<div class="">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
<!-- Column 4 -->
<div class="">
<div class="block-of-content">Example Text</div>
</div>
<!-- Column 5 -->
<div class="">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
</div>
<div class="fs-forced-container fs-col-count-1 fs-col-count-m-3">
<!-- Column 1 -->
<div class="">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
<!-- Column 2 -->
<div class="">
<div class="block-of-content">Example Text</div>
</div>
<!-- Column 3 -->
<div class="">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
<!-- Column 4 -->
<div class="">
<div class="block-of-content">Example Text</div>
</div>
<!-- Column 5 -->
<div class="">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
</div>
You can still have one element span multiple columns if you need.
fs-col-span-{breakpoint}-{Number of Columns to span}
<div class="fs-forced-container fs-col-count-1 fs-col-count-m-2">
<!-- Column 1 -->
<div class="">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
<!-- Column 2 -->
<div class="">
<div class="block-of-content">Example Text</div>
</div>
<!-- Column 3 -->
<div class="">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
<!-- Column 4 -->
<div class="">
<div class="block-of-content">Example Text</div>
</div>
<!-- Column 5 -->
<div class="">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
</div>
Control the Gap
Gutters are the negative space, or gaps, between columns and rows. You can control the gutters for the entire grid at once or just for a particular container by using the CSS variables `--fs-gutter-col` and `--fs-spacing-row` which is already setup at the root level.
When you need to control the gap of a particular container you can make a class that has that same CSS Variable name with the new size as seen below.
.custom-gap {
--fs-spacing-col: 20px;
--fs-spacing-row: 5px;
}
Be careful when making a large gap, remember that as you increase the gap that means the width of the columns is being reduced. If you compare the width of the fs-1 from above and below you can see that the larger gap being used below made the columns smaller.
Additionally, the content in that column is wider than the column which is actually breaking the row. A possible solution for the issue below could be to add an overflow hidden to the fs-1 but we would recommend instead that you just need that cell to take up more than one column.
Also, remember if you use fs-fluid then if the content breaks out of column width it will grow.
.custom-gap-2 {
--fs-spacing-col: 50px;
--fs-spacing-row: 5px;
}
Reverse Classes
- fs-row-reverse
- fs-col-reverse
- fs-{breakpoint}-row-reverse
- fs-{breakpoint}-col-reverse
Example Text
<div class="fs-container">
<!-- Column 1 -->
<div class="fs-m-6">
<div class="block-of-content">fs-6
<br> <img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-6">
<div class="block-of-content">fs-m-6
<br> Example Text
</div>
</div>
</div>
vs.
Example Text
<div class="fs-container fs-row-reverse">
<!-- Column 1 -->
<div class="fs-m-6">
<div class="block-of-content">fs-6
<br> <img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-6">
<div class="block-of-content">fs-m-6
<br> Example Text
</div>
</div>
</div>
It works with fs-row as well.
Example Text
<div class="fs-row fs-row-reverse">
<!-- Column 1 -->
<div class="fs-6">
<div class="block-of-content">fs-6
<br> <img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
<!-- Column 2 -->
<div class="fs-6">
<div class="block-of-content">fs-6
<br> Example Text
</div>
</div>
</div>
Plus it works with responsive. In this example on mobile the image will always be on top but on larger screens the content and image will alternate.
Example Text
<div class="fs-container fs-m-row-reverse">
<!-- Column 1 -->
<div class="fs-m-6">
<div class="block-of-content">fs-6
<br> <img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-6">
<div class="block-of-content">fs-m-6
<br> Example Text
</div>
</div>
</div>
- fs-first-in-row
- fs-first-in-col
- fs-{breakpoint}-first-in-row
- fs-{breakpoint}-first-in-col
<coming>
vs.
Example Text
<coming>
Grid Alignment
When utilizing the grid system, you have the ability to align columns based off their horizontal or vertical to leverage layouts to your liking.
Vertical: Use flex classes to align flex columns within flex container along horizontal axis
<div class="fs-container fs-start">
<!-- Column 1 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
<!-- Column 3 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
</div>
<div class="fs-container fs-center">
<!-- Column 1 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
<!-- Column 3 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
</div>
<div class="fs-container fs-end">
<!-- Column 1 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
<!-- Column 3 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
</div>
<div class="fs-container fs-around">
<!-- Column 1 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
<!-- Column 3 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
</div>
<div class="fs-container fs-between">
<!-- Column 1 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
<!-- Column 3 -->
<div class="fs-m-6">
<div class="block-of-content">
fs-m-3
</div>
</div>
</div>
Horizontal: Use flex classes to align flex columns within flex container along horizontal axis
Example Text
<div class="fs-container fs-top">
<!-- Column 1 -->
<div class="fs-m-6">
<div class="block-of-content">fs-m-6
<br> <img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-6">
<div class="block-of-content">fs-m-6
<br> Example Text
</div>
</div>
</div>
Example Text
<div class="fs-container fs-middle">
<!-- Column 1 -->
<div class="fs-m-6">
<div class="block-of-content">fs-m-6
<br> <img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-6">
<div class="block-of-content">fs-m-6
<br> Example Text
</div>
</div>
</div>
Example Text
<div class="fs-container fs-bottom">
<!-- Column 1 -->
<div class="fs-m-6">
<div class="block-of-content">fs-m-6
<br> <img src="https://via.placeholder.com/210x55?text=img" alt="">
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-6">
<div class="block-of-content">fs-m-6
<br> Example Text
</div>
</div>
</div>
Horizontal: To align flex columns independent of one another you, can also add a class to the specific flex element.
Example Text
Example Text
<div class="fs-container">
<!-- Column 1 -->
<div class="fs-m-4">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
<br>Example Text
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-4 fs-self-top">
<div class="block-of-content">fs-self-top</div>
</div>
<!-- Column 3 -->
<div class="fs-m-4">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
<br>Example Text
</div>
</div>
</div>
Example Text
Example Text
<div class="fs-container">
<!-- Column 1 -->
<div class="fs-m-4">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
<br>Example Text
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-4 fs-self-middle">
<div class="block-of-content">fs-self-middle</div>
</div>
<!-- Column 3 -->
<div class="fs-m-4">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
<br>Example Text
</div>
</div>
</div>
Example Text
Example Text
<div class="fs-container">
<!-- Column 1 -->
<div class="fs-m-4">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
<br>Example Text
</div>
</div>
<!-- Column 2 -->
<div class="fs-m-4 fs-self-bottom">
<div class="block-of-content">fs-self-bottom</div>
</div>
<!-- Column 3 -->
<div class="fs-m-4">
<div class="block-of-content">
<img src="https://via.placeholder.com/210x55?text=img" alt="">
<br>Example Text
</div>
</div>
</div>
Offsets
Offsets work along with the column span class. Allowing you to offset one column by however many columns you need. Just remember the total number of columns your element is spanning and number you are offsetting should not exceed 12. Additionally, you can choose to offset from the left or right or a combination.
fs-offset-right-{Number of Columns to offset by}
fs-2
fs-2
fs-2
fs-2
fs-offset-right-5
fs-4
<!-- Positioning a cell spanning 1 columns to the opposite end of the container by offsetting it by 11 columns -->
<div class="fs-container>
<div class="fs-offset-11-0 fs-1>
<div class="block-of-content>fs-offset-11-0 fs-1</div>
</div>
</div>
<!-- Positioning a cell spanning 2 columns to the opposite end of the container by offsetting it by 10 columns -->
<div class="fs-container>
<div class="fs-offset-10-0 fs-2>
<div class="block-of-content>fs-offset-10-0 fs-2</div>
</div>
</div>
<!-- Positioning a cell spanning 3 columns to the opposite end of the container by offsetting it by 9 columns -->
<div class="fs-container>
<div class="fs-offset-9-0 fs-3>
<div class="block-of-content>fs-offset-9-0 fs-3</div>
</div>
</div>
<!-- A cell spanning 3 offset by 6 columns next to a non-offset cell spanning 3 -->
<div class="fs-container>
<div class="fs-offset-6-1 fs-3>
<div class="block-of-content>fs-offset-6-1 fs-3</div>
</div>
<div class="fs-3>
<div class="block-of-content>fs-3</div>
</div>
</div>
<!-- A cell spanning 3 offset by 3 columns next to two non-offset cells spanning 3 -->
<div class="fs-container>
<div class="fs-offset-3-1 fs-3>
<div class="block-of-content>fs-offset-3-1 fs-3</div>
</div>
<div class="fs-3>
<div class="block-of-content>fs-3</div>
</div>
<div class="fs-3>
<div class="block-of-content>fs-3</div>
</div>
</div>
<!-- Two cells spanning 3 offset by 2 columns -->
<div class="fs-container>
<div class="fs-offset-3-2 fs-3>
<div class="block-of-content>fs-offset-3-2 fs-3</div>
</div>
<div class="fs-offset-3-2 fs-3>
<div class="block-of-content>fs-offset-3-2 fs-3</div>
</div>
</div>
<!-- 4 Cells spanning 3 columns with no offsets -->
<div class="fs-container>
<div class="fs-3>
<div class="block-of-content>fs-3</div>
</div>
<div class="fs-3>
<div class="block-of-content>fs-3</div>
</div>
<div class="fs-3>
<div class="block-of-content>fs-3</div>
</div>
<div class="fs-3>
<div class="block-of-content>fs-3</div>
</div>
</div>
<!-- Two cells spanning 4 columns the first with no offset and the second with a offset spanning 4 columns -->
<div class="fs-container>
<div class="fs-4>
<div class="block-of-content>fs-4</div>
</div>
<div class="fs-offset-4-1 fs-4>
<div class="block-of-content>fs-offset-4-1 fs-4</div>
</div>
</div>
<!-- 3 Cells spanning 4 columns with no offsets -->
<div class="fs-container>
<div class="fs-4>
<div class="block-of-content>fs-4</div>
</div>
<div class="fs-4>
<div class="block-of-content>fs-4</div>
</div>
<div class="fs-4>
<div class="block-of-content>fs-4</div>
</div>
</div>
<!-- 3 Cells spanning 2 columns with the first having an offset of 4 columns and the last having an oddset of 2 columns -->
<div class="fs-container>
<div class="fs-offset-4-2 fs-2>
<div class="block-of-content>fs-offset-4-2 fs-2</div>
</div>
<div class="fs-2>
<div class="block-of-content>fs-2</div>
</div>
<div class="fs-offset-2-2 fs-2>
<div class="block-of-content>fs-offset-2-2 fs-2</div>
</div>
</div>
<!-- 3 Cells spanning 2 columns with the first offset by 4 columns and the others offset by 1 column -->
<div class="fs-container>
<div class="fs-offset-4-3 fs-2>
<div class="block-of-content>fs-offset-4-3 fs-2</div>
</div>
<div class="fs-offset-1-3 fs-2>
<div class="block-of-content>fs-offset-1-3 fs-2</div>
</div>
<div class="fs-offset-1-3 fs-2>
<div class="block-of-content>fs-offset-1-3 fs-2</div>
</div>
</div>
<!-- 3 Cells spanning 2 columns each offset by 2 columns -->
<div class="fs-container>
<div class="fs-offset-2-3 fs-2>
<div class="block-of-content>fs-offset-2-3 fs-2</div>
</div>
<div class="fs-offset-2-3 fs-2>
<div class="block-of-content>fs-offset-2-3 fs-2</div>
</div>
<div class="fs-offset-2-3 fs-2>
<div class="block-of-content>fs-offset-2-3 fs-2</div>
</div>
</div>
<!-- 6 Cells spanning 2 columns with no offsets -->
<div class="fs-container>
<div class="fs-2>
<div class="block-of-content>fs-2</div>
</div>
<div class="fs-2>
<div class="block-of-content>fs-2</div>
</div>
<div class="fs-2>
<div class="block-of-content>fs-2</div>
</div>
<div class="fs-2>
<div class="block-of-content>fs-2</div>
</div>
<div class="fs-2>
<div class="block-of-content>fs-2</div>
</div>
<div class="fs-2>
<div class="block-of-content>fs-2</div>
</div>
</div>
<!-- 6 Cells spanning 1 column each with an offset of 1 column -->
<div class="fs-container>
<div class="fs-offset-1-6 fs-1>
<div class="block-of-content>fs-offset-1-6 fs-1</div>
</div>
<div class="fs-offset-1-6 fs-1>
<div class="block-of-content>fs-offset-1-6 fs-1</div>
</div>
<div class="fs-offset-1-6 fs-1>
<div class="block-of-content>fs-offset-1-6 fs-1</div>
</div>
<div class="fs-offset-1-6 fs-1>
<div class="block-of-content>fs-offset-1-6 fs-1</div>
</div>
<div class="fs-offset-1-6 fs-1>
<div class="block-of-content>fs-offset-1-6 fs-1</div>
</div>
<div class="fs-offset-1-6 fs-1>
<div class="block-of-content>fs-offset-1-6 fs-1</div>
</div>
</div>
Mixins Reference
The following includes are detailed explanations of the mixins used to create the Flexspan Grid System. Feel free to create your own classes uses these or go as far as creating your own grid system!
@include flex-parent() Arguments consist of ($display: flex, $flex‑direction: null, $flex‑wrap: null, $justify‑content: null, $align‑items: null, $align‑content: null)
| Arguments | Default value | Values | Description |
|---|---|---|---|
| $display | flex | flex | inline-flex | generate a block-level or an inline-level grid container |
| $flex-direction | null | null | row | row-reverse | column | column-reverse | define the main axis and the direction |
| $flex-wrap | null | null | nowrap | wrap | wrap-reverse | whether flex items are forced into a single line or can be wrapped onto multiple lines |
| $justify-content | null | null | flex-start | flex-end | center | space-between | space-around | space-evenly | defines space between and around content items along the main-axis of container |
| $align-items | null | null | flex-start | flex-end | center | baseline | stretch | defines space between and around flex items along the cross-axis of container |
| $align-content | null | null | flex-start | flex-end | center | space-between | space-around | stretch | defines space between and around content items along the cross-axis of their container |
@include flex-item() Arguments consist of ($col: initial, $grid‑columns: 12, $col‑offset: null, $offset‑direction: left, $use‑flex: true, $align‑self: null, $flex‑grow: 0, $flex‑shrink: 1,$flex‑basis: auto, $order: null, $shorthand: true $width: null, $max-width: null, $min‑width: null, $height: null, $max‑height: null, $min‑height: null)
| Arguments | Default value | Values | Description |
|---|---|---|---|
| $col | initial | initial | <number> | auto | equal | none | positive | <number> Defines the number of columns this cell spans and results in flex-grow defined by $flex-grow flex-shrink set to zero and flex basis set to a percentage based on your columns and gapinitial results in flex: 0 1 auto;auto results in flex: 1 1 auto;equal results in flex: 0 1 auto;none results in flex: 1 1 0;positive results in flex-grow defined by $flex-grow unless it is zero it will be forced to be flex-grow: 1; and flex-shrink and flex-basis are both set to 0 |
| $grid-columns | 12 | <number> | define the total number of columns in the grid, this number will be used to calculate the flex basis. |
| $col-offset | null | null | <percentage> | <percentage> offset a width of columns. |
| $offset-direction | left | left | right | will determine if the offset is on the left or right of the item. |
| $use-flex | true | true | false | <boolean> determines if display flex styles are added |
| $align-self | null | null | auto | flex-start | flex-end | center | baseline | stretch | override the align-items value |
| $flex-grow | 0 | <number> | grow relative to the rest of items in the grid. specifies what amount of space inside the flex container the item should take up. |
| $flex-shrink | 1 | <number> | shrink relative to the rest of items in the grid |
| $flex-basis | auto | <length> | auto | specifies the initial main size of a item |
| $order | null | null | <integer> | specifies the order in the grid container |
| $shorthand | true | true | false | use flex property as shorthand by default. use three properties flex-basis, flex-grow and flex-shrink if false. |
| $width | null | null | <boolean> | <width> | auto | specifies the width of an element |
| $max-width | null | null | <boolean> | <width> | auto | sets the maximum width of an element |
| $min-width | null | null | <boolean> | <width> | auto | sets the minimum width of an element |
| $height | null | null | <height> | specifies the height of an element |
| $max-height | null | null | <height> | sets the maximum height of an element |
| $min-height | null | null | <height> | sets the minimum height of an element |
Where did the name come from?
My coworkers originally kept adding a form of my name to it calling it FlexBrox which I was flattered by however, I wanted a naming convention that made sense. I am a bit old school and used to working in tables both for early web development and in HTML emails. When I try to explain other grid systems I realized that classes like "col-1" does not mean one column it means it spans across one column in your grid. Which is similar to the colspan attribute you find on tables in HTML. Since we are using flexbox as our base I combine them to be Flexspan.