{"id":13446726,"url":"https://github.com/csswizardry/typecsset","last_synced_at":"2025-04-05T01:06:11.010Z","repository":{"id":12954644,"uuid":"15632868","full_name":"csswizardry/typecsset","owner":"csswizardry","description":"A small Sass library for setting type on the web.","archived":false,"fork":false,"pushed_at":"2014-01-07T14:41:34.000Z","size":418,"stargazers_count":710,"open_issues_count":10,"forks_count":41,"subscribers_count":37,"default_branch":"master","last_synced_at":"2025-03-29T00:08:26.484Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://csswizardry.com/typecsset/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csswizardry.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":"2014-01-04T13:53:07.000Z","updated_at":"2025-02-15T01:26:28.000Z","dependencies_parsed_at":"2022-09-10T06:13:40.782Z","dependency_job_id":null,"html_url":"https://github.com/csswizardry/typecsset","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csswizardry%2Ftypecsset","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csswizardry%2Ftypecsset/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csswizardry%2Ftypecsset/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csswizardry%2Ftypecsset/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csswizardry","download_url":"https://codeload.github.com/csswizardry/typecsset/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247271528,"owners_count":20911587,"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":[],"created_at":"2024-07-31T05:00:58.209Z","updated_at":"2025-04-05T01:06:10.992Z","avatar_url":"https://github.com/csswizardry.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# Typecsset (v0.3.0)\n\n**\u003ccite\u003eTypecsset\u003c/cite\u003e (type·set, /ˈtīpˌset/) is a small Sass library for\nsetting type on the web.**\n\nIt gives you an automatic, pixel-perfect, baseline grid across all textual HTML\nelements based entirely on just a few settings of your choice. Baseline grids\nwithout the headaches.\n\n## Demo\n\n* [View demo](http://csswizardry.com/typecsset/)\n* [View demo code](https://github.com/csswizardry/typecsset/tree/gh-pages)\n\n## Implementation\n\nUsing Typecsset couldn’t be easier. Download the Sass file, predefine any\nsettings, `@import` it into your project, _go!_\n\n```scss\n$typecsset-base-font-size:      18px;\n$typecsset-base-line-height:    27px;\n\n[Your own CSS]\n\n@import \"path/to/typecsset\";\n\n[More of your own CSS]\n```\n\n**[Example](https://github.com/csswizardry/typecsset/blob/gh-pages/style.scss)**\n\n### Precision\n\nDue to the nature of unitless and relative values, you will end up with a lot of\nfloats as opposed to integers (e.g. `line-height: 1.333;` instead of\n`line-height: 24px;`). In order to ensure that browsers can work these values\nout as closely as possible to the pixel, thus avoiding rounding errors, I\nrecommend compiling your Sass with the `--precision` flag set to `7`, e.g.:\n\n    sass --watch typecsset.scss:typecsset.css --style expanded --precision 7\n\n## Settings\n\nAll Typecsset’s settings are stored in namespaced variables (e.g.\n`$typecsset-base-font-size`). You should avoid modifying these directly, as to\ndo so would inhibit your ability to smoothly update the library. If you would\nlike to modify the default settings in Typecsset, predefine them _before_ you\nimport the library, as above.\n\nThere are certain settings in Typecsset that should not and cannot be\noverridden, as they are fundamental to the way the library works. These settings\nare, however, based upon the settings you _can_ modify.\n\n### `$typecsset-base-font-size`\n\nThis is the base font size you would like your project to have. Set this in\npixels: Typecsset will convert it to the relevant units for you.\n\n### `$typecsset-base-line-height`\n\nThis is the base line height you would like your project to take. Again, define\nthis in pixels: Typecsset will convert it into a unitless value for you.\n\nThis `$typecsset-base-line-height` value is the most important one in the whole\nlibrary—it defines and underpins your whole vertical rhythm. Everything\n(`margins`, `line-height`s, etc.) will be based upon units of this number in\norder to maintain a consistent and harmonious vertical rhythm.\n\n### `$typecsset-h[1–6]-size`\n\nThese settings, predictably, contain the desired font sizes for your headings\none-through-six. Again, they are set in pixels because the library will pick\nthem up and convert them into rems later on.\n\n### `$typecsset-indented-paragraphs`\n\nThis is a simple boolean to toggle between indented—as you traditionally find in\nprint—or simply spaced—more common on the web—paragraphs.\n\n### `$typecsset-show-baseline`\n\nAnother boolean which will simply turn a baseline grid either on or off. The\nimage used for the grid is provided by [Basehold.it](http://basehold.it/), and\nis based on the value of `$typecsset-base-line-height`. It will automatically\nupdate itself whenever you modify the value of `$typecsset-base-line-height`.\n\n### `$typecsset-magic-number`\n\nThis is a library setting, and cannot/should not be modified. Your _magic\nnumber_—typographically speaking—is the number which underpins your vertical\nrhythm. This is sourced from your `$typecsset-magic-number` setting and will\ndefine the `margin`s and `line-height`s for all typographical elements.\n\n### `$typecsset-magic-ratio`\n\nThis is another library variable, and simply holds your magic number as a ratio\nof your chosen base font size.\n\n## Tools\n\nTypecsset has a number of mixins and functions which are used to generate more\nverbose CSS around your own settings.\n\n### `typecsset-font-size()`\n\nThis mixin takes a pixel value for a font size and converts it into a\nrem-with-pixel-fallback `font-size`, with a unitless `line-height` based upon\nyour vertical rhythm. Clever stuff!\n\n**Input:**\n\n```scss\n$typecsset-base-font-size:      16px;\n$typecsset-base-line-height:    24px;\n\n[...]\n\n.foo {\n    @include typecsset-font-size(20px);\n}\n```\n\n**Output:**\n```css\n.foo {\n    font-size: 20px;\n    font-size: 1.25rem;\n    line-height: 1.2;\n}\n```\n\n* `font-size: 20px;`: A pixel fallback simply lifted straight from the input\n  into the mixin.\n* `font-size: 1.25rem;` A rem-based font-size for supporting browsers. This is\n  calculated by _desired font-size_ / _base font-size_ = _font-size in rems_.\n  20 / 16 = 1.25.\n* `line-height: 1.2;`: This is a unitless value greater than 1 which, when\n  multiplied by the element’s font-size, yields a number that is a multiple of\n  your base line-height. It is this which keeps everything on your baseline.\n  1.2 * 20 = 24px.\n\n### `typecsset-space()`\n\nThe `typecsset-space()` mixin simply drops a double amount of ‘spacing’ onto a given\nproperty, e.g. `padding`:\n\n**Input:**\n\n```scss\n$typecsset-base-line-height:    24px;\n\n.foo {\n    @include typecsset-space(margin-bottom);\n}\n```\n\n**Output:**\n\n```css\n.foo {\n    margin-bottom: 48px;\n    margin-bottom: 3rem;\n}\n```\n\nThis simple-looking mixin just DRYs out some repeated Typecsset functionality.\n\n### `typecsset-strip-units()`\n\nThe `typecsset-strip-units()` function simply does as it says: it removes the\nunits from a value that is passed into it:\n\n**Input:**\n\n```scss\n.foo {\n    line-height: typecsset-strip-units(1.5px);\n}\n```\n\n**Output:**\n\n```css\n.foo {\n    line-height: 1.5;\n}\n```\n\nThis very useful function only gets used once—to get us our baseline grid image:\n\n```scss\n[...]\n\n$typecsset-baseline-size: typecsset-strip-units($typecsset-magic-number);\n\nbackground-image: url(http://basehold.it/i/#{$typecsset-baseline-size}); /* [3] */\n\n[...]\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsswizardry%2Ftypecsset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsswizardry%2Ftypecsset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsswizardry%2Ftypecsset/lists"}