How to install a Start Bootstrap theme on Ruby on Rails 4 using Sass?

I want to install a theme called Grayscale of Start Bootstrap and I don’t know how to do it. user2993674 on Stackoverflow Install a new Ruby on Rails by running >> rails new grayscale. Navigate to your project folder >> cd grayscale then run the following commands: Sass / SCSS >> git clone https://github.com/blackfyre/https://github.com/blackfyre/grayscale-sass.git.git >>
Continue reading: How to install a Start Bootstrap theme on Ruby on Rails 4 using Sass?

How to change Bootstrap’s carousel animation

The popular carousel plugin of Bootstrap has been used on many websites. The jQuery plugin itself uses CSS class from the Less code of Bootstrap. So you can not change the classes names use for the carousel structure (without changing the plugin too). In most situations you will not change the original source code of
Continue reading: How to change Bootstrap’s carousel animation

Compile Bootstrap with Less v2 and the autoprefix plugin

Since Bootstrap v3.2 the grunt autoprefixer plugin is part of Bootstrap’s build process. This autoprefixer postprocessor makes the prefix mixins (found in less/mixins/vendor-prefixes.less) deprecated. Less 2 introduced plugins for the Less compiler, see also http://lesscss.org/usage/#plugins. These plugins enables you to add your own postprocessors. Postprocessors change the compiled CSS code. An example can be found
Continue reading: Compile Bootstrap with Less v2 and the autoprefix plugin

Bootstrap 3.2.0 and Shrinkwrap

When running npm install with the latest 3.2.0. release of Bootstrap I found the following error: Loading “Gruntfile.js” tasks…ERROR >> AssertionError: args.type is required Warning: Task “dist” not found. Use –force to continue. This issue can be solved by running the grunt update-shrinkwrap task just after npm install. With version 3.2.0. Booststrap switch to the
Continue reading: Bootstrap 3.2.0 and Shrinkwrap

A11Y Buttons

The JBST WordPress Theme meets WordPress.org’s Accessibility Guidelines. I think accessibility support is important. Recently i got a e-mail from Nick, Co-founder of HKC radio. Nick told me JBST default navbar buttons don’t have a label or title. The login button has a title when logged in, but when not logged in the button only
Continue reading: A11Y Buttons

Adding a background gradient to Bootstrap’s navbar with Less

When writing a book about Less and have to answer a question about adding a background gradient to JBST’s navbar the answer was found easy. Bootstrap’s navbar is styled with two CSS classes the .navbar class sets it’s structure while the .navbar-default or .navbar-inverse classes add colors and other styling. Bootstrap’s mixins contain also mixin
Continue reading: Adding a background gradient to Bootstrap’s navbar with Less

Integrate LESS in JBST WordPress Theme

The WP LESS plugin offers a good opportunity to integrate LESS in your WordPress theme. How does this fit JBST? First i try to set the requirements. JBST is based on Twitter’s Bootstrap, so we will have the option to update Twitter’s Bootstrap without changing any custom setting or extensions. JBST WordPress Theme can be
Continue reading: Integrate LESS in JBST WordPress Theme

Custom Navbars in Twitter’s Bootstrap 3

Update: Also read Adding a background gradient to Bootstrap’s navbar with Less Everyone knows the navbars for navigation from Twitter’s Bootstrap 2. In version 3 the structure has been changed a little, also see Twitter’s Bootstrap 3 RC2 (important changes). The navbar intends to be the main navigation on a website. When using more navbars on
Continue reading: Custom Navbars in Twitter’s Bootstrap 3

Twitter’s Bootstrap 3 RC2 (important changes)

The release candidate 2 of Twitter’s Bootstrap 3 shows some important changes. I decide to write a separate blog for it. Before start reading read first to get an idea of the changes between Twitter’s Bootstrap 3 and Twitter’s Bootstrap 2. Grid RC2 shows new grid class prefixes: col-xs-* for mobile devices follow by col-sm-*
Continue reading: Twitter’s Bootstrap 3 RC2 (important changes)

It’s a shame! The newest version of Github’s most popular project is not backward compatible

Yes, i’m talking about Twitter’s Bootstrap. Release Candidate 2 of version 3 of Bootstrap 3 has been released today. And we will find at least class name changes again, see: What is wrong with Bootstrap 3 RC2. Is there a reason to be not backward compatible? No. Or maybe…. you will need some extra CSS
Continue reading: It’s a shame! The newest version of Github’s most popular project is not backward compatible