TyBs applies three main design enhancements to Bootstrap.
Modular Scale
Tim Brown, Head of Typography at Adobe Typekit and co-developer of modularscale.com writes:
“By basing the dimensions of our compositions on values from modular scales, we can achieve a visual harmony not found in layouts that use arbitrary, conventional, or easily divisible numbers.”
More simply, Robert Bringhurst writes “don’t compose without a scale”. Is he talking about music or graphic design? Yes.
TyBs provides SASS variables and custom functions that make it easy to establish a modular scale of text sizes. Every semantic HTML element (headings, paragraphs, lists, etc.) has a text size defined as a function of the base text size and a scale variable. Assigning text sizes to other elements is also simplified through use of the custom functions.
By modifying either the base font size or the scalar value, the whole modular scale of sizes can be quickly adjusted to the desired appearance.
Baseline Grid
Applying and maintaining a baseline grid adds a rhythmical consistency to your design that is as important as a regular beat in music. Establishing the baseline grid depends in part of choosing the right leading for all different text sizes. Robert Bringhurst writes:
“Headings, subheads, block quotations, footnotes, illustrations, captions, and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase. This means that the total amount of vertical space consumed by each departure from the main text should be an even multiple of the basic leading.”
TyBs extends use of Bootstrap's $spacer variable to define line heights, paddings and margins for most elements. Custom SASS functions can calculate line heights and other spacer-based measures, making it easy to maintain the grid.
Smart Margins
In Issue 406 of A List Apart, Heydon Pickering precisely describes my complaint about HTML margins:
“Margins are something that exist between elements. Simply giving an element a top margin makes no sense, no matter how few or how many times you do it. It’s like applying glue to one side of an object before you’ve determined whether you actually want to stick it to something or what that something might be.”
By default, HTML headings, paragraphs, and lists have top and bottom margins. These extra margins often cause unexpected or unwanted collisions at the beginning or end of a containing element, depending on whether or not the containing element has its own margin or padding.
TyBs sets all top and bottom margins to zero and uses adjacent sibling selectors to put vertical margins between elements. This avoids the problem of having margins at the start and end of a containing element that must then be accounted for. TyBs adds utilities for enabling and disabling these ‘smart’ vertical margins in components where they are not needed.