Variables
TyBs adds the following variables to Bootstrap.
| Name | Default Value | Purpose |
|---|---|---|
| $spacer-override | 0.8125rem | A rem unit value used to override Bootstrap’s default spacer value. This variable is set using the SASS !default declaration and can be overridden. This value sets the baseline grid size. It is recommended that the value be half the default line height. |
| $font-size-base-override | 1rem | A rem unit value used to override Bootstrap’s default base font size value. This variable is set using the SASS !default declaration and can be overridden. |
| $scale-ratio | 1.25 | A unitless value that sets the ratio between font sizes in the modular scale. The value should be greater than 1. Larger values will create more font size contrast. This variable is set using the SASS !default declaration and can be overridden. |
| $sibling-margins-on | true | A boolean value determining if the adjacent sibling margins are applied by default. If not, they can be applied using utility classes for spacing. This variable is set using the SASS !default declaration and can be overridden. |
Functions
TyBs adds the following custom SASS functions. The functions are used to customize Bootstrap variables but are also available to developers who will work with the TyBs source SCSS stylesheets.
| Name | Arguments[:default] | Returns | Description |
|---|---|---|---|
| leading() | $font-size, $leading-style:base |
A $spacer-override-based line height (leading) value in rem units |
This function has been used to override Bootstrap’s line-height values. The new values are based on the $spacer value, establishing a consistent baseline grid. The value of the $leading-style argument can be base, tall, short, or head. |
| space() | $multiplier:1 | A rem-unit value that is the $spacer-override value multiplied by the function argument |
This is a convenience function used to make the TyBs stylesheets more maintainable and easier to read. |
| fontsize() | $exponent:0 | A rem-unit font size value | The $exponent argument determines the number of steps up (positive) or down (negative) the modular scale from the base font size. Positive steps result in larger font sizes. This function is used to override all of Bootstrap’s default font sizes. The $exponent must be an integer. |
Mixins
TyBs sets the top and bottom margin of all elements to zero. This removes unnecessary margins on elements that do not need margins. To enable desired margins between adjacent elements, TyBs adds the following SASS mixins. The mixins help define the margins for the appropriate contexts.
| Name | Arguments[:default] | Description |
|---|---|---|
| sibling-margin-size() | $context:all $measure:space(2) |
This mixin defines the size of the adjacent sibling margins in specific contexts. The value of the $context argument can be all, headings, lists, or once. The $measure argument sets the size of the margin in the given context. |
| sibling-margins() | $state:on | This mixin sets the state of the sibling margins for decendents of the element to which the mixin is applied. The possible state values are on, off, skip, and once. |
Default Sibling Margins
If the value of the $sibling-margins-on variable is true, default sibling margins are applied to all elements using the sibling-margins mixin with the state argument on. The default margin values are as follows:
| Context Value | Context Description | Value |
|---|---|---|
| all | All HTML elements that follow an HTML element | margin-top:space(2) |
| lists | List items inside an ordered, unordered, or definition list that follow a list item; overrides the all context | margin-top:space(1) |
| headings | All headings that follow a non-heading element; overrides the all context | margin-top:space(3) |
Utilities
TyBs adds the following classes to Bootstrap.
Text Utilities
| Class Name | Element(s) | Description |
|---|---|---|
| .dropcap | <span> only |
Uses float:left style to create a drop cap that is 400% of the base font size. |
| .smallcaps | <span> only |
Creates a fake small caps style; most web fonts (at the time of writing this documentation) don't have proper small caps or have poor quality small caps. |
Adjacent Sibling Margin Utilities
| Class Name | Element(s) | Description |
|---|---|---|
| .sibling-margins-on | any | If you choose to turn off the adjacent sibling margins by default ($sibling-margins-on:false), this class can be added to turn on the default sibling margins inside an HTML element. |
| .sibling-margins-off | any | If the adjacent sibling margins are on, this class can be added to turn margins off inside an HTML element. |
| .sibling-margins-once | any | If you choose to turn off the adjacent sibling margins ($sibling-margins-on:false or with the sibling-margins-off class), this class will apply sibling margins for only the immediate decendents of an HTML element. |
| .sibling-margins-skip | any | If the adjacent sibling margins are on, this class can be added to turn margins off for only the immediate decendents of an HTML element. |