grid.sass

💅 Classes

The grid.sass compiles to a set of classes you can see listed here:

CSS class	Description
`grid`	Required class for the wrapping container.
`grid--full*`	Span a children across all columns.
`grid--span-{columns}*`	Span a children across multible columns.
`grid--flex`	Required class for a flexible column layout.
`grid--flex-{columns}*`	Defines the amount of columns all children will be placed with.

Classes with an * star at the end can be used with a breakpoint modifier like --t.

📖 Examples

In order to use grid.sass you can simply add the grid class to your wrapping element and already get you column-based layout. (12 columns by default)

Below you will find some examples using all classes the grid.sass package is providing. Keep in mind that your configuration for grid.sass may vary.

All examples:

1. Basic Setup

Setting up grid.sass is as easy as think. Simply add the grid class to the wrapping container and you are done:

<div class="grid">
    <div>Column 1</div>
    <div>Column 2</div>
    <!-- ... -->
</div>

2. Span Across Multible Columns

Since in most cases you will need to span across multible columns (e.g. three boxes side by side) grid.sass has a handy helper for that:

<div class="grid">
    <div class="grid--span-4">Box 1</div>
    <div class="grid--span-4">Box 2</div>
    <div class="grid--span-4">Box 3</div>
</div>

3. Using Breakpoint Modifiers

In some cases your content may vary between different types of devices / screens. For that grid.sass provides the easy to use breakpoint modifiers.

The following example will show three boxes side by side. (See Example #2) But for mobile devices the boxes will be spanned across the full layout.

<div class="grid">
    <div class="grid--span-4 grid--full--m">Box 1</div>
    <div class="grid--span-4 grid--full--m">Box 2</div>
    <div class="grid--span-4 grid--full--m">Box 3</div>
</div>

4. Flexible Grid Layout

In some cases you will run into a limit with your given column layout. (e.g. displaying 5 equal columns on a 12-column-based layout)

Therefore the grid--flex class can help you as long as you don't need to span across multible columns.

<div class="grid grid--flex grid--flex-5">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
    <div>Box 5</div>
</div>

5. Breakpoint Modifiers for grid-flex

Like the normal gird you can also use the breakpoint modifiers to change the layout of the grid--flex class.

With the given Example above you might want to change layout for mobile devices to a 3-column-based layout on tablets like here:

<div class="grid grid--flex grid--flex-5 grid--flex-3--t">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
    <div>Box 5</div>
</div>

♻️ Variables

The grid.sass package is build with modification in mind. Therefor everthing can be changed or alternated to your needs.

You can modify these variables:

$grid-sass--flex (Boolean)
$grid-sass--columns (Number)
$grid-sass--gaps (Map)
$grid-sass--breakpoints (Map)

$grid-sass--flex

The flex variable determines whether the grid--flex class and its helper classes should generated.

Default Value:

$grid-sass--flex: true;

$grid-sass--columns

Determines the amount of columns your layout should be based on.

Default Value:

$grid-sass--columns: 12;

$grid-sass--gaps

The grid.sass package uses the Map-type for Sass/Scss. These can be basically seen as objects containing key-value pairs.

For the gap configuration the gap size has to given with the key null.

If you have alternating gap sizes (like the default one) you can name the breakpoint as well as the changed gap size.

Note: You mustn't provide a gap size for each breakpoint since it will bloat the resulting file size.

Default Value:

$grid-sass--gaps: (
    null: 2rem,
    '--t': 1rem
);

$grid-sass--breakpoints

The grid.sass package uses the Map-type for Sass/Scss. These can be basically seen as objects containing key-value pairs.

In order to provide alternating column configuration or gap sizes you will need to define one or multible breakpoints.

In order to work properly you need to have a null: null pair within the Map.

Besides that you can add as many breakpoints as you like. The key of each pair is the breakpoint modifier (conatining the --) and the respective value contains the media query (without the @media keyword) when the breakpoint starts.

Default Value:

$grid-sass--breakpoints: (
    null: null,
    '--t': '(max-width: 1299px)',
    '--m': '(max-width: 699px)'
);

🛠 Modify grid.sass

For most projects you might want to modify grid.sass to your needs.

You can easily modify the configuration for this by simply defining the variables listed above before you import grid.sass.

Here is a short example in Sass:

$grid-sass--flex: false
$grid-sass--columns: 8
 
@import '~grid.sass'

🗝 Licence

Pile is released under the MIT License. See the bundled LICENSE file for details.