Tag Archives: Less

Drupal 7 – Setup Bootstrap 3 Theme with Gulp for LESS compilation

Got a new responsive site freelance and i would like to try Bootstrap 3 theme in Drupal 7. A little bit confused at the very beginning because the theme has a lot of features and bug fixes ongoing. So the documentation is a bit lacking and i have to make some trials and errors before knowing what to do.

Some Drupal developers may also have problem on compiling LESS. So here i include a gulp script and some NodeJS packages to help.

Assume you have setup the Drupal 7.

1. Download the Bootstrap 3 Drupal theme. The current stable version is 7.x-3.0 which is a bit old and only works with Bootstrap 3.0.x. I am going to use 7.x-3.1 which supports the latest Bootstrap version (v3.3.2 at the moment i write this post). The 7.x-3.1 is still in beta (7.x-3.1-beta2). You could download it from the releases listing page.

2. Extract the Bootstrap 3 base theme to the sites/all/themes folder. You would found the starterkits folder containing the subthemes. as follow. Continue reading Drupal 7 – Setup Bootstrap 3 Theme with Gulp for LESS compilation

Advertisements

Less – clearfix mixin

Previously we talked about using mixin for clearfix in Sass.

 

Here is the Less example.

// The clearfix mixin
.clearfix() {
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

// Apply clearfix on .parent
.parent {
  .clearfix();
}

 

Done =)