10AviationBPABusiness licensingCMSCMS_1Computer and mobile accessoriesComputer SoftwareCRMCybersecurityDesktopDigital marketingDiversityEmbeddedEntertainmentFarmingGamblingHelthcareHomeInsuranceIoTIoT_1LawMachine LearningMediaMilitaryMobileMobile_1QAQA_1Real EstateRestaurantsSocial projectSocialSocial projectSocial project_1Software developmentSportTransport

Bootstrap 3.3 Extend Grid System (LESS)

by Svitla Team

October 17, 2016
scroll

Did you know that adding XL breakpoint to grid system without touching source code of Bootstrap is possible? Import grid.less-, define some variables, and create one mixin. Let’s dive in.

In almost all cases, xs, sm, md, and lg sizes are enough for the application. You just need to investigate, design, and plan what breakpoints size we need — lg will be the largest one. But unexpected situations happens and some elements can be in need of a grid that adapts to larger screens.

Method 1: We can solve this problem by changing the values of current breakpoints and refactor all markup. It can be painful for developers and the QA team.

Method 2: Extend grid system with one more breakpoint, XL, and start to use col-xl to new elements.

The most uncomfortable are columns (col-sm-1 … col-lg-12) that generate by mixin .make-grid-columns(). This mixin has hardcoded collection and no mechanism for passing new items to this array.

@item: ~”.col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}”;

That’s why we can’t extend grid system without editing core files or duplicating some logic in code. Let’s choose the lesser evil — duplicating some code but not editing library source.

Extends grid in LESS without touching lib code

Declare XL variables for breakpoints:

@screen-xl:                  1500px;
@screen-xl-min:              @screen-xl;
@screen-xl-desktop:          @screen-xl-min;
@screen-xl-max:              @screen-xl-min - 1;
@container-xlarge-desktop:   1400px + @grid-gutter-width;
@container-xl:               @container-xlarge-desktop;

Set a new breakpoint for container and generate column, push, pull, offset selectors for XL.

.container {
  @media (min-width: @screen-xl-min) {
    width: @container-xl;
  }
}
@media (min-width: @screen-xl-min) {
  .make-grid(xl);
}

Till now everything is great and elegant! We have declared variables and compile selectors with mixins frombootstrap/mixins/grid-framework.less

But in Grid Framework .make-grid-columns-additional() we can’t use without duplication because it has hard-coded values in @item. 

.make-grid-columns-additional() {
  .col(@index) {
    @item: ~".col-xl-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) {
    @item: ~".col-xl-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) {
    @{list} {
      position: relative;
      min-height: 1px;
      padding-left:  ceil((@grid-gutter-width / 2));
      padding-right: floor((@grid-gutter-width / 2));
    }
  }
  .col(1);
}
.make-grid-columns-additional();

Inside .make-grid-columns-additional() we can populate @item with as many breakpoints as we want. 

We can now check it importing from bootstrap just variables, mixins and grid.less.

@import "../bower_components/bootstrap/less/variables";
@import "../bower_components/bootstrap/less/mixins";
@import "../bower_components/bootstrap/less/grid";
@screen-xl:                  1500px;
@screen-xl-min:              @screen-xl;
@screen-xl-desktop:          @screen-xl-min;
@screen-xl-max:              @screen-xl-min - 1;
@container-xlarge-desktop:   1400px + @grid-gutter-width;
@container-xl:               @container-xlarge-desktop;
.container {
  @media (min-width: @screen-xl-min) {
    width: @container-xl;
  }
}
@media (min-width: @screen-xl-min) {
  .make-grid(xl);
}
.make-grid-columns-additional() {
  .col(@index) {
    @item: ~".col-xl-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) {
    @item: ~".col-xl-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) {
    @{list} {
      position: relative;
      min-height: 1px;
      padding-left:  ceil((@grid-gutter-width / 2));
      padding-right: floor((@grid-gutter-width / 2));
    }
  }
  .col(1);
}
.make-grid-columns-additional();

As output, we get just extended grid styles to enjoy.

You can check source code on GitHub: bootstrap-grid-extend

by Svitla Team
October 17, 2016

Related articles

article
Using Placeholders and Input Fields
A popular pattern in web design uses the input field, a placeholder that slides up on focus or while a user is typing. Different frameworks that are based on material design implement it in different ways, but each of them uses JavaScript to handle changes in the input field. Can we solve this problem with no JS code?
by Svitla Team
November 14, 2016
article
Svitla Blog Quality Assurance
article

Stay informed - subscribe!

Join our newsletter and get the latest content right in your inbox once or twice per week.

Now you will get awesome news!