Tag Archives: Bootstrap

CMS

Drupal 7 – IE fix for Bootstrap 3 theme

Leave a comment

Previously i have a post about using Bootstrap 3 theme in Drupal 7.

 

If the website you are building needs IE 8 support, a few hacks has to been done. Please note that using CDN to serve the Bootstrap source files will not work in this case. So you have to use method 1 to serve the Bootstrap source files locally when installing the Bootstrap 3 theme in Drupal as stated here.

1. Copy the system/html.tpl.php from the Bootstrap 3 base theme to your subtheme templates folder.
Continue reading Drupal 7 – IE fix for Bootstrap 3 theme →

Advertisement
CMS

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

3 Comments

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 →

CSS

Bootstrap 3 – Tooltip width

2 Comments

Say i have the following text field which i would like to show the tooltip on the right.

<input type="text" class="form-control" name="nickname" rel="txtTooltip" title="tooltip text" data-toggle="tooltip" data-placement="right"/>

 

Let’s invoke the tooltip in Javascript as follow:

$('input[rel="txtTooltip"]').tooltip();

 

The tooltip above has a limited width.
bootstrap-3-tooltip-width-1
Continue reading Bootstrap 3 – Tooltip width →

AngularJS, Web Development

Yeoman – Setup AngularJS and Foundation 5 with Sass

7 Comments

The generator-angular written by the Yeoman team comes with Bootstrap integration. But instead of using Bootstrap, i would like to use Foundation 5 with Sass. The following example is created under Node.js v0.10.29.

1. Create your project directory. In my case, i will name the project ng-foundation.

mkdir ng-foundation

 

2. Move to the ng-foundation folder.

cd ng-foundation

 

3. Scaffold the AngularJS project using the generator-angular as usual.

yo angular

Continue reading Yeoman – Setup AngularJS and Foundation 5 with Sass →

Web Development

Setup Yeoman in Windows PowerShell

4 Comments

Update @ 2015-09-23: Using PowerShell is just my personal preference, You could use MS-DOS in Windows if your machine doesn’t have PowerShell installed.

1. Download Node.js and install it and make sure you have the npm package manager selected before the installation.
setup-yeoman-in-powershell-1
 
Continue reading Setup Yeoman in Windows PowerShell →