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 );
}

Skrollr cutting off the bottom of the page on mobile

Skrollr was preventing me from scrolling all the way down my page on mobile. I had put the id skrollr-body onto my body tag already so that was not the issue.

It turned out the issue was that skrollr was being initiated before two Flexsliders on my page. What I needed to do was to force Skrollr to only initiate after flexslider had set itself up.

I used the jQuery deferred method documented in this post.

Here is my final code. You will want to remove the console log messages once you have it working.

      var myFlexslider = function() {

        var r = $.Deferred();

        $('.venue-promotions-slider').flexslider({
          controlNav: false,
          directionNav: false,
          slideshowSpeed: 4000,
        });

        console.log('Run flexslider');

        // This is my function to show the images only after the slider is initiated. You may not need this.
        $('.venue-promotions-slider-img').show(); 
        console.log('Show promo slider');

        return r;

      };

      var mySkrollr = function() {

        var s = skrollr.init({
          forceHeight: false
        });

        skrollr.menu.init(s, {
            animate: true,
            easing: 'swing',
            duration: function(currentTop, targetTop) {
              return 1000;
            },
        });

        console.log('Initialise Skrollr');

      };

      myFlexslider().done( mySkrollr() );

Address fixed position bug on Chrome using -webkit-transform

I had a header that I wanted to be fixed to the top of the screen.

.header {
position: fixed;
top: 0;
left: 0;
}

In Chrome 36 and under the header was behaving strangely. It was disappearing in the middle section of the page and then reappearing when the mouse rolled over the place where it was initially positioned.

I fixed this by adding the below declaration to my css.

-webkit-transform: translateZ(0);

This source for this fix was found here:
http://stackoverflow.com/questions/20503424/positionfixed-not-working-in-google-chrome

A full-screen, centered background image with a centered logo for all browsers

Introduction

I recently tried to add a full screen hero image to a site with a logo sitting in the middle of it. It was way harder than it should have been which made me want to write this article for anyone else trying to achieve it.

Continue reading A full-screen, centered background image with a centered logo for all browsers