Fontstrap is a bootstrap plugin(?) that lets you adjust your font size. It is intended to be just that with literally nothing else but I think being able to fully control font-size responsively is just too powerful to not make use of elsewhere. After all em-units are really great for just about everything.

There are currently 2 versions of the style sheet. One set is produced by hand (I wrote it) and the other one is written in LESS and compiled into CSS. If you require a different increments/units or what not, I would suggest changing the configs in the LESS version. Additionally there's better support for different screen sizes in the less version as it has xl (extra large) and mc(micro) instead of just xs-lg that the current bootstrap standard. However if you do not require a different increment, wider scaling support, or smaller adjustments, I would suggest that you use the one I written by hand as that one is slightly cleaner and also much smaller (aka ships faster) which is found in the by-hand folder.

class name convention: font-#em, font-#rem, font-"scale"-#em, font-"scale"-up-#em

for a flat adjustment of something to 1.5em for a "span" element you'd use class="font-150em" and same goes for rem units if you're using that

the scale-units have 2 parts, for example md-125em would make the font size only 1.25em when the screen fits the condition for md (see bootstrap) if you want the font size to be applied to all fonts and up like bootstrap use the up class: class="md-up-125em" of courese if you can chain them together like in bootstrap.

eg: class="col-xs-12 col-md-3 xs-200em font-sm-175em font-md-up-100em"

the numbers that are supported in the by hand version is 0, 25, 50, 75, 100, 125, 150, 172, 200 which I feel is plenty to get you started. You are free to modify them as you wish. The base fontstrap.css is inline ready and is relatively small. You can safely inline it into your base HTML if you're into that kind of things, the rest of the addon is a bit large and you probably want to load that after the fold aka link it in the footer or something (if you're using it at all). If you require a different increment system (eg by 20s instead of 25s) please adjust according in the LESS file and recompile.

Simple compact view for possiable class names: font-[xs-/sm-/md-/lg-][up-](0/25/50/75/100/125/150/175/200)(em/rem)

[] = optional

() = manditory

"font-up-150em" is not a thing

"font-0" is a thing

font sizes can be used as a unit in CSS via em and rem. so if you try something like this:

...
<style>.image-wrapper{padding:1em}</style>
<div class="image-wrapper font-75em md-up-50em"><img src="some-image.png"></div>
...

You would not need to write custome media queries for your image-wrapper class as it's padding will resize responsively based on the font size of your element. In conjunction with bootstrap, this lets you easily make minor adjustments to your layout. Where bootstrap lets you adjust large things like grids, fontstrap will let you adjust the smaller minor details. probably the most useful way of using this through the font-<size>-0 adjuster as you can use it to completely get rid of assets at spicific sizes assume they are sized to en em unit. In theory, you'd be able to have a main style sheet that does not contain any media queries and rely exclusively on bootstrap and fontstrap for adapting the layout for different views.

The biggest advantage of this is that it allows you to keep all of your responsive design choices in one place: the HTML file.

If you want to have some predefined classes for making these small adjustments then that's wehre fontstrap-addon comes in. The default fonstrap will only carry with it responsive font sizes. In the addon CSS you'll find a number of other tools at your disposal. such as adjusting margin and padding as well as letter space and so on. Here's a list of the classes that are defined and an example of how to get some desired effects. You are often better off just declareing custome classes. In most of these cases unless stated otherwise numbers that are supported are: 25/50/75/100/125/150/175/200. Incase you did not notice, the addon styles exists in the by-hand folder.

• pad-#em
• pad-#rem
• pad-virt-#em
• pad-horiz-#rem
• padless
• padless-virt
• padless-horiz
• padless-right
• padless-left
• padless-top
• padless-bottom
• marg-#em
• marg-#rem
• marg-virt-#em
• marg-horiz-#rem
• marginless
• marginless-virt
• marginless-horiz
• marginless-right
• marginless-left
• marginless-top
• marginless-bottom
• lspace-0
• lspace-#em (letter spacing | additional numbers: 5/10/15/20)
• lspace-#rem (letter spacing | additional numbers: 5/10/15/20)
• weight-# (supported numbers: 100/200/300/400/500/600/700/800/900)
• font-# (supported numbers: 100/200/300/400/500/600/700/800/900)
• font-X (supported words: xlight/light,normal/bold/xbold)

If you're using this, your HTML is gonna get really cluttered and would probably defeat the purpose of this framework. If you are just prototyping and would like easily adjustable things than ya maybe this is not that bad. Here's how you'd achieve some common desired results:

padding-left: 1 em -> pad-horiz-1em padless-right

so for your own sake, if you're messing with margins and paddings, just declare an extra class. As for the other classes, it's up to you what you want to do with them. They seem kind of useful but I haven't played around with them enough to say for sure.

Font sizes base are xs:20px, sm:18px, md:16px, lg:14px. These are the default font sizes but if you dont like them feel free to change them