{"id":13397323,"url":"https://github.com/zellwk/typi","last_synced_at":"2025-03-13T23:32:19.792Z","repository":{"id":57384106,"uuid":"47498928","full_name":"zellwk/typi","owner":"zellwk","description":"A sass mixin to make responsive typography easy","archived":false,"fork":false,"pushed_at":"2022-12-09T17:02:05.000Z","size":257,"stargazers_count":856,"open_issues_count":8,"forks_count":43,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-03-11T11:49:29.403Z","etag":null,"topics":["sass","typography"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zellwk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-06T14:01:13.000Z","updated_at":"2024-12-13T18:41:45.000Z","dependencies_parsed_at":"2022-09-21T18:41:02.554Z","dependency_job_id":null,"html_url":"https://github.com/zellwk/typi","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zellwk%2Ftypi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zellwk%2Ftypi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zellwk%2Ftypi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zellwk%2Ftypi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zellwk","download_url":"https://codeload.github.com/zellwk/typi/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243500264,"owners_count":20300761,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["sass","typography"],"created_at":"2024-07-30T18:01:17.245Z","updated_at":"2025-03-13T23:32:19.323Z","avatar_url":"https://github.com/zellwk.png","language":"CSS","funding_links":[],"categories":["CSS","Libraries and Mixins"],"sub_categories":["Typography"],"readme":"# Typi\n\n[ ![Codeship Status for zellwk/typi](https://codeship.com/projects/4d0e1e40-9b6c-0133-8b7e-7a41677d4861/status?branch=master)](https://codeship.com/projects/126777)\n\n## Table of contents\n\n- [Intro](#intro)\n- [Installation](#installation)\n- [Configuration](#configuration)\n- [Using Typi (`base` font-map)](#using-typi-base-font-map)\n- [Using Typi (other font-maps)](#using-typi-other-font-maps)\n- [Automatically creating classes with Typi](#automatically-creating-classes-with-typi)\n- [Sizing in `em`](#sizing-in-em)\n- [Em-based media queries](#em-based-media-queries)\n- [Vertical Rhythm](#vertical-rhythm)\n- [Vertical Rhythm with `em`](#vertical-rhythm-with-em-units)\n- [Contributing](#contributing)\n- [Changelog](#changelog)\n\n## Intro\n\nTypi does two things for you incredibly well.\n\n1. Typi **helps you write font-size and line-height declarations** at multiple breakpoints without breaking a sweat.\n2. Typi **helps you calculate vertical rhythm** without having to do the math yourself.\n\nHere's a quickie example for both points.\n\nFor point 1:\n\n```scss\n// Sass input\nh1 { @include typi('h1'); }\n```\n\n```css\n/* CSS output */\nh1 {\n  font-size: 1.5rem;\n  line-height: 1.3;\n}\n\n@media all and (min-width: 600px) {\n  h1 {\n    font-size: 2.369rem;\n    line-height: 1.2;\n  }\n}\n```\n\nFor point 2:\n\n```scss\nh1 {\n  margin-top: vr(1);\n}\n```\n\n```css\nh1 {\n  margin-top: 1.4rem;\n}\n```\n\n## Installation\n\nYou can install Typi in four ways:\n\n1. Bower: `bower install typi --save`\n2. npm: `npm install typi --save-dev`\n3. diamond: `diamond install typi`\n3. manual install (https://github.com/zellwk/typi/archive/master.zip)\n\n\n**Typi with ruby gems**\nIf you want to install Typi with Ruby, check out [Pete's repo](https://github.com/Petecass/typi_rails) for installation instructions. (I think you can use v2.3.0. Not sure about v3)\n\nOnce you've downloaded Typi, include it in your project with:\n\n```scss\n// Change `path-to-typi` with the correct path!\n@import 'path-to-typi/scss/typi';\n```\n\nIf you are using diamond, it can be imported with:\n```scss\n@import '~typi';\n```\n\n## Configuration\n\nYou need to configure two Sass maps:\n\n1. `$breakpoints` – holds breakpoint values\n2. `$typi` – holds all your typography config\n\n### `$breakpoints` map\n\nThe `$breakpoints` map is a series of `key: value` pairs that tell Typi what media queries to create for each font-size and line-height property you intend to write. It looks like this:\n\n```scss\n$breakpoints: (\n  small: 600px,\n  large: 1200px\n);\n```\n\nFeel free to leave breakpoint values in pixels if you intend to use a breakpoint library that's compatible with Typi (more on that later). Otherwise, I recommend you convert these values into em.\n\n### `$typi` map\n\nThe `$typi` map is a **storage of different font maps** that contain information about breakpoints to create and the font-sizes and line-heights that should be written that that breakpoint.\n\nThe bare minimum version looks like this:\n\n```scss\n$typi: (\n  base: (\n    null: (16px, 1.4),\n    small: (18px),\n    large: (20px)\n  )\n  // Other font maps here\n);\n```\n\nThe first font-map in `$typi` should always be the `base` font-map. This tells Typi to output the correct font-sizes and line-height in the `html` selector. Here's what it reads:\n\n- `null` key: Create font-size of 16px and line-height of 1.4 without breakpoints\n- `small` key: At 600px, change font-size to 18px\n- `large` key: At 1200px, change font-size to 20px\n\nYou can also create other font-maps, but we'll talk about them later to make things easier to understand. Let's see how to use this `base` font-map first.\n\n## Using Typi (`base` font-map)\n\nTypi uses the `base` font-map to create font-size and line-height values for the `html` selector. You tell Typi to create these values by using the `typi-init` mixin.\n\n```scss\n@include typi-init;\n```\n\nYou should get the following CSS. Notice how pixel values get converted into percentage values when you use `typi-init`.\n\n```css\nhtml {\n  font-size: 100%; /* this means 16px */\n  line-height: 1.4;\n}\n\n@media all and (min-width: 600px) {\n  html {\n    font-size: 112.5%; /* this means 18px */\n  }\n}\n\n@media all and (min-width: 1200px) {\n  html {\n    font-size: 125%; /* this means 20px */\n  }\n}\n```\n\n## Using Typi (other font-maps)\n\nTypi allows you to create other font-size and line-height and media query combinations by creating another font-map, like this:\n\n```scss\n$typi: (\n  // base font-map,\n  h1: (\n    null: (24px, 1.3),\n    small: (2.369em, 1.2),\n  )\n);\n```\n\nIn the code above, we created a `h1` font-map with that:\n\n1. Creates a font-size with a value of `24px` (written in rem) and a line-height of 1.3 without breakpoints\n2. Changes font-size to a value of `2.369em` (written in rem) and line-height to 1.2 at a minimum width of `600px`.\n\nYou can use this `h1` font-map with the `typi` mixin once you've created it, like this:\n\n```scss\nh1 {\n  @include typi('h1');\n}\n```\n\nThe CSS produced by Typi is (notice how font-sizes gets converted into rem):\n\n```css\nh1 {\n  font-size: 1.5rem;\n  line-height: 1.3;\n}\n\n@media all and (min-width: 600px) {\n  h1 {\n    font-size: 2.369rem;\n    line-height: 1.2;\n  }\n}\n```\n\nSince Typi works with em values, you can also use Modular Scale easily with Typi like this:\n\n```scss\n$typi: (\n  // base font-map,\n  h1: (\n    null: (24px, 1.3),\n    small: (ms(3), 1.2),\n  )\n);\n```\n\n(Note: Make sure to include the [modular-scale sass library](https://github.com/modularscale/modularscale-sass) before doing this. Typi works with Modular Scale Version 2++. DO NOT install version 3 or Typi will fail).\n\n## Automatically creating classes with Typi\n\nTypi can help you create classes automatically if you use the `typi-create-classes` mixin. It extracts the keys present in your `$typi` map and calls `@include typi` on each individual key.\n\nRead [this article](https://zellwk.com/blog/css-architecture-2/) to see why you might love this feature.\n\n```scss\n// Input\n$typi: (\n  base: (null: (16px, 1.4)),\n  h1: (null: (24px, 1.3))\n);\n\n@include typi-create-classes;\n```\n\n```css\n/* Output */\n.base {\n  font-size: 100%;\n  line-height: 1.4;\n}\n\n.h1 {\n  font-size: 1.5rem;\n  line-height: 1.3;\n}\n```\n\n## Sizing in `em`\n\nAlthough I highly recommend the use of `rem`, there are instances where you want to use `em` over `rem`. If this happens, all you need to do is tell Typi you want to create sizes in `em` by stating `$rem: false`, like this:\n\n```scss\n@include typi('h1', $rem: false);\n```\n\nAnd Typi automatically writes sizes in the `em` unit.\n\n```css\nh1 {\n  font-size: 1.5em;\n  line-height: 1.3;\n}\n\n@media all and (min-width: 600px) {\n  h1 {\n    font-size: 2.369em;\n    line-height: 1.2;\n  }\n}\n```\n\n## Em-based media queries\n\nYou should use [em values for media queries](https://zellwk.com/blog/media-query-units/), unless you decide to use a breakpoint library that's compatible with Typi. Typi will automatically convert all pixel values to em if you use such a library.\n\nAt this moment, Typi supports the use of three breakpoint libraries—[Mappy breakpoints](https://github.com/zellwk/mappy-breakpoints),[Breakpoint Sass](http://breakpoint-sass.com) and [Sass MQ](https://github.com/sass-mq/sass-mq) . You tell Typi about the existence of these libraries with:\n\n```scss\n// using Mappy Breakpoint\n$typi-breakpoint: mappy-bp;\n\n// using Breakpoint Sass\n$typi-breakpoint: breakpoint;\n\n// using Sass MQ\n$mq-breakpoints: (\n  small: 400px,\n  med: 600px,\n  large: 800px,\n);\n\n$typi-breakpoint: mq;\n\n\n```\n\nThen, Typi will do it's job and convert pixels to em automatically:\n\n```css\nh1 {\n  font-size: 1.5em;\n  line-height: 1.3;\n}\n\n@media all and (min-width: 37.5em) {\n  h1 {\n    font-size: 2.369em;\n    line-height: 1.2;\n  }\n}\n```\n\n## Vertical Rhythm\n\nTypi gives you a `vr()` function to count baselines without requiring you to do complicated calculations yourself. It looks like this:\n\n```scss\nh1 {\n  margin-top: vr(1); // 1 baseline\n  margin-bottom: vr(2); // 2 baselines\n}\n```\n\nTypi uses the `null` key in your base font-map to calculate the Vertical Rhythm. Typi then uses the `line-height` value (1.4) to calculate the Vertical Rhythm.\n\n```scss\n$typi: (\n  base: (\n    null: (16px, 1.4),\n    small: (18px),\n    large: (20px)\n  )\n  // Other font maps here\n);\n```\n\nIn this case, `1 baseline = 16px * 1.4` (converted into rem).\n\n```css\nh1 {\n  margin-top: 1.4rem; /* 1 baseline */\n  margin-bottom: 2.8rem; /* 2 baselines */\n}\n\n```\n## Vertical Rhythm with `em` units\n\nTypi gives you the ability to write Vertical Rhythms in em instead of rem whenever you need to. To do so, you include the font-size as a second parameter and Typi will automatically do the rest. This font-size parameter can either be in pixels or em:\n\n```scss\nh1 {\n  // This is equivalent to vr(3) if font-size is 1.5em\n  margin: vr(3, 1.5em);\n}\n```\n\n## Additional features\n\nMore features are coming to Typi. However, I haven't had the time to work them out (or write about them) yet. I'll let you know when I manage to make Typi even better than it is now!\n\n## Contributing\n\nJust one for now: Make sure the tests before you submit a pull request.\n\nSteps:\n\n1. Clone the repo\n2. Install dependencies with bower install \u0026\u0026 npm install\n3. Run `gulp` to start tests\n\n## Changelog\n\n### v3.2\n\n- Added support for [Sass MQ](https://github.com/sass-mq/sass-mq)\n\n### v3.1\n\n- Added ability to write classes automatically with `typi-create-classes`.\n\n### v3.0\n\n- Changed `$typi` map. NOTE: BREAKING CHANGE.\n\n### v2.2.0\n\n- Added the ability to change Modular Scale within media queries easily\n\n### v2.1.1\n\n- Added typi-ms() function\n- Bugfix for integration with mappy-bp\n\n### v2.0.0\n\n- Changed typi() output to rem by default\n\n### v1.1.0\n\n- Added ability to calculate vertical rhythms in em and rem.\n\n:)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzellwk%2Ftypi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzellwk%2Ftypi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzellwk%2Ftypi/lists"}