New extension: middleman-bootstrap-navbar

Community Releases
#1

Hey guys,

I just published an extension to generate Twitter Bootstrap navbars: https://github.com/krautcomputing/middleman-bootstrap-navbar
After building a couple of them by hand I got tired and put together this gem.
(heavily inspired by https://github.com/julescopeland/Rails-Bootstrap-Navbar)
Let me know what you think!

Manuel

#2

Thanks for sharing, Manuel!

Would you mind submitting this to you extension directory as well?

http://directory.middlemanapp.com/#/extensions/all

#3

Already did! :wink:
https ://github.com/middleman/middleman-directory/pull/3
(space in link because otherwise it’s included with a picture and I get the error message “new users can’t upload pictures”…)

#4

@tdreyno Could you merge in my PR? Thanks!

#5

Will do… wasn’t receiving notifications from that repo for some reason.

#6

For the new users, who want to try the middleman-bootstrap-navbar and need to set up the whole thing, beginning with Bootstrap itself, here’s a little primer. @manuelmeurer, please correct any mistakes I’ve done. And thanks for the gem!

Using middleman 3.3.3
Using middleman-bootstrap-navbar 2.0.0
Using bootstrap-navbar 2.1.1
Using bootstrap-sass 3.1.1.1

Since middleman-bootstrap-navbar doesn’t include any HTML/CSS/JS code to the generated project files, there is no need to initialize new project to use it. We can just use an existing MM project or start with new middleman init bootstrap-navbar-probe and then make the steps described here. But this gem depends on other gems/resources and we have the option to put Bootstrap files manually or use another gem. So, middleman-bootstrap-navbar depends on bootstrap-navbar gem (required, gives the navbar main helpers code), optionally we can use bootstrap-sass, so you don’t have to manually download Sass-based Bootstrap files and put it in you project stylesheets, javascripts folders.

1. Put these lines in Gemfile of your Middleman project:

gem 'bootstrap-sass', '~> 3.1.1', require: false
gem 'middleman-bootstrap-navbar'

(If you’re interested why require: false look here.)

2. Put these lines in config.rb of your Middleman project:

activate :bootstrap_navbar

There is nothing else needed in this line, unless you prefer to manually put Bootstrap files and not use the bootstrap-sass gem and assets pipeline. If you prefer the manual way:

activate :bootstrap_navbar do |bootstrap_navbar|
  bootstrap_navbar.bootstrap_version = '3.0.3'
end

3. Put these lines in your main css/scss/… (stylesheets) file (all.css):

$icon-font-path: '../fonts/bootstrap/';
@import "bootstrap";
@import "bootstrap/theme";

The second line is optional, you can override styles later.

4. Put these lines in your main javascript file (all.js):

//= require jquery-1.11.1.min
//= require bootstrap

The jQuery line is important (this step is missed in the docs I’ve read), since the ** bootstrap-sass** gem doesn’t include jQuery code.

5. Put the jquery-1.11.1.min.js file to your javascripts folder.

Of course the particular version number depends on what you put in your project.

After these steps you can put the example code from bootstrap-navbar wiki to a new index.html.haml file and fire up middleman (or bundle exec middleman if you don’t use bundler integration with rvm or other similar solution). The menu should display properly and the drop-down should be active.

To do

Is there an actively developed jquery gem to put instead of manually copying JS files? https://github.com/STRd6/jquery-source sees to be dead. https://github.com/ai/jquery-cdn seems to be a solution. Any other candidates?

#7

Yep, everything’s correct.

For including jQuery you have three options:

  1. Add the file manually to your project and include in your main JS file, as you described. The problem is that when you want to update to a newer jQuery version, you need to delete the file, add the new one and update your main JS file… not so nice.

  2. Load from CDN, best is Google’s: https://developers.google.com/speed/libraries/devguide#jquery The advantages are described here: https://github.com/ai/jquery-cdn#load-from-cdn

  3. Use https://github.com/ai/jquery-cdn which seems to be the best combination of 1. and 2. It uses a local copy during development and the Google CDN when building your project. That way you can develop your website completely offline.

#8

I found one missing piece in my primer. The glyphicon font is not working. The wiki example has:

= navbar_item '/contact' do
        %span.glyphicon.glyphicon-hand-right
        Contact Us!

but I get a missing glyph symbol (square) instead of right hand. What’s missing?

#9

This has nothing to do with middleman-bootstrap-navbar. The Glyphicons are part of Bootstrap. Check that you loaded that part of Bootstrap correctly.

#10

Partially nailed it. After investigating what middleman build produces, seems that the build process puts fonts in build/fonts/bootstrap/ folder. So I added a config line to my all.css:

$icon-font-path: '../fonts/bootstrap/';
@import "bootstrap";

The page displays correctly both in development and production mode (right hand is displayed). But the inspector panel (in Safari or Chrome) shows some 404 items, interestingly they have periods and the end of the name:

It seems as if they were requested for the server root folder (in my case: http://komorbookpro.local:4567/glyphicons-halflings-regular.woff.). What about those periods and how to get rid of 404’s from my page?

#11

Finally I’ve fixed this and this was my mistake. Somehow I manually added @font-face at the end of my all.scss using src: asset-url code, copied from some source. That was unnecessary. To wrap things up I’ve updated point 3. in my original post to include the $icon-font-path: '../fonts/bootstrap/'; line. Case closed.