Definitive Guide to Middleman 4 and Bootstrap

#1

Definitive Guide to Middleman 4 and Bootstrap?

Could enlightened members of the forum give a clear explanation of how a ruby noob (like me), can get Middleman 4 with its lack of asset pipeline up and running with Bootstrap 3?

I managed it pretty easily with v3 of Middleman, but have been pounding away on Middleman 4 trying to get myself up and running with Bootstrap and a clean slate to start work in with absolutely no success. Errors have mostly related to missing assets, key of which was bootstrap’s css.

The documentation still seems to mostly refer to Middleman 3. I’m guessing I’m not the only one out there going round in circles on this?

Hope there’s a good samaritan out there who can put the ignorant among us on the right track! Thanks!

1 Like
#2

I have an example here that does this, but with Sprockets. If you need an example without using Sprockets, others might be able to help you.

#3

Thanks so much for this - this is might just do the trick, will see if I can get it setup. Actually I was having trouble with my sprocket references which is why I turned to the forum. I will definitely give the above a shot, but any chance of more detailed instructions in the README on Github?

I tried rolling back to Middleman 3.3.3 but then all hell seemed to break loose in my Ruby environment (which I manage with RVM) and I’m looking at a wipe the slate clean and start again type scenario anyway.

#4

You’re welcome and I’m glad that I could help. The syntax used for this setup should be quite straightforward, and the example contained only the code necessary to get Bootstrap installed and nothing else. Let me know if there is anything that is not clear and I will try to explain it.

#5

Anyone got the current version of Bootstrap (4 beta 2.1) running with Middleman 4? Ideally with the official Bootstrap Rubygem using SassC.

I got it working, but its unbearably slow …

#6

Would you consider sharing your setup?

#7

Relevant gems i used:

gem 'middleman', git: 'https://github.com/middleman/middleman.git', ref: "8e6aba9"
gem 'middleman-sprockets', '~> 4.1', '>= 4.1.1'
# gem 'sprockets', '~> 4.0.0.beta6' # To enable SassC, n/a currently
gem 'bootstrap', '~> 4.0.0.beta3'

source 'https://rails-assets.org' do
  gem 'rails-assets-jquery', '2.1.1' # Bootstrap JavaScript depends on jQuery
end

Relevant config.rb:

activate :sprockets do |c|
  c.expose_middleman_helpers = true
end

Also be aware that Bootstrap tooltips and popovers depend on popper.js for positioning. The bootstrap gem already depends on the popper_js gem, so you can just import it into your applications JS file like so:

//= require jquery
//= require popper
//= require bootstrap-sprockets
//= require_tree .
1 Like
#8

I’m using “really external” webpack to integrate bootstrap 4; it does use node-sass compiler.

One can use webpack via external pipeline of middleman 4. However, I found it hard to make it work together (with “advanced” webpack config), and rather use no pipeline in middleman, and run webpack externally; thus using middleman to convert a bunch of md files to html (template inheritance, html minification, etc), each pointing to the bundle.min.js and bundle.min.css. And have external webpack project to create these bundles (in particular autoprefixing, css and js minification). This seems to be working so far (I’ve been using it on these days for pet project).

I build html with:
middleman build

And then assets with:
yarn run build

Middleman removes bundle files, so if I only changed md files, I’m using middleman build --no-clean; if I changed styles/js, I only rebuild assets. If I’m designing (developing assets), I start node’s http-server build/, and edit assets in place.

#9

Does the middleman-sprockets gem use sassc? Or do you include the sassc gem yourself?

#10

If you include Sprockets >= 4.0, it should use SassC.
I include it myself though, as it will show which version of Sass is used upon startup:

== The Middleman is loading
== Sprockets will render css with SassC
== LiveReload accepting connections from ws://local_url:35729
== View your site at "http://tyr.local:4567", "http:/local_url:4567"
== Inspect your site configuration at "http://local_url l:4567/__middleman", "http://local_url:4567/__middleman"
#11

In trying to get this to work, I’m getting errors due to incompatible sass version dependencies. Bootstrap needs sass >= 3.5.2 and the key culprit seems to be compass-import-once which is tied to sass < 3.5 and >= 3.2. Everything else is fine with sass 3.5.2.

Any thoughts

Bundler could not find compatible versions for gem "sass":
In Gemfile:
bootstrap (~> 4.0.0) was resolved to 4.0.0, which depends on
  sass (>= 3.5.2)

middleman (~> 4.2.1) was resolved to 4.2.1, which depends on
  compass-import-once (= 1.0.5) was resolved to 1.0.5, which depends on
    sass (< 3.5, >= 3.2)

middleman (~> 4.2.1) was resolved to 4.2.1, which depends on
  sass (< 4.0, >= 3.4.0)

middleman (~> 4.2.1) was resolved to 4.2.1, which depends on
  middleman-core (= 4.2.1) was resolved to 4.2.1, which depends on
    sass (>= 3.4)

sassc was resolved to 1.11.4, which depends on
  sass (>= 3.3.0)

My Gemfile:

source 'https://rubygems.org'

gem 'middleman', '~> 4.2.1'
gem 'middleman-autoprefixer', '~> 2.7'
gem 'middleman-sprockets'
gem 'sassc'

gem 'bootstrap', '~> 4.0.0'

gem 'tzinfo-data' if Gem.win_platform?
gem 'wdm', '~> 0.1' if Gem.win_platform?

gem 'haml'
gem 'nokogiri'

source 'https://rails-assets.org' do
  gem 'rails-assets-jquery', '2.1.1'
end
#12

Still looking for a decent tutorial on how to integrate Middleman with Bootstrap via bundler, I’ve tried everything in this page and nothing works, its like is needed some kind of vudu magic to try to integrate a css framework with this…

1 Like
#13

I really like middleman app. but, man is it under supported.

Bootstrap 4 gem failing?
#14

You don’t need Sprockets to use Bootstrap’s SASS — here’s an easy solution using the official Bootstrap gem:

config[:sass_assets_paths] << Bootstrap.stylesheets_path

I haven’t got anywhere with the JS though, it looks like the default Padrino helper javascript_include_tag has no support for files outside of source/.

1 Like
#15

I managed to set up Middleman using SASS for stylesheets and Sprockets for JS using Ruby 3.1.1 and some other goodies like minification etc. Hope it’ll save someone hours.
Gemfile.lock

middleman (4.4.2)
middleman-sprockets (4.1.1)

Gemfile:

ruby '3.1.1'
source "https://rubygems.org"
gem 'middleman', '~> 4.2'
gem 'middleman-livereload'
gem "middleman-sprockets"
gem 'middleman-imageoptim'
gem "middleman-minify-html"
gem 'mini_racer' # faster JS compiles
gem 'oj' # faster JS compiles
gem 'bootstrap-sass'
gem 'image_optim_pack'
gem 'webrick'

config.rb:

config[:sass_assets_paths] << Bootstrap.stylesheets_path
configure :development do
  set :debug_assets, true
  set :sass_source_maps, true
  activate :livereload, no_swf: true
  activate :sprockets do |sprockets|
    sprockets.supported_output_extensions = ['.js']
  end
  activate :asset_hash
end
configure :build do
  activate :sprockets do |sprockets|
    sprockets.supported_output_extensions = ['.js']
  end
  activate :asset_hash
  activate :minify_css
  activate :minify_javascript
  activate :gzip
  activate :minify_html
  activate :imageoptim do |options|
    options.manifest = true
    options.image_extensions = %w(.png .jpg .gif .svg)
    options.advpng    = { :level => 4 }
    options.gifsicle  = { :interlace => false }
    options.jpegoptim = { :strip => ['all'], :max_quality => 70 }
    options.jpegtran  = { :copy_chunks => false, :progressive => true, :jpegrescan => true }
    options.optipng   = { :level => 6, :interlace => false }
    options.pngcrush  = { :chunks => ['alla'], :fix => false, :brute => false }
    options.pngout    = false
    options.svgo      = {}
  end
end
1 Like
#16

Thank you for this. What kind of SCSS processor does this configuration use?

Any way to have it use dart-sass?

#17

Hello MM community :wave:

In case you’re looking for a template with Middleman v4 and Bootstrap v5, I created this one: https://github.com/markets/middleman-bootstrap. Ready for development (livereload server) and production (build site).

NOTES