Customize TYFY

You can customize Tyfy by adding or removing modules or by changing the value of the framework's variables.

Selecting Modules

If you inspect the main SCSS file, you will see how Tyfy is organized as groups of modules. Each module provides a specific set of features or styles.

@import "required/core";
@import "required/functions";
@import "required/settings";
@import "required/mixins";

@import "essential/normalize";
@import "essential/body";
@import "essential/spacing";

@import "optional/paragraphs";
@import "optional/headings";
@import "optional/links";
@import "optional/lists";
@import "optional/utility";
@import "optional/quotes";
@import "optional/tables";
@import "optional/collapsables";
@import "optional/tabs";
@import "optional/forms";

@import "extras/icons";
@import "extras/reverse";

• Required modules must be included for Tyfy to work. The SCSS will not compile without these modules.
• Essential modules are not strictly required but are highly recommended. Some Tyfy features will not work without these modules.
• Optional modules are not required and can be added or removed as desired. These modules provides styles and classes for common content and user interface patterns.
• Extras modules, like the optional modules, can be added or removed as desired. These modules provide enhancements that may not be necessary or desired in every case.

Example

You have a simple front-end development project. There will not be any forms, quotes, tables, or tabs in the content. However, you would like text sizes to be responsive based on the screen size. Your SCSS file may look like this:

@import "[path to tyfy]/source/scss/required/core.scss";
@import "[path to tyfy]/source/scss/required/functions.scss";
@import "[path to tyfy]/source/scss/required/settings.scss";
@import "[path to tyfy]/source/scss/required/mixins.scss";

@import "[path to tyfy]/source/scss/essential/normalize.scss";
@import "[path to tyfy]/source/scss/essential/body.scss";
@import "[path to tyfy]/source/scss/essential/spacing.scss";

@import "[path to tyfy]/source/scss/essential/paragraphs.scss";
@import "[path to tyfy]/source/scss/essential/headings.scss";
@import "[path to tyfy]/source/scss/essential/links.scss";
@import "[path to tyfy]/source/scss/essential/lists.scss";
@import "[path to tyfy]/source/scss/essential/styles.scss";
@import "[path to tyfy]/source/scss/essential/collapsables.scss";

@import "[path to tyfy]/source/scss/extras/responsive_text.scss";

Custom Settings

Tyfy styles are based on SASS variables that help define the baseline grid, element margins, fonts, text sizes, colors, and more. Sensible defaults are defined so you can get up and running quickly. Overriding the default values can alter the framework’s appearance to fit your brand.

To override the default variable values, declare the custom values at the top of your SCSS file. Begin with any core values and then any settings values. The following sample comes from the SCSS file for this documentation:

// custom core variable values
$tygrid-unit:0.75rem;
$tyfont-size-scalar:1.25;

// custom settings variable values
$tyfont-serif:"IBM Plex Serif", serif;
$tyfont-sans:"IBM Plex Sans", sans-serif;
$tyfont-mono:"IBM Plex Mono", monospace;
$tyfont-base:$tyfont-serif;
$tyfont-heading:$tyfont-sans;
          
// include tyfy
@import "[path to tyfy]/source/scss/tyfy.scss"

For a full list of variables and their default values, see the documentation for the core and settings modules.