A simple, responsive, flexbox grid system.
-
Percentage Based Grid
-
Batch takes advantage of the flexbox layout mode. Providing cell ordering, vertical alignment and equal cell heights!
-
Easy To Use
-
Download the precompiled CSS or the SCSS source file. Read the installation instructions to add Batch to your project.
-
Extendable Cell Sizes
-
Add more sizes to the
$cell-sizesmap to have thesmall-batch()mixin distill your custom cell classes.
Docs
Markup Structure
The markup below will result in a grid with one row and 3 cells.
<!-- Example Markup Code -->
<div class="batch-g batch-g--gutter batch-g--padding">
<div class="batch-c-1-3">
Grid Cell 1
</div>
<div class="batch-c-1-3">
Grid Cell 2
</div>
<div class="batch-c-1-3">
Grid Cell 3
</div>
</div>
<!-- Example Markup Result -->
Basic Usage
This example demonstrates how to set the width of a cell at all screen sizes.
<div class="batch-c-1-3">
This cell is 33% width on all screen sizes.
<div class="batch-c-2-3">
This cell is 66% width on all screen sizes.
<div class="batch-c-1-4">
This cell is 25% width on all screen sizes.
<div class="batch-c-1-2">
This cell is 50% width on all screen sizes.
<div class="batch-c-1-4">
This cell is 25% width on all screen sizes.
<div class="batch-c-3-8">
This cell is 37.5% width on all screen sizes.
<div class="batch-c-5-8">
This cell is 62.5% width on all screen sizes.
<div class="
batch-c-1-8
">
This cell is 12.5% width on all screen sizes.
<div class="batch-c-7-8">
This cell is 87.5% width on all screen sizes.
<div class="batch-c-1-1">
This cell is 100% width on all screen sizes.
Responsive Usage
This example demonstrates how to set the width of a cell at mobile ( batch-c-x-x ), tablet ( batch-c-md-x-x ) and desktop ( batch-c-lg-x-x ) screen sizes.
<div class="
batch-c-1-1
batch-c-md-1-2
batch-c-lg-1-4
">
This cell is 100% width on mobile size screens.
This cell is 50% width on tablet size screens.
This cell is 25% width on desktop size screens.
<div class="
batch-c-1-1
batch-c-md-1-2
batch-c-lg-1-4
">
This cell is 100% width on mobile size screens.
This cell is 50% width on tablet size screens.
This cell is 25% width on desktop size screens.
<div class="
batch-c-1-1
batch-c-md-1-2
batch-c-lg-1-4
">
This cell is 100% width on mobile size screens.
This cell is 50% width on tablet size screens.
This cell is 25% width on desktop size screens.
<div class="
batch-c-1-1
batch-c-md-1-2
batch-c-lg-1-4
">
This cell is 100% width on mobile size screens.
This cell is 50% width on tablet size screens.
This cell is 25% width on desktop size screens.
<div class="
batch-c-1-2
batch-c-md-5-8
batch-c-lg-1-3
">
This cell is 50% width on mobile size screens.
This cell is 62.5% width on tablet size screens.
This cell is 33.3% width on desktop size screens.
<div class="
batch-c-1-2
batch-c-md-3-8
batch-c-lg-2-3
">
This cell is 50% width on mobile size screens.
This cell is 37.5% width on tablet size screens.
This cell is 66.6% width on desktop size screens.
Grid Cell Classes
Default available cell sizes are 3rds, 4ths, 6ths, 8ths, 12ths and 24ths. Equivalent fractions are simplified. For example, batch-c-1-2 and batch-c-12-24 both equal 50%, so only batch-c-1-2 is made available.
1-1
1-2
1-3
1-4
1-6
1-8
1-12
1-24
2-3
3-4
3-8
5-6
5-8
5-12
5-24
7-8
7-12
7-24
11-12
11-24
13-24
17-24
19-24
23-24
Custom Cell Sizes
Create your own cell sizes by adding to the $cell-sizes Sass map in the SCSS source file. The key is the numerator and then the small-batch() mixin loops through the value array for each denominator. The key-value pair is used in the class name and is also used to calculate the width percentage. Additionally you can remove sizes from the list that you don't need in your project to lighten up the compiled CSS file.
// Default sizes are 3rds, 4ths, 6ths, 8ths, 12ths and 24ths:
// 1-1, 1-2, 1-3, 1-4, 1-6, 1-8, 1-12, 1-24
// 2-3
// 3-4, 3-8
// 5-6, 5-8, 5-12, 5-24
// 7-8, 7-12, 7-24
// 11-12, 11-24
// 13-24
// 17-24
// 19-24
// 23-24
$cell-sizes : (
1 : (1, 2, 3, 4, 6, 8, 12, 24),
2 : (3),
3 : (4, 8),
5 : (6, 8, 12, 24),
7 : (8, 12, 24),
11 : (12, 24),
13 : (24),
17 : (24),
19 : (24),
23 : (24)
);
Modifier Classes
Cell Ordering
Add a batch-c--order-xx-x class to a batch-c-x-x element to change the order of the cells. All sibling cells must also have a cell ordering modifier or the default index of 0 will be used. Resulting in that cell being in the first position. Adjust the total number of positions by changing the $batch-order-positions Sass variable in the SCSS source file. The default is 10 positions.
This example demonstrates how to order cells at tablet ( batch-c--order-md-x ) and desktop ( batch-c--order-lg-x ) screen sizes. Using a mobile first design approach, the mobile screen size uses the HTML source order.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border batch-g--gutter batch-g--padding">
<div class="batch-c-1-3 batch-c--order-md-2 batch-c--order-lg-3">
Grid Cell 1
</div>
<div class="batch-c-1-3 batch-c--order-md-1">
Grid Cell 2
</div>
<div class="batch-c-1-3 batch-c--order-md-3 batch-c--order-lg-2">
Grid Cell 3
</div>
</div>
<!-- Example Markup Result -->
This cell is ordered in the 1st position on mobile size screens.
This cell is ordered in the 2nd position on tablet size screens.
This cell is ordered in the 3rd position on desktop size screens.
This cell is ordered in the 2nd position on mobile size screens.
This cell is ordered in the 1st position on tablet size screens.
This cell is ordered in the 1st position on desktop size screens.
This cell is ordered in the 3rd position on mobile size screens.
This cell is ordered in the 3rd position on tablet size screens.
This cell is ordered in the 2nd position on desktop size screens.
Grid Border
Add the batch-g--border class to the batch-g grid wrapper element to add a border around the cells. Adjust the border size and color by changing the $batch-border and $batch-border-color Sass variables in the SCSS source file.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border">
<div class="batch-c-1-3">
Grid Cell 1
</div>
<div class="batch-c-1-3">
Grid Cell 2
</div>
<div class="batch-c-1-3">
Grid Cell 3
</div>
</div>
<!-- Example Markup Result -->
Grid Gutter
Add the batch-g--gutter class to the batch-g grid wrapper element to add a gutter between the cells. Adjust the gutter size by changing the $batch-gutter Sass variable in the SCSS source file.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border batch-g--gutter">
<div class="batch-c-1-3">
Grid Cell 1
</div>
<div class="batch-c-1-3">
Grid Cell 2
</div>
<div class="batch-c-1-3">
Grid Cell 3
</div>
</div>
<!-- Example Markup Result -->
Cell Padding
Add the batch-g--padding class to the batch-g grid wrapper element to add padding inside the cells. Adjust the padding size by changing the $batch-padding Sass variable in the SCSS source file.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border batch-g--gutter batch-g--padding">
<div class="batch-c-1-3">
Grid Cell 1
</div>
<div class="batch-c-1-3">
Grid Cell 2
</div>
<div class="batch-c-1-3">
Grid Cell 3
</div>
</div>
<!-- Example Markup Result -->
Cell Padding Horizontal (Right and Left) Only
Add the batch-g--padding-horizontal class to the batch-g grid wrapper element to add horizontal padding only inside the cells. Adjust the padding size by changing the $batch-padding Sass variable in the SCSS source file.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border batch-g--gutter batch-g--padding-horizontal">
<div class="batch-c-1-3">
Grid Cell 1
</div>
<div class="batch-c-1-3">
Grid Cell 2
</div>
<div class="batch-c-1-3">
Grid Cell 3
</div>
</div>
<!-- Example Markup Result -->
Cell Padding Vertical (Top and Bottom) Only
Add the batch-g--padding-vertical class to the batch-g grid wrapper element to add vertical padding only inside the cells. Adjust the padding size by changing the $batch-padding Sass variable in the SCSS source file.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border batch-g--gutter batch-g--padding-vertical">
<div class="batch-c-1-3">
Grid Cell 1
</div>
<div class="batch-c-1-3">
Grid Cell 2
</div>
<div class="batch-c-1-3">
Grid Cell 3
</div>
</div>
<!-- Example Markup Result -->
Reverse Direction
Add the batch-g--reverse class to the batch-g grid wrapper element to reverse the cells to display right to left.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border batch-g--gutter batch-g--padding batch-g--reverse">
<div class="batch-c-1-3">
Grid Cell 1
</div>
<div class="batch-c-1-3">
Grid Cell 2
</div>
<div class="batch-c-1-3">
Grid Cell 3
</div>
</div>
<!-- Example Markup Result -->
Vertically Align Top
Add the batch-g--valign-top class to the batch-g grid wrapper element to vertically align cells to the top of each other.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border batch-g--gutter batch-g--padding batch-g--valign-top">
<div class="batch-c-1-3">
Knockeen hills irish poteen glenrothes jungle juice mudslide creamsicle polmos krakow? Irish flag speyside pink lady van winkle family reserve, man o'war cointreau cointreau glenkinchie pall mall; pisco sour. Chocolate soldier piña colada, ginza mary old mr. boston belvedere arran? Old bushmill's glenkinchie glenturret, sex on the beach; blair athol daiquiri bourbon lancer? Vodka sunrise lemon split fettercairn ballantine jack and coke harvey's bristol cream. Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
<div class="batch-c-1-3">
Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
<div class="batch-c-1-3">
Chocolate soldier piña colada, ginza mary old mr. boston belvedere arran? Old bushmill's glenkinchie glenturret, sex on the beach; blair athol daiquiri bourbon lancer? Vodka sunrise lemon split fettercairn ballantine jack and coke harvey's bristol cream. Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
</div>
<!-- Example Markup Result -->
Vertically Align Center
Add the batch-g--valign-center class to the batch-g grid wrapper element to vertically align cells to the center of each other.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border batch-g--gutter batch-g--padding batch-g--valign-center">
<div class="batch-c-1-3">
Knockeen hills irish poteen glenrothes jungle juice mudslide creamsicle polmos krakow? Irish flag speyside pink lady van winkle family reserve, man o'war cointreau cointreau glenkinchie pall mall; pisco sour. Chocolate soldier piña colada, ginza mary old mr. boston belvedere arran? Old bushmill's glenkinchie glenturret, sex on the beach; blair athol daiquiri bourbon lancer? Vodka sunrise lemon split fettercairn ballantine jack and coke harvey's bristol cream. Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
<div class="batch-c-1-3">
Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
<div class="batch-c-1-3">
Chocolate soldier piña colada, ginza mary old mr. boston belvedere arran? Old bushmill's glenkinchie glenturret, sex on the beach; blair athol daiquiri bourbon lancer? Vodka sunrise lemon split fettercairn ballantine jack and coke harvey's bristol cream. Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
</div>
<!-- Example Markup Result -->
Vertically Align Bottom
Add the batch-g--valign-bottom class to the batch-g grid wrapper element to vertically align cells to the bottom of each other.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border batch-g--gutter batch-g--padding batch-g--valign-bottom">
<div class="batch-c-1-3">
Knockeen hills irish poteen glenrothes jungle juice mudslide creamsicle polmos krakow? Irish flag speyside pink lady van winkle family reserve, man o'war cointreau cointreau glenkinchie pall mall; pisco sour. Chocolate soldier piña colada, ginza mary old mr. boston belvedere arran? Old bushmill's glenkinchie glenturret, sex on the beach; blair athol daiquiri bourbon lancer? Vodka sunrise lemon split fettercairn ballantine jack and coke harvey's bristol cream. Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
<div class="batch-c-1-3">
Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
<div class="batch-c-1-3">
Chocolate soldier piña colada, ginza mary old mr. boston belvedere arran? Old bushmill's glenkinchie glenturret, sex on the beach; blair athol daiquiri bourbon lancer? Vodka sunrise lemon split fettercairn ballantine jack and coke harvey's bristol cream. Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
</div>
<!-- Example Markup Result -->
Vertically Align Self Top
Add the batch-c--valign-self-top class to a batch-c-x-x element to vertically align that cell only to the top of it’s batch-g parent grid wrapper element.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border batch-g--gutter batch-g--padding batch-g--valign-center">
<div class="batch-c-1-3">
Knockeen hills irish poteen glenrothes jungle juice mudslide creamsicle polmos krakow? Irish flag speyside pink lady van winkle family reserve, man o'war cointreau cointreau glenkinchie pall mall; pisco sour. Chocolate soldier piña colada, ginza mary old mr. boston belvedere arran? Old bushmill's glenkinchie glenturret, sex on the beach; blair athol daiquiri bourbon lancer? Vodka sunrise lemon split fettercairn ballantine jack and coke harvey's bristol cream. Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
<div class="batch-c-1-3 batch-c--valign-self-top">
Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
<div class="batch-c-1-3">
Chocolate soldier piña colada, ginza mary old mr. boston belvedere arran? Old bushmill's glenkinchie glenturret, sex on the beach; blair athol daiquiri bourbon lancer? Vodka sunrise lemon split fettercairn ballantine jack and coke harvey's bristol cream. Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
</div>
<!-- Example Markup Result -->
Vertically Align Self Bottom
Add the batch-c--valign-self-bottom class to a batch-c-x-x element to vertically align that cell only to the bottom of it’s batch-g parent grid wrapper element.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border batch-g--gutter batch-g--padding batch-g--valign-center">
<div class="batch-c-1-3">
Knockeen hills irish poteen glenrothes jungle juice mudslide creamsicle polmos krakow? Irish flag speyside pink lady van winkle family reserve, man o'war cointreau cointreau glenkinchie pall mall; pisco sour. Chocolate soldier piña colada, ginza mary old mr. boston belvedere arran? Old bushmill's glenkinchie glenturret, sex on the beach; blair athol daiquiri bourbon lancer? Vodka sunrise lemon split fettercairn ballantine jack and coke harvey's bristol cream. Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
<div class="batch-c-1-3 batch-c--valign-self-bottom">
Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
<div class="batch-c-1-3">
Chocolate soldier piña colada, ginza mary old mr. boston belvedere arran? Old bushmill's glenkinchie glenturret, sex on the beach; blair athol daiquiri bourbon lancer? Vodka sunrise lemon split fettercairn ballantine jack and coke harvey's bristol cream. Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
</div>
<!-- Example Markup Result -->
Vertically Align Self Center
Add the batch-c--valign-self-center class to a batch-c-x-x element to vertically align that cell only to the center of it’s batch-g parent grid wrapper element.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border batch-g--gutter batch-g--padding batch-g--valign-top">
<div class="batch-c-1-3">
Knockeen hills irish poteen glenrothes jungle juice mudslide creamsicle polmos krakow? Irish flag speyside pink lady van winkle family reserve, man o'war cointreau cointreau glenkinchie pall mall; pisco sour. Chocolate soldier piña colada, ginza mary old mr. boston belvedere arran? Old bushmill's glenkinchie glenturret, sex on the beach; blair athol daiquiri bourbon lancer? Vodka sunrise lemon split fettercairn ballantine jack and coke harvey's bristol cream. Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
<div class="batch-c-1-3 batch-c--valign-self-center">
Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
<div class="batch-c-1-3">
Chocolate soldier piña colada, ginza mary old mr. boston belvedere arran? Old bushmill's glenkinchie glenturret, sex on the beach; blair athol daiquiri bourbon lancer? Vodka sunrise lemon split fettercairn ballantine jack and coke harvey's bristol cream. Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
</div>
<!-- Example Markup Result -->
Align Center
Add the batch-g--align-center class to the batch-g grid wrapper element to align cells to the center of the wrapper.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border batch-g--gutter batch-g--padding batch-g--align-center">
<div class="batch-c-1-3">
Bundaberg champagne cocktail, gordon's paradise; gimlet aberlour piscola, flaming volcano glenlossie, moscow mule aberlour.
</div>
</div>
<!-- Example Markup Result -->
Align Right
Add the batch-g--align-right class to the batch-g grid wrapper element to align cells to the right of the wrapper.
<!-- Example Markup Code -->
<div class="batch-g batch-g--border batch-g--gutter batch-g--padding batch-g--align-right">
<div class="batch-c-1-3">
Grid Cell 1
</div>
</div>
<!-- Example Markup Result -->
Installation
Precompiled CSS
Download the minified CSS file and reference the external style sheet in the head section of your HTML document. Or copy the styles from the dev CSS file into your project's stylesheet
<head>
<link href="batch.min.css" rel="stylesheet">
</head>
SCSS Source File
Download the SCSS source file and import Batch in your main manifest file.
@import "_batch.scss";