blog: Customgrid-bootstrap

#68 

Creating a Custom Grid in Sass-Bootstrap

Tags:
- Creating a custom grid in Sass-Bootstrap
- Bootstrap
- Sass
- Custom Grid

Using Sass-Bootstrap in a recent project we were faced with an unusual issue. While the framework is beautifully responsive and very easy to adjust, our client’s designs had 5 breaking-points, which means that as screen resolution decreases the layout and element visibility changes 5 times - but Bootstrap supports only 4 breaking points out of the box.

This means we had to create a custom breaking-point with a custom grid. We couldn’t find a good solution for this on the web, so after spending a few days struggling with the implementation, we thought it might be useful to document the process:

1- Create a custom grids.scss file next to your main styles.scss (or whatever you chose to call it).

2- Include this file in you main scss file:
Example:
```css
@import "bootstrap.scss";
@import "grids.scss";
```
(Be sure to include it after the bootstrap.scss file. Otherwise you will get an “unknown function” error in step 4)

3- Open the new custom file and determine your new grid breakpoint, minimum width and maximum width.

Let me explain these terms (If you know what these mean, go ahead and skip to step 4):

- Breakpoint is where the container of your site will change and the new custom grid will take effect
- Maximum and minimum width determine the range in which the new custom grid will be in control of the elements.

Example:
```css
// Intermediate small screen / phone. (Custom breakpoint).
$screen-is: 550px;

// Minimum screen size for the custom grid.
$screen-is-min: ($screen-is) !default;
// Maximum screen size for the custom grid
$screen-is-max: ($screen-sm - 1) !default;

```
4- If your new custom grid is between 2 default grids, You have set a maximum width to the smaller grid so it won't affect elements in the range of the custom grid.

Example:
```css
// Maximum screen size for Extra small screen / phone.
$screen-xs-max: ($screen-is-min - 1);
```

5- If you want to set a fixed container for the custom grid, you have to set the container class, otherwise it will be a fluid container

Example:
```css
// Container width for the custom grid.
//
// Set the container width, and override it for fixed navbars in media queries.
.container {
  @media (min-width: $screen-is-min) and (max-width: $screen-is-max) {
    width: 500px;
  }
}
``` 

6- In the new custom file, call the make-grid function. Because the grids have to be in a specific order, you have to copy all the make-grid functions from the standard grids.scss file. 

In the example below note that we added a normal make-grid functions that uses the custom “is” grid (We just called it “is”, You can call it “bat-man” if you want).

```css
// Xstra small grid
@include make-grid(xs);

// Function that creates the custom grid
// Intermediate small grid
@media (min-width: $screen-is-min) {
  @include make-grid(is);
}

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: $screen-sm-min) {
  @include make-grid(sm);
}

// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: $screen-md-min) {
  @include make-grid(md);
}

// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: $screen-lg-min) {
  @include make-grid(lg);
}
```

7- Finally, you have to add visibility and hidden classes to your new custom grid.

Which means that in the range of the custom grid, you can make elements visible or hidden just by adding these classes:

Example:
```css
// Add visibility class for the custom grid
@media (min-width: $screen-is-min) and (max-width: $screen-is-max) {
  @include responsive-visibility('.visible-is');
}

// Add hidden class for the custom grid
@media (min-width: $screen-is-min) and (max-width: $screen-is-max) {
  @include responsive-invisibility('.hidden-is');
}

```

And then in your HTML:
```html
<div class=”hidden-is”>Hello World!</div>
```
This div will be hidden in the range of the new custom grid.



Your new custom file in a whole should look something like this:
```css
// Intermediate small screen / phone. (Custom breakpoint).
$screen-is: 550px;

// Minimum screen size for the custom grid.
$screen-is-min: ($screen-is) !default;
// Maximum screen size for the custom grid
$screen-is-max: ($screen-sm - 1) !default;

// Maximum screen size for Extra small screen / phone.
$screen-xs-max: ($screen-is-min - 1);

// Container width for the custom grid.
//
// Set the container width, and override it for fixed navbars in media queries.
.container {
  @media (min-width: $screen-is-min) and (max-width: $screen-is-max) {
    width: 500px;
  }
}

// Xstra small grid
@include make-grid(xs);

// Function that creates the custom grid
// Intermediate small grid
@media (min-width: $screen-is-min) {
  @include make-grid(is);
}

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: $screen-sm-min) {
  @include make-grid(sm);
}

// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: $screen-md-min) {
  @include make-grid(md);
}

// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: $screen-lg-min) {
  @include make-grid(lg);
}


// Add visibility class for the custom grid
@media (min-width: $screen-is-min) and (max-width: $screen-is-max) {
  @include responsive-visibility('.visible-is');
}

// Add hidden class for the custom grid
@media (min-width: $screen-is-min) and (max-width: $screen-is-max) {
  @include responsive-invisibility('.hidden-is');
}
```