Tyfy 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.
Tyfy 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 text 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.”
Tyfy has a grid unit variable that, by default, is half the base line height. Line heights for headings, block quotes, lists items, etc. are defined as multiples of the grid unit, enforcing the baseline grid. In addition, the paddings and margins for most elements are defined as multiples of the grid unit. Custom SASS functions can calculate line heights and other grid unit-based measures, making it easy to maintain the grid.
And because all of these values are defined as a function of the grid unit variable, changing the value will quickly change the visual character of the project.
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.
Tyfy uses adjacent sibling selectors (in this case, Mr. Pickering’s lobotomized owl) to put vertical margins between elements instead of assigning blanket margins to everything. This avoids the problem of having margins at the start and end of a containing element that must then be accounted for. Tyfy includes mixins and utility classes to facilitate enabling and disabling these ‘smart’ vertical margins in components where they are not needed.