'Cause it's like a little Bootstrap. Little "b".. get it?.. All jokes aside folks.. Lil' B was created to "fix" spacing inconsistencies and various nuances of Bootstrap. Lil' B also has a handful of helper classes to make bootstrappin' your site that much easier.
Simply download Lil' B and add the b.css / b.min.css file to the project (the file should be located in dist/css/b.css). Load it up after Bootstrap, and you should be good to go!
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/b.css">
Lil' B re-adjusts many margin, line-height, and spacing attributes to ensure better readability and balanced element separation while preserving Bootstrap's original look and feel.
Unlike Bootstrap, Lil' B's typography (as well as element spacing) works on percentages (em) instead of fixed pixels (px). This gives text a little more room to breathe, especially when combining multiple text sizes together.
Below is a quick comparison of some text elements between Bootstrap and Bootstrap + Lil' B. Text is generated by Hipster Ipsum*.
* I was totally using Hipster Ipsum before it became popular, kk thnx.
Umami Carles raw denim narwhal, next level dreamcatcher irony keffiyeh fanny pack.
Shabby chic locavore sustainable keffiyeh umami Odd Future gastropub. Locavore Intelligentsia post-ironic organic irony. Chillwave you probably haven't heard of them irony, Tumblr Godard selfies master cleanse bespoke McSweeney's vinyl paleo fingerstache.
Pork belly Wes Anderson food truck street art +1. Polaroid Pinterest dreamcatcher, banjo Helvetica irony fanny pack. Drinking vinegar biodiesel 8-bit beard, readymade Intelligentsia American Apparel literally actually Cosby sweater DIY wolf fingerstache chia.
Umami Carles raw denim narwhal, next level dreamcatcher irony keffiyeh fanny pack.
Shabby chic locavore sustainable keffiyeh umami Odd Future gastropub. Locavore Intelligentsia post-ironic organic irony. Chillwave you probably haven't heard of them irony, Tumblr Godard selfies master cleanse bespoke McSweeney's vinyl paleo fingerstache.
Pork belly Wes Anderson food truck street art +1. Polaroid Pinterest dreamcatcher, banjo Helvetica irony fanny pack. Drinking vinegar biodiesel 8-bit beard, readymade Intelligentsia American Apparel literally actually Cosby sweater DIY wolf fingerstache chia.
Because Lil' B's typography setup is all relative, you just have to adjust the site's main font-size, and everything else will change. How groovy is that!?
body {
font-size: 14px; /* <-- Adjust this guy */
line-height: 1.65em;
}
Above is the code that you need to adjust if you wanna tweak the font-size. You can do it in the b.css / b.min.css file, or in your site's stylesheet.
Below is a quick comparison of how the typography is affected between Bootstrap and Bootstrap + Lil' B when font-size is adjusted.
Click either "- Font Size" or "+ Font Size" to see some magic happen!
Umami Carles raw denim narwhal, next level dreamcatcher irony keffiyeh fanny pack.
Shabby chic locavore sustainable keffiyeh umami Odd Future gastropub. Locavore Intelligentsia post-ironic organic irony. Chillwave you probably haven't heard of them irony, Tumblr Godard selfies master cleanse bespoke McSweeney's vinyl paleo fingerstache.
Pork belly Wes Anderson food truck street art +1. Polaroid Pinterest dreamcatcher, banjo Helvetica irony fanny pack. Drinking vinegar biodiesel 8-bit beard, readymade Intelligentsia American Apparel literally actually Cosby sweater DIY wolf fingerstache chia.
Umami Carles raw denim narwhal, next level dreamcatcher irony keffiyeh fanny pack.
Shabby chic locavore sustainable keffiyeh umami Odd Future gastropub. Locavore Intelligentsia post-ironic organic irony. Chillwave you probably haven't heard of them irony, Tumblr Godard selfies master cleanse bespoke McSweeney's vinyl paleo fingerstache.
Pork belly Wes Anderson food truck street art +1. Polaroid Pinterest dreamcatcher, banjo Helvetica irony fanny pack. Drinking vinegar biodiesel 8-bit beard, readymade Intelligentsia American Apparel literally actually Cosby sweater DIY wolf fingerstache chia.
"Jank" is a term used to describe visual lag in the browser. Unfortunately, depending on the features you use, Bootstrap can cause some browser related problems.
To understand the effects of "Jank" and what you can do to fix it, check out this video made by Paul Irish!
Using Chrome's Developer Tools, you can visually see the browser repainting / redrawing as the user scrolls (represented by the color green).
Below, you can see effects of Bootstrap's pop-up Modal. In most cases, you might be okay. However, jitteriness will become more obvious if you have more resource intensive stuff on your page (like video embeds or ads).
Lil' B utilizes the "translate3d/translateZ hack". This trick tells the browser to render the "layer(s)" more efficiently, resulting in a much happier browsing experience.
Below, you can see that Bootstrap's pop-up Modal no longer causes any repainting. Look at how happy the gifs are without the green. Look at it.
Try Lil' B today! We have a 100% satisfaction guarantee1. No purchase necessary, some assembly required, action figures sold separately, batteries not included.
In most cases, green is good (dollar dollar bills, cash money and all that). However, as far as browser repaints are concerned, green is bad, and quite expensive.
Give Lil' B a shot. Any Bootstrap repaint related issues will be taken care of so you can rest easy. Your site should instantly "feel" like it has more breathing room, so your users can read happy.
1 Satisfaction may not be guaranteed. If something doesn't look right, or if you have any suggestions, please hit me up on Twitter!
