{"id":15041318,"url":"https://github.com/garrettw/vitals","last_synced_at":"2025-07-23T06:05:06.232Z","repository":{"id":13302595,"uuid":"74154319","full_name":"garrettw/vitals","owner":"garrettw","description":"A minimalistic bundle of a few SCSS/Sass tools for building modern, flexible websites: a better normalize, shorthand stuff for flexbox and grid, and a fluid sizing function.","archived":false,"fork":false,"pushed_at":"2024-10-16T21:13:39.000Z","size":1373,"stargazers_count":8,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-14T20:17:03.631Z","etag":null,"topics":["css","flexbox","grid","grid-layout","layout","modern","neat","npm","push-left","sache","sass","sass-library","scss","scss-library","semantic","vitals","vitals-grid","yarn"],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/garrettw.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-11-18T18:03:28.000Z","updated_at":"2025-02-16T02:38:20.000Z","dependencies_parsed_at":"2024-09-20T18:18:57.217Z","dependency_job_id":"4caa7c16-7d59-4e97-affc-05ef62e29dbc","html_url":"https://github.com/garrettw/vitals","commit_stats":{"total_commits":91,"total_committers":2,"mean_commits":45.5,"dds":0.04395604395604391,"last_synced_commit":"e6397f4dab8a2913e43f4b6434aeac252be6ddaf"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/garrettw/vitals","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettw%2Fvitals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettw%2Fvitals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettw%2Fvitals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettw%2Fvitals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/garrettw","download_url":"https://codeload.github.com/garrettw/vitals/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettw%2Fvitals/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266626115,"owners_count":23958344,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css","flexbox","grid","grid-layout","layout","modern","neat","npm","push-left","sache","sass","sass-library","scss","scss-library","semantic","vitals","vitals-grid","yarn"],"created_at":"2024-09-24T20:45:57.142Z","updated_at":"2025-07-23T06:05:06.212Z","avatar_url":"https://github.com/garrettw.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![Vitals](https://raw.githubusercontent.com/garrettw/vitals/master/vitals-logo-b.png)\n\n[![npm version](https://img.shields.io/npm/v/vitals-scss.svg?style=flat-square)](https://www.npmjs.com/package/vitals-scss)\n[![npm package size](https://img.shields.io/bundlephobia/min/vitals-scss.svg?style=flat-square)](https://www.npmjs.com/package/vitals-scss)\n[![npm total downloads](https://img.shields.io/npm/dt/vitals-scss.svg?style=flat-square)](https://www.npmjs.com/package/vitals-scss)\n[![npm weekly downloads](https://img.shields.io/npm/dw/vitals-scss.svg?style=flat-square)](https://www.npmjs.com/package/vitals-scss)\n[![npm monthly downloads](https://img.shields.io/npm/dm/vitals-scss.svg?style=flat-square)](https://www.npmjs.com/package/vitals-scss)\n\n**[Download Vitals using Yarn!](https://yarnpkg.com/package/vitals-scss)**\n\nVitals makes a great addition to your Sass toolkit. It exists solely to fill gaps that other projects do not.\n\nVitals consists of a few simple Sass tools for building modern, flexible websites:\nan improved normalize (also available in pure CSS), shorthand systems for flexbox and grid,\nand a fluid sizing function.\n\nBrowser support:\n- Edge 88+\n- Firefox 78+\n- Chrome 88+\n- Safari/iOS 14+\n- Opera 74+\n- Chrome for Android\n- Firefox for Android\n\nThe goal is to be compatible with the most common browsers and versions currently\nin use.\n\n**I highly recommend combining Vitals with the excellent [MQ+](https://github.com/mcaskill/sass-mq)\nmedia query library to create responsive grids and font sizes.** But Breakpoints is ok too.\n\n## How to use Vitals in your Sass project\n\n_**Disclaimer:** I come from the world of PHP and have no experience with Ruby or Node,\nso I've never really used any of the usual tooling to install this kind of stuff.\nSo naturally, I'm writing these instructions for someone like myself._\n\nIf you grab everything in the `scss` directory and put it in the same directory\nas the file you're working on, you can just use this, which will pull in all the\nimportant stuff:\n```scss\n@import \"vitals\";\n```\n\nOr you can import the pure Sass components without the normalize, if you like:\n```scss\n@import \"flex-grid\";\n@import \"fluid\";\n```\n\n### Vitals Flex+Grid\n\nFlex+Grid is little more than some rewritten vocabulary that makes more sense to me.\nIt's just a little syntactic sugar for those who already use flexbox and grid capably.\n\n#### API Overview\n\nFlex container mixins:\n```scss\n// This is the most basic one that the others inherit from.\n// Its only advantage over \"display: flex;\" is that it adds \"align-items: stretch\"\n// for browser normalization.\n@include flex;\n\n// Each of these also work stand-alone.\n@include flex-row;\n@include flex-row-reverse;\n@include flex-col;\n@include flex-col-reverse;\n```\n\nFlex item mixin:\n```scss\n// This is just a shortcut for flex: 0 1 auto; for browser normalization purposes.\n@include flex-item;\n```\n\nFlex alignment modifiers:\n```scss\n// On a flex row, this aligns horizontally.\n// Accepts all valid CSS values for justify-content, as well as\n// \"start\", \"end\", and \"justify\" if you like those better.\n@include flex-align($val);\n\n// On a flex row, this aligns vertically. I call them \"xalign\" because \"x\" indicates\n// alignment on the cross axis, thus making these suitably named for columns as well.\n// Accepts all valid CSS values for align-items, as well as \"start\" and \"end\".\n@include flex-xalign($val);\n\n// On a flex row child, this changes vertical alignment per item.\n// Accepts all valid CSS values for align-self, as well as \"start\" and \"end\".\n@include item-xalign($val);\n```\n\nFlex item sizing function:\n```scss\n// Returns a measurement that accounts for gutter width.\n// $fraction is literally a fraction size, like 1/4, that the item should occupy\n// in the desired dimension.\n// Default $gutter value is $item-gutter, which defaults to 0.625rem (10px).\nitem-size($fraction, $gutter)\n```\n\nGrid mixins:\n```scss\n@mixin grid-rows($val) { grid-template-rows: $val;    }\n@mixin grid-cols($val) { grid-template-columns: $val; }\n\n@mixin grid-align($val)  { justify-self: $val; }\n@mixin grid-xalign($val) { align-self: $val;   }\n```\n\n#### Flex row Example\nTo start off, set up a container:\n```scss\n.row {\n  @include flex-row;\n}\n```\n\nNow that you have a row container, let's make some flex items that are 25% wide\nwith the default 10px gutter.\n```scss\n.this-item-here {\n  @include flex-item;\n  width: item-size(1/4);\n  margin: 0 0 $item-gutter $item-gutter;\n}\n```\nWhat happened here?\nThe `item-size()` function spits out a measurement that accounts for gutter width.\nFor a standard push-left grid a la [Bourbon Neat 2.0](http://neat.bourbon.io/), you'll\nat least want to set `margin-left` to the gutter size. I also set `margin-bottom`\nso that vertical spacing is the same. `$item-gutter` is an included variable that\nis used by `item-size()` as the default gutter size if one isn't specified. It is\nset to `0.625rem`, which is usually `10px`.\n\nIf you don't want a gutter, that's fine too.\n```scss\n.this-other-item {\n  @include flex-item;\n  width: item-size(1/3, 0); // equivalent to \"width: percentage(1/3);\"\n}\n```\n\n#### How to make cells responsive\n\nTo use Vitals Grid in a responsive manner, just redefine your `item-size()`s\nin different media queries. This works because any item that exceeds 100% of a\ncontainer's main axis will be wrapped automatically.\n\nHere's a primitive example using a sidebar class and the MQ+ media query library\nI recommended above.\n```scss\n.sidebar {\n  @include flex-item;\n  width: item-size(1); // full width by default, for mobile-first design\n  margin-left: $item-gutter;\n\n  @include mq(48em) {\n    width: item-size(1/4); // 25% wide at desktop resolution\n  }\n}\n```\n\nIt's that simple!\n\n### Vitals Fluid\n\nFluid is a function that will output a flexible dimension, which scales along\nwith the viewport width, for use with any property.\n\n**If you use this OUTSIDE of a media query, the scaling will not stop at a\nminimum or maximum.**\n\nThis function takes a min and max size, and a min and max viewport.\n```scss\nfluid($sm, $lg, $narrow, $wide)\n```\n`$sm` is the size to be used when the viewport is at `$narrow` width, and `$lg`\nis the size at `$wide` width.\n\nThis function outputs a `calc()` string that scales the size linearly from `$sm`\nto `$lg` for the viewport range of `$narrow` to `$wide`.\n\nHere's an example using Modular Scale and MQ+.\n```scss\nbody {\n  // the smallest font size, for mobile first\n  font-size: ms(0);\n\n  @include mq(45em, 60em) {\n    // the intermediate size, which scales smoothly\n    font-size: fluid($sm: ms(0), $lg: ms(1), $narrow: 45em, $wide: 60em);\n  }\n\n  @include mq(60em) {\n    // the largest size\n    font-size: ms(1);\n  }\n}\n```\n\n## Is that it?\n\nYes, for now. I think there are some existing projects that adequately address\ntheir goals, such as:\n- [Bourbon](http://bourbon.io/)\n- [MQ+](https://github.com/mcaskill/sass-mq) (media queries)\n- [Typey](https://github.com/jptaranto/typey) (for managing font schemes)\n- [Modular Scale](https://github.com/modularscale/modularscale-sass)\n- [Chroma](https://github.com/JohnAlbin/chroma) (for managing color schemes)\n- [ColorMeSass](https://github.com/RichardBray/color-me-sass) (tons of color values)\n- [Color Schemer](https://github.com/at-import/color-schemer) (manipulates colors)\n\nI'll add to this list as I find other useful Sass projects.\n\n## Tips\n### Modular Scale\nIf you use the Modular Scale library, I've found that the following configuration\ngives some nice round increments at multiples of 3.\n```scss\n$modularscale: (\n  base: 1rem,\n  ratio: 1.25992\n);\n```\nUsing this, `ms(0)` = 1rem, `ms(3)` = 2rem, `ms(6)` = 4rem, `ms(9)` = 8rem, and so on.\n\nI've included this in `_defaults.scss` which you **must** import explicitly if\nyou want to use it, as it is optional.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarrettw%2Fvitals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgarrettw%2Fvitals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarrettw%2Fvitals/lists"}