Settings

The settings module is a library of SASS variables that define the characteristics of the framework. Variable names begin with the prefix $ty to avoid name collision with other projects. Variable values are assigned using the !default declaration so they may be easily changed.

Spacing

$tyspacing
(sm:1, md:2, lg:3, indent:3) !default;
SASS map of values indicating the number of grid units for each spacing variable value.
$tymargins-on
true !default;
Boolean value indicating if adjacent sibling margins styles are applied on the <body> tag.

Fonts

$tyfont-serif
georgia, serif !default;
Serif font selection.
$tyfont-sans
helvetica, arial, sans-serif !default;
Sans-serif font selection.
$tyfont-mono
monaco, courier, monospace !default;
Monospace font selection.
$tyfont-symbol
tyicons !default;
Icon font selection.
$tyfont-base
$tyfont-serif !default;
Base font selection, used for <body>.
$tyfont-heading
$tyfont-sans !default;
Heading font selection.
$tyfont-table
$tyfont-sans !default;
Table cell font selection.
$tyfont-input
$tyfont-sans !default;
Form input element font selection.

Typographic Scale

$tyfont-size
(sm:-1, h6:0, h5:1, h4:2, h3:3, h2:4, h1:6, quote:2, lede:2) !default;
A SASS map of values indicating the scale step for each of the font size variables.

Measures

$tywidth-border
2px !default;
Default border thickness for many HTML elements including rules, table cells, form elements, and link underlines.
$tyradius-border
4px !default;
Default border radius for elements with rounded corners including buttons, form elements, and tabs.

Breakpoints

$tybreak-float
40em !default;
Minimum screen width for floated quotes and tables.
$tybreak-quote
40em !default;
Screen width above which <blockquote> indent increases from small to medium.
$tybreak-cols2
50em !default;
Minimum screen width at which the cols2 class is effective.
$tybreak-list-cols2
35em !default;
Minimum screen width at which lists can be displayed in 2 columns.
$tybreak-list-cols3
55em !default;
Minimum screen width at which lists can be displayed in 3 columns.
$tybreak-list-cols4
75em !default;
Minimum screen width at which lists can be displayed in 4 columns.
$tybreak-collapsables
50em !default;
Screen width below which the style of collapsables changes to maximize horizontal space.
$tybreak-tabs
40em !default;
Screen width below which the responsive tabs convert to collapsable sections.
$tybreak-table
40em !default;
Screen width below which responsive tables are converted to labeled lists.

Transitions

$tyduration
(hover:250ms, move:500ms, 1x:1000ms, 2x:2000ms, 3x:3000ms) !default;
SASS map of duration values for CSS transitions and animations.

Colors

In the body module, the following colors are assigned to CSS custom properties to facilicate dynamic or contextual color changes. The custom property names are the same as the equivalent SCSS variable names.

$tycolor-bg
white !default;
Background color of the <body> element
$tycolor-fg
#111111 !default;
Color of the <body> element
$tycolor-text-light
mix($tycolor-fg,$tycolor-bg,45%) !default;
A light text color variant
$tycolor-link-default
#3380cc !default;
Default link color
$tycolor-link-active
#cc3380 !default;
Color of links that are hovered or active
$tycolor-bg-tab-active
rgba($tycolor-link-active,0.12) !default;
Background color for unselected tabs when hovered or active
$tycolor-border
mix($tycolor-fg,$tycolor-bg,12%) !default;
Default border color
$tycolor-border-link-default
rgba($tycolor-link-default,0.5) !default;
Default border color for underlined links
$tycolor-border-link-active
rgba($tycolor-link-active,0.75) !default;
Border color for underlined links when hovered or active
$tycolor-shade
rgba($tycolor-fg,0.05) !default;
A background color for shading

Icons

$tyicons-path
"../fonts/tyicons" !default;
Define the path to the tyicons folder where the web font files will be kept for your project; string should not have a trailing slash
$tyicons-angle-down
"ea01" !default;
Character code for a (angle down) character in the selected icon font
$tyicons-angle-left
"ea02" !default;
Character code for a (angle left) character in the selected icon font
$tyicons-angle-right
"ea03" !default;
Character code for a (angle right) character in the selected icon font
$tyicons-angle-up
"ea04" !default;
Character code for a (angle up) character in the selected icon font
$tyicons-angle-up-down
"ea05" !default;
Character code for a (angle up/down) character in the selected icon font
$tyicons-bars
"ea06" !default;
Character code for a (bars) character in the selected icon font
$tyicons-check
"ea07" !default;
Character code for a (check) character in the selected icon font
$tyicons-dash
"ea08" !default;
Character code for a (dash) character in the selected icon font
$tyicons-quote-left
"ea09" !default;
Character code for a (quote left) character in the selected icon font
$tyicons-quote-right
"ea0a" !default;
Character code for a (quote right) character in the selected icon font
$tyicons-search
"ea0b" !default;
Character code for a (search) character in the selected icon font
$tyicons-x
"ea0c" !default;
Character code for a (x) character in the selected icon font