Tyfy - Get Started

Tyfy is a framework for applying elements of typographic style to your front-end development. It provides a baseline grid, modular scale, sensible margins, and styles for common HTML elements and design patterns.

To get started you can either use the compiled CSS or begin with the SCSS files and customize the framework by overriding the default variable values. The latter approach is recommended as it allows you to take full advantage of the mixins and functions for the baseline grid and modular scale.

Start with SCSS (recommended)

Use this approach if you want to customize Tyfy and use the framework as a foundation for your project.

Clone the github project or install using npm install tyfy

If you want to customize any of the Tyfy variable values, declare the custom values at the top of your SCSS file. Begin with the core values and then any settings values. For example:

// 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;

Import the main Tyfy SCSS file.
```
@import "[path to tyfy]/source/scss/tyfy.scss";
```
The main SCSS file includes all of the required, essential and optional Tyfy modules. It also includes the icons and reverse extras modules.
Import any other extras modules you may need for your project. For example:
```
@import "[path to tyfy]/source/scss/extras/responsive_text";
```

Add the Tyfy JavaScript files to the end of your HTML.

<body>
  <!-- content of page -->
  <script src="[path to tyfy]/dist/script/collapsables.js"></script>
  <script src="[path to tyfy]/dist/script/tables.js"></script>
  <script src="[path to tyfy]/dist/script/tabs.js"></script>
  <script src="[path to tyfy]/dist/script/inview.js"></script>
</body>

Now you’re ready to begin development. Review the documentation to learn more about:
- customizing the framework for your project
- using the mixins and functions
- styles, variables, and classes provided by the modules
- tools that have been used to build Tyfy

Start with CSS

Use this approach if you want to get started quickly and will not need to customize or extend the framework.

Clone the github project or install using npm install tyfy
Within the tyfy project folder, the dist directory contains the framework's compiled stylesheet, JavaScript files, and icon font. Move the dist directory into your project folder.
Add the Tyfy stylesheet to the your HTML <head>.
```
<head>
  
  <link rel="stylesheet" href="dist/style/tyfy.css">
</head>
```
The compiled CSS includes all of the required, essential, and optional Tyfy modules. It also adds the icons and reverse colors modules from the extras collection.

Add the Tyfy JavaScript files to the end of your HTML <body>.

<body>
  <!-- content of page -->
  <script src="dist/script/collapsables.js"></script>
  <script src="dist/script/tables.js"></script>
  <script src="dist/script/tabs.js"></script>
  <script src="dist/script/inview.js"></script>
</body>

Now you’re ready to go. Review the modules documentation to learn more about Tyfy styles and CSS classes.