Modules

Below is an inventory of the modules that make up the framework. The required, essential, and optional modules are @imported in the following order. The extras modules are not all part of the default Tyfy distribution but can be added if desired.

Required

These modules are required to use Tyfy. They define the framework's variables, functions, and mixins.

@import "required/core"

Defines the core Tyfy variables; these variables are used in the calculation of many of the framework settings and are required by the functions module.

@import "required/functions"

Defines functions that make it easy to use the grid and modular typographic scale.

@import "required/settings"

Defines the framework’s colors, fonts, breakpoints, etc.

@import "required/mixins"

Defines SASS mixins that make it easy to use the sibling margins, styles, and effects.

Essential

These modules are not hard requirements for Tyfy but are highly recommended.

@import "essential/normalize"

Apply selected styles from normalize.css.

@import "essential/body"

Apply the base colors, font styles, and line height.

@import "essential/spacing"

Apply margins between adjacent sibling HTML elements; also contains classes for toggling the adjacent sibling margins.

Optional

These optional modules provide specific typographic styles and UI patterns.

@import "optional/paragraphs"

Styles and classes for paragraphs.

@import "optional/headings"

Styles and classes for headings and heading sizes.

@import "optional/links"

Styles and classes for links.

@import "optional/lists"

Styles and classes for lists.

@import "optional/utility"

Styles and classes for other inline- and block-level elements; additional classes for typographic enhancements.

@import "optional/quotes"

Styles and classes for blockquotes and pullquotes.

@import "optional/tables"

Styles and classes for tables; responsive tables require tables.js.

@import "optional/forms"

Styles and classes for form elements.

@import "optional/media"

Styles and classes for images and embedded objects.

@import "optional/collapsables"

Styles for a UI pattern similar to an accordion; requires collapsable.js.

@import "optional/tabs"

Styles for responsive tabs; requires tabs.js.

Extras

These modules provide additional functionality that might not be needed in every case.

@import "extras/audio"

Implementation of a custom HTML audio player.

@import "extras/effects"

Styles for CSS animations.

@import "extras/icons"

Defines the font face and classes for the tyicons font.

dist/script/inview.js

To detect if elements have moved into the browser viewport (JavaScript only)

@import "optional/reverse"

Styles for reversed colors.

@import "extras/responsive_text"

Text size adjustments for small and large screens.