Will McLean is a designer and artist working in the Central Coast of NSW where he lives with his wife and 2 children.

Will is a meticulous developer and favours simplicity and clarity within his code. He can’t stand writing things twice so searches for any way to automate. His experiments can be found in the Exercises section of this site.

Will designs within systems. No project is too small for a design system. He favours the unusual, if not, how can he progress? You can read about his work in the Case Studies section of this site.

Updated: November 1, 2017

Tags: , , , ,

This is a Knowledge Base post.

Adding just the Bootstrap grid using less

Sometimes we want to use only the Bootstrap grid in a project and not everything else. We then use Less and the Bootstrap Mixins to incorporate the grid throughout our project. If you would like to do the same then follow these steps:

1. Download Bootstrap using the “Download Source” link here .

2. Put the ‘bootstrap/less’ folder from the download into your project folder. Best to be in the same folder as your project Less files.

3. Include the following files from that bootstrap/less folder in the top of your main less file:

variables.less
mixins.less
normalize.less
scaffolding.less
grid.less

If you do not want to include the whole scaffolding file you can just pull out the necessary code (see below) and include that directly to your main Less file. Below is how our main Less file looks:

/* Core variables and mixins */
@import "bootstrap/less/variables.less";
@import "bootstrap/less/mixins.less";

/* Reset and dependencies */
@import "bootstrap/less/normalize.less";

// Pull out the necessary code from bootstrap/less/scaffolding.less
// Reset the box-sizing
* {
    .box-sizing(border-box);
}
*:before,
*:after {
    .box-sizing(border-box);
}

@import "bootstrap/less/grid.less";

4. You can now start using the Bootstrap grid mixins documented within the Bootstrap documentation in your project.

Below is an example of how we set our modules out. We wrap everything in the .l-strip but this is just a personal way of doing things and can be ignored:

HTML

<div class="l-strip">
    <div class="l-holder">
        <div class="l-inner">
            <div class="module">The module</div>
        </div>
    </div>
</div>

CSS

.l-strip {
width: 100%;
    .clearfix;
}

.l-holder {
    .container;
}

.l-inner {
    .make-row();
}

.module {
    .make-xs-column( 8 );
    .make-xs-column-offset( 2 );
    .make-md-column( 6 );
    .make-md-column-offset( 3 );
}