{"id":13493838,"url":"https://github.com/madeleineostoja/postcss-responsive-type","last_synced_at":"2025-04-05T21:11:28.229Z","repository":{"id":35445969,"uuid":"39712651","full_name":"madeleineostoja/postcss-responsive-type","owner":"madeleineostoja","description":"Automagical responsive typography, built on PostCSS","archived":false,"fork":false,"pushed_at":"2023-07-11T07:24:21.000Z","size":691,"stargazers_count":372,"open_issues_count":17,"forks_count":21,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-02-25T03:35:38.723Z","etag":null,"topics":["font-size","postcss","postcss-plugin","responsive"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/madeleineostoja.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-07-26T03:48:44.000Z","updated_at":"2024-06-06T04:51:46.000Z","dependencies_parsed_at":"2024-06-18T12:41:46.206Z","dependency_job_id":"cd91f1bd-359a-407c-9726-888735e9131a","html_url":"https://github.com/madeleineostoja/postcss-responsive-type","commit_stats":{"total_commits":67,"total_committers":11,"mean_commits":6.090909090909091,"dds":0.4776119402985075,"last_synced_commit":"365180f29a1b8f9dbf19d97c9a6988d117fff531"},"previous_names":["seaneking/postcss-responsive-type"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madeleineostoja%2Fpostcss-responsive-type","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madeleineostoja%2Fpostcss-responsive-type/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madeleineostoja%2Fpostcss-responsive-type/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madeleineostoja%2Fpostcss-responsive-type/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/madeleineostoja","download_url":"https://codeload.github.com/madeleineostoja/postcss-responsive-type/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399887,"owners_count":20932880,"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":["font-size","postcss","postcss-plugin","responsive"],"created_at":"2024-07-31T19:01:19.297Z","updated_at":"2025-04-05T21:11:28.202Z","avatar_url":"https://github.com/madeleineostoja.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PostCSS Responsive Type\n[![NPM version][npm-badge]][npm-url] [![NPM downloads][downloads-badge]][npm-url] [![Build Status][travis-badge]][travis-url]\n\nGenerate automagical fluid typography, with new `responsive` properties for `font-size`, `line-height`, and `letter-spacing`. Built on [PostCSS][postcss].\n\n![Responsive Type Demo][demo]\n\nInspired by [this post][post].\n\n_Part of [Rucksack - CSS Superpowers](https://github.com/madeleineostoja/rucksack)_\n\n### Contents\n\n- [Usage](#usage)\n  - [Quick start](#quick-start)\n  - [Specify parameters](#specify-parameters)\n  - [Expanded syntax](#expanded-syntax)\n  - [Responsive `line-height` and `letter-spacing`](#responsive-line-height-and-letter-spacing)\n- [Defaults](#defaults)\n- [Browser Support](#browser-support)\n\n## Usage\n\n#### Quick start\n\n```css\nhtml {\n  font-size: responsive;\n}\n```\n\n\u003e **Pro tip:** set a reaponsive font-size on `html` and use `rem` units throughout your project to make your whole UI fluid\n\n#### Specify parameters\n\nUnits can be in px, rem, or em. When using em units, be sure that the `font-range` is specified in em as well.\n\n```css\nhtml {\n  font-size: responsive 12px 21px; /* min-size, max-size */\n  font-range: 420px 1280px; /* viewport widths between which font-size is fluid */\n}\n```\n\n#### Expanded syntax\n\n```css\nhtml {\n  font-size: responsive;\n  min-font-size: 12px;\n  max-font-size: 21px;\n  lower-font-range: 420px;\n  upper-font-range: 1280px;\n}\n```\n\n#### Responsive `line-height` and `letter-spacing`\n\nPostCSS Responsive Type also allows you to set fluid sizes for the `line-height` and `letter-spacing` properties. They have the same syntax and work the same way as responsive font sizes.\n\n```css\nhtml {\n  line-height: responsive 1.2em 1.8em;\n  line-height-range: 420px 1280px;\n\n  /* or extended syntax: */\n  line-height: responsive;\n  min-line-height: 1.2em;\n  max-line-height: 1.8em;\n  lower-line-height-range: 420px;\n  upper-line-height-range: 1280px;\n}\n```\n\n```css\nhtml {\n  letter-spacing: responsive 0px 4px;\n  letter-spacing-range: 420px 1280px;\n\n  /* or extended syntax: */\n  letter-spacing: responsive;\n  min-letter-spacing: 0px;\n  max-letter-spacing: 4px;\n  lower-letter-spacing-range: 420px;\n  upper-letter-spacing-range: 1280px;\n}\n```\n\n\u003e **Note:** Unitless line heights are not supported.\n\n## Defaults\nTo get started you only need to specify the `responsive` property, all other values have sane defaults.\n\n##### `font-size`\n\n- `min-font-size`: 14px\n\n- `max-font-size`: 21px\n\n- `lower-font-range`: 420px\n\n- `upper-font-range`: 1280px\n\n\n##### `line-height`\n\n- `min-line-height`: 1.2em\n\n- `max-line-height`: 1.8em\n\n- `lower-line-height-range`: 420px\n\n- `upper-line-height-range`: 1280px\n\n\n##### `letter-spacing`\n\n- `min-letter-spacing`: 0px\n\n- `max-letter-spacing`: 4px\n\n- `lower-letter-spacing-range`: 420px\n\n- `upper-letter-spacing-range`: 1280px\n\n\n## Browser Support\n\n`postcss-responsive-type` just uses calc, vw units, and media queries behind the scenes, so it works on all modern browsers (IE9+). Although Opera Mini is not supported.\n\nLegacy browsers will ignore the output `responsive` font-size. You can easily provide a simple static fallback:\n\n```css\n.foo {\n  font-size: 16px;\n  font-size: responsive;\n}\n```\n\n***\n\nMIT © [Sean King](https://twitter.com/seaneking)\n\n[npm-badge]: https://img.shields.io/npm/v/postcss-responsive-type.svg\n[npm-url]: https://npmjs.org/package/postcss-responsive-type\n[downloads-badge]: https://img.shields.io/npm/dm/postcss-responsive-type.svg\n[travis-badge]: https://travis-ci.org/seaneking/postcss-responsive-type.svg?branch=master\n[travis-url]: https://travis-ci.org/seaneking/postcss-responsive-type\n[PostCSS]: https://github.com/postcss/postcss\n[demo]: /demo.gif?raw=true\n[post]: http://madebymike.com.au/writing/precise-control-responsive-typography/\n[poststylus]: https://github.com/seaneking/poststylus\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadeleineostoja%2Fpostcss-responsive-type","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmadeleineostoja%2Fpostcss-responsive-type","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadeleineostoja%2Fpostcss-responsive-type/lists"}