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.
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.
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.
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.
These modules provide additional functionality that might not be needed in every case.
- @import "optional/effects"
- Styles for CSS animations.
- @import "extras/icons"
- Defines the font face and classes for the tyicons font.
- @import "optional/reverse"
- Styles for reversed colors.
- @import "extras/responsive_text"
- Text size adjustments for small and large screens.