A little trick I have been using in pretty much every design I worked on that was based on Bootstrap is to automatically add a margin between grid columns when they break/collapse, i.e. are displayed vertically instead of horizontally.
Blog · Articles tagged with "bootstrap" · show all articles »
I've always been a huge fan of Bootstrap, the front-end framework started by two former Twitter employees. For me as a design-impaired programmer, it meant I could build front-ends for my projects all by myself, and they wouldn't look absolutely horrible.
Since I create all of my projects in Ruby (web apps as well as web sites), over the years I have searched for, found, and used (or not found and created myself) my fair share of Ruby wrappers for the different components Bootstrap offers. Often, when I found yet another Bootstrap related Ruby project on Github that did the same as another one, I have wished for a curated collection of those tools, which is exactly what I want to introduce in this post.
As a heavy user of Bootstrap modals and Rails, I often want to use remote links or forms in a modal and load the result into the same modal. After doing this in several projects I worked on, I now copy and paste the helper directly into any new project I start that will use modals:
$(document).on 'ajax:success', '.modal [data-remote="true"]', (_, data) -> $(this).parents('.modal-body') .html(data) .animate scrollTop: 0 , 300
The trick is to specify only
form[data-remote="true"] so it works with remote links and forms. As you see, I also added a animation that scrolls to modal to the top after inserting the new content.
This helper works with Bootstrap 2.x and 3.x.
I'm in love with the Middleman static website generator and, after discovering it and falling in love with it, I immediately set out to rewrite all static websites I have up and running with Middleman. Since I'm also a heavy user of Bootstrap I ended up writing the HTML (or rather HAML) for the Bootstrap navbar many times as well. What's a Ruby developer to do? Gemify it!