{"_id":"rm-css-utilities","_rev":"26-a0d0a6fe6bba7146c23933658f2dd3d7","time":{"0.1.0":"2015-07-08T08:40:50.034Z","0.1.1":"2015-07-08T08:40:50.034Z","0.1.2":"2015-07-08T08:40:50.034Z","0.1.3":"2015-07-08T08:40:50.034Z","0.1.4":"2015-07-08T08:40:50.034Z","0.1.5":"2015-07-08T08:40:50.034Z","0.1.6":"2015-07-08T08:40:50.034Z","0.1.7":"2015-07-08T08:40:50.034Z","0.1.8":"2015-07-08T08:40:50.034Z","0.1.9":"2015-07-08T08:40:50.034Z","0.1.10":"2015-07-08T08:40:50.034Z","0.1.11":"2015-07-08T08:40:50.034Z","0.1.12":"2015-07-08T08:40:50.034Z","0.1.13":"2015-07-08T08:40:50.034Z","0.1.14":"2015-07-08T08:40:50.034Z","0.1.15":"2015-07-08T08:40:50.034Z","0.1.16":"2015-07-08T08:40:50.034Z","0.1.17":"2015-07-08T08:40:50.034Z","0.1.18":"2015-07-08T08:40:50.034Z","0.1.20":"2015-07-08T08:40:50.034Z","0.1.21":"2015-07-08T08:40:50.034Z","0.1.22":"2015-07-08T08:40:50.034Z","created":"2020-04-12T17:02:22.121Z","1.0.0":"2020-04-12T17:02:22.269Z","modified":"2022-05-16T01:53:51.458Z","1.0.1":"2020-04-12T17:07:07.236Z","1.0.2":"2020-04-12T20:03:56.621Z"},"name":"rm-css-utilities","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"rm-css-utilities","version":"1.0.0","description":"CSS utilities for using and managing my design properties consistently","repository":{"type":"git","url":"git+https://github.com/robbiemanson/rm-css-utilities.git"},"author":{"name":"Robbie Manson"},"license":"MIT","bugs":{"url":"https://github.com/robbiemanson/rm-css-utilities/issues"},"homepage":"https://github.com/robbiemanson/rm-css-utilities#readme","gitHead":"5c1438a9a60bc9b5c6ef5a743346913ddd01847f","_id":"rm-css-utilities@1.0.0","scripts":{},"_shasum":"013aada6b34e13aaccf8b68618b4f18e871da594","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.4","_npmUser":{"name":"robbiemanson","email":"robbie@robbiemanson.com"},"dist":{"shasum":"013aada6b34e13aaccf8b68618b4f18e871da594","tarball":"https://registry.npmjs.org/rm-css-utilities/-/rm-css-utilities-1.0.0.tgz","integrity":"sha512-ugO0tVaLoMI8Ncb4pOKpZr0d00uUVDTkOKs2jyQCkc9q0YKNRpOJKVJPHzOdyvOY+VEoDleXJd3gYre3GEqCCQ==","fileCount":55,"unpackedSize":95399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJek0meCRA9TVsSAnZWagAAlUoP/jXGXJA+DccR2FKE990y\n40BLJ3gu5O6VvyMi8PNAUlNNREmBcyj6/ZbMtQhv3Elk6DAwrD5/e/3FARAY\nq1KXeOZWoxghVvpXsGBK029h4Ov6hYffCj3vejxdKmAsxU2sjRTTKWNxDo5c\nyWevgTm5GsMTWQ2FR6nzPagRqWD1OFp+rcIikwneD098OLENssQIRdSjUbLM\np2VKPqcUmDxvMprvIgF6reuA7SKa1DN2TE1yJzLy4xUS8bQZm0RTg6IVkfUI\ntQQGRS6LrcsK/nWwdZcitY+jpWE0IrvK8GquBcErZwigKUqkgwe0xR2awhcY\nEcs3Ak681wNos/XID4URBRmltZvvmh1ncQQBDOM2Bf5wqnjkD8lnnqRcb3Ta\nyNjW9i/Oec/OYDpPkKiJgL6GK7IDEgtGgQ0gI9mv/3B20cQBK2mKyn3Bj587\nlGgwWNIDgzs/xryhTlNjKfLpdx24N9eXdTi1kPWaYjI7DcUiLjoqIiWG4Vxe\nqtUQSYe16y4nCe7wf/5GR/vNofmzDOOmD+YPFHAYGvgVvmSO1mzAfsCgF/fR\ncKtvKjfJ16HXxcNKbcD1AeDIoCF9sZcDmbwR3psIDfXqNIGLJatHDycOBifb\nuMdh1pbPv70/3atmfVpjlz5a7JcPHWLAF41B6wao9qBEREOqVyxiumEG6ZGk\nmoO+\r\n=JndZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAoymeR1u/GrOINGnKx/QQdV8ojx6HSfuqeEeFlHgi9OAiEAoJDN7yvtByc1ez+/9j69p7L41y+UuM6Hv0Vm+EbvkxE="}]},"maintainers":[{"name":"robbiemanson","email":"robbie@robbiemanson.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rm-css-utilities_1.0.0_1586710942121_0.9096731130988367"},"_hasShrinkwrap":false},"1.0.1":{"name":"rm-css-utilities","version":"1.0.1","description":"CSS utilities for using and managing my design properties consistently","repository":{"type":"git","url":"git+https://github.com/robbiemanson/rm-css-utilities.git"},"author":{"name":"Robbie Manson"},"license":"MIT","bugs":{"url":"https://github.com/robbiemanson/rm-css-utilities/issues"},"homepage":"https://github.com/robbiemanson/rm-css-utilities#readme","gitHead":"7e08b9ebb4987a67c965dbf545bac7e3382e883b","_id":"rm-css-utilities@1.0.1","scripts":{},"_shasum":"0f5004201a3023f3ebde5af1492e87498368a8ba","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.4","_npmUser":{"name":"robbiemanson","email":"robbie@robbiemanson.com"},"dist":{"shasum":"0f5004201a3023f3ebde5af1492e87498368a8ba","tarball":"https://registry.npmjs.org/rm-css-utilities/-/rm-css-utilities-1.0.1.tgz","integrity":"sha512-J5K5kg4p1masi0Y0xwK1cHBjwRNsnNiaMo/zopcQWF5Oqk9ioV9t/Ul++Ls4GyNKOFR763JlMYoFIYQZAHCkRw==","fileCount":54,"unpackedSize":94500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJek0q7CRA9TVsSAnZWagAAog4P/jjabMoJRKJc8zjyrxG6\neYYBEOq4I8yUzGraTxhsQjz1N1NHAsu16YIMQ2OFcva0ZgzkXw3yfnanfS74\nTEUXzJ/O3lgGv86EVwz0EqdW0AKVw9+jOwj++Q8uNJuY3dD/pWCi6IAozryg\n8E7lvi9Z76YOODo2h4oR4XIB8GMqtXSaNcLypGt/w84aSCirak6QET3vBSVZ\nhgw1vKTKKYoRWJMt41ZfHJBmlDGkWKoe0Sy4qB+3gD0CSKyzy2Sq8Z4HWY0F\nqEGNzME5XP/QTz97aAszRdA/VdjJ4xrtxp2he+4tWeFyw/gYq4hnUryt3Jx/\nuuV+zO3lkM/0Rbi3YAjYKBkUTda3qt+xQpdZCQ1ETtduZOqjIuK6tLmAFJIt\nBMTnTkSzMQad0vys/5m5Qz2xdOcQ1Q4vZlt6zcmvfvkCIikUatltg15VENgD\nQ70GHEw6HT0lqkSBl+lVluQBn1HcUTHCOlLJ+Y61xaeD4SOMoFcplr/85Hhy\nEql3NThZza8O/FLhaMWM9ygrj4tkbqaahBODWHXOz4191QSqKkKQSP6+7Mzp\nAEmawKCXeOtYzxom3SUDoOpZfKl7BUIQTtmwDPLK57fQQHummIujezxNO5tJ\n9WdF6kcVYdGR/W9IvI56ZTLO7jTQ4JYOedc+E0yUfEzBY4syEVD/n0p2bhHi\noBEK\r\n=ufYm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvcMxZ2RodNwqpaYfXxkNoWwSmW38nKL5ZdU4dpxdv9AIhAJJnIa9fQW0fhrmodRTX1GPIX6xgABOHEQejBxCSsqkj"}]},"maintainers":[{"name":"robbiemanson","email":"robbie@robbiemanson.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rm-css-utilities_1.0.1_1586711227022_0.7523350394686286"},"_hasShrinkwrap":false},"1.0.2":{"name":"rm-css-utilities","version":"1.0.2","description":"CSS utilities for using and managing my design properties consistently","repository":{"type":"git","url":"git+https://github.com/robbiemanson/rm-css-utilities.git"},"author":{"name":"Robbie Manson"},"license":"MIT","bugs":{"url":"https://github.com/robbiemanson/rm-css-utilities/issues"},"homepage":"https://github.com/robbiemanson/rm-css-utilities#readme","gitHead":"8747b960a873dbd311bca4c47d8deb13adc9d894","_id":"rm-css-utilities@1.0.2","scripts":{},"_shasum":"f724eee5377f8e91574c00f166de166112ef0440","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.4","_npmUser":{"name":"robbiemanson","email":"robbie@robbiemanson.com"},"dist":{"shasum":"f724eee5377f8e91574c00f166de166112ef0440","tarball":"https://registry.npmjs.org/rm-css-utilities/-/rm-css-utilities-1.0.2.tgz","integrity":"sha512-XN0TTJvVOmNW9AXWhBFdMtmSZya/GKJvuud/RobB55al9ekqw56kcsRtgXO/Ul/iZNIdecMWSnOoC8kjKv9A5Q==","fileCount":54,"unpackedSize":94500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJek3QsCRA9TVsSAnZWagAAVc4QAJNGL/34EfzQfruqFR17\nIU8subQu/xlPBo42UOLQmgOM9V3z9BzTcI+1x4eQ9Su2vhht/5xRPuMRTqVZ\nD7sDxyO0lir1BhaxoQZEukK0a25rVeh45KFkIuEACBLxSbc++SvWLIcDb64+\nszZJ5WhKf0ptfJzxYEXC3yaNGDcxwRkC7x5iJwb8oiBEcBIRdzKMHtPl1PKJ\nqVhjGrYn/7lUPFnGf5SoGe2vVBrALQO6UntI5ifSzkGxjochpo4chbPX3thc\n03+JZKDabTM2EPpvoBWR1pQwluqvBk5Hndc80JOyGP08dIlop8QLZHVsyPMC\nMxSpAgiRHa4uLBhyM6GKfsDy58NgLB5ati+brrd7nCBL9+mBsRu6de58RxYi\nCtQTD9Gd09xQFJmGWuOXSRFTlo3JCt8URO6lcBWx+B5/eDNyFIV4M4qSNOhc\nksUm/GZacX4tcOuGi058CEHG+hvo+Y3KiP9bClQeuvLvd0y2Yp7dbmPcVwSd\n4KzUtNE9EzC6JOhrxeDXp+cK4JgV8ijnyG9LYLg1B8nVmRc1vHf12SzQAaN7\nlyzMO9T0oDGD2kKOKSWXPkaOFIwNyzscu4DNPVSqhQBr9MtkJyCqMmhaD087\nFwVJ3s+/yehb3qdJ8irXC3DW//XqRR6FOS9e78BJnzVO6wzlDDj6NJjnRqKo\n31eD\r\n=fwGQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2RGPzMe8uuHsLrGHzADOChE0uLncOEzkDE/rBba112wIhAJknGYuBhwB2HUs5/XhBjV83M9gLdGEn9vyZcGZQB8gH"}]},"maintainers":[{"name":"robbiemanson","email":"robbie@robbiemanson.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rm-css-utilities_1.0.2_1586721836520_0.97221375425868"},"_hasShrinkwrap":false}},"maintainers":[{"name":"robbiemanson","email":"robbie@robbiemanson.com"}],"description":"CSS utilities for using and managing my design properties consistently","homepage":"https://github.com/robbiemanson/rm-css-utilities#readme","repository":{"type":"git","url":"git+https://github.com/robbiemanson/rm-css-utilities.git"},"author":{"name":"Robbie Manson"},"bugs":{"url":"https://github.com/robbiemanson/rm-css-utilities/issues"},"license":"MIT","readme":"# RM CSS utilities\nThese CSS utilities are my ‘one true source’ of design properties across my projects that use my universal website template. All based on the work I did in 2015 on [fa-css-utilities](https://github.com/fac/fa-css-utilities). They comprise:\n\n* Universal scales and aliases for: `font-size`, `font-family`, `line-height`, `color`, `background-color`, `margin`, `padding`, `border-radius`, and more\n* Library of colours for text and block-level elements\n* Mixins and `.u-` utility classes for 40+ CSS properties\n\nThis means properties are managed and versioned in a single place, and there's a universal language for using them across projects.\n\n## Install\n\n* [Install using NPM](https://www.npmjs.com/package/rm-css-utilities)\n\n## Overview\n\n**Global values and aliases**. Global utility values are defined in [`_utility-values`](https://github.com/robbiemanson/rm-css-utilities/blob/master/_utility-values.scss). Utilities `font-size`, `line-height`, `padding`, `margin`, etc have scales of values, as well as aliases. All aliases live in [`_utility-aliases.scss`](https://github.com/robbiemanson/rm-css-utilities/blob/master/_utility-aliases.scss). Aliases provide a finite scale (`x-small`, `default`, `xx-large`, etc) to make authoring easier and more meaningful.\n\n**Local aliases**. You can assign local, project-specific aliases to global values by adding rules to [`_project-aliases`](https://github.com/robbiemanson/rm-css-utilities/blob/master/_project-aliases.scss). This way you aren’t continually declaring something like `@include line-height(x-loose)` for your project’s default `line-height`. You can just assign `x-loose` to `default` for your project.\n\n**Turning utility classes on/off**. Utility _classes_ mirror the behaviour of our mixins but can be applied to HTML elements directly. Rendering all of them naturally adds a lot of weight a `.css` file, so they can be individually turned on/off in [`_utility-settings.scss`](https://github.com/robbiemanson/rm-css-utilities/blob/master/assets/scss/_utility-settings.scss). Utility classes have `!important` because utilities exist to do _one thing no matter what_.\n\n**Optional `!important`**. `!important` can be added to any mixin declaration, e.g.: `@include padding(large, !important);`. This is especially useful for refactoring; `!important` allows us a way to turn existing UI patterns that rely on the cascade into completely self-contained components — _without_ breaking lots of stuff. Once a component has been created and rolled out, any `!important` arguments can just be removed.\n\n## Examples\n\nMost utilities can be applied two ways: using mixins in a `.scss` file, or directly to HTML elements as utility classes. Using mixins is preferred as you get all of the utility functionality without any extra weight being added to the output CSS file, and it encourages the idea of a component-based system.\n\n### Using mixins in `.scss` files\n\n```scss\n.MyComponent {\n  @include background-color(gray-13);\n  @include font-family(default);\n  @include font-size(large);\n  @include line-height(tight);\n  @include text-color(gray-5);\n}\n\n.MyOtherComponent {\n  @include flexbox(flex);\n  @include flex-direction(row-reverse);\n  @include flex-justify-content(center);\n  @include flex-grow(2);\n  @include flex-shrink(0);\n  @include margin-top(large);\n}\n```\n\n### Using utility classes in HTML\nUtility classes are useful for prototyping ideas, but use them with care and treat them as stop-gaps (remember they apply `!important`). Components should handle their own states and variants, so there should be relatively few utility classes being used in production.\n\n**You might start with this&hellip;**\n\n```html\n<div class=\"u-margin--0 u-padding--0 u-text-align--center u-border-radius--default u-border--thin--solid--rm-blue u-line-height--tight u-flexbox u-flex-align-items--stretch u-flex-direction--row\">\n  <button class=\"u-background--none u-display--inline-block u-margin--0 u-border-right--thin--solid--blue u-padding--x-small--small u-text-color--x-light u-flex-grow--1 u-text-truncate\">Payment</button>\n  <button class=\"u-background--none u-display--inline-block u-margin--0 u-padding--x-small--small u-text-color--x-light u-flex-grow--1 u-text-truncate\">Refund</button>\n</div>\n```\n\n**&hellip;but you should end up with:**\n\n```html\n<div class=\"SegmentedControl\">\n  <button class=\"SegmentedControl-segment\">Payment</button>\n  <button class=\"SegmentedControl-segment\">Refund</button>\n</div>\n```\n\n```scss\n.SegmentedControl {\n  margin: 0;\n  padding: 0;\n  text-align: center;\n  @include border-radius(default);\n  @include border(thin, solid, gray-8);\n  @include flexbox(flex);\n  @include flex-align-items(stretch);\n  @include flex-direction(row);\n  @include line-height(tight);\n\n.SegmentedControl-segment {\n  background: none;\n  display: inline-block;\n  margin: 0;\n  @include border-right(thin, solid, rm-blue);\n  @include flex-grow(1);\n  @include padding(x-small, small)\n  @include text-color(x-light);\n  @include text-truncate;\n}\n```\n\n### Syntax\n```\n.u-<utility>[-descendent][--value]\n```\n\nUtilities are written in lower case as they tend to serve as direct representations of actual CSS properties (as opposed to our components which are written in upper camel case). Keeping the syntax closer to actual CSS not only makes utilties more predictable, it also helps to create a further distinction between components and utilities.\n\n## Making changes\n\n#### Branch off, make changes, create a PR\n\n1. Make sure you're up to date with the master branch (`git checkout master; git fetch; git pull origin master`)\n2. Branch off master (`git checkout -b <your-branch-name>`)\n3. Make changes\n4. Increment the version number in [package.json](https://github.com/robbiemanson/rm-css-utilities/blob/master/package.json). Generally: backwards-compatible fixes and smaller amendments to existing code are patches, new components and breaking changes count as minor releases, and full rewrites are major releases. See [semver.org](http://semver.org/) for detailed guidance.\n5. Push up changes (`git push origin <your-branch-name>`) and write a [helpful pull request](https://github.com/blog/1943-how-to-write-the-perfect-pull-request) describing changes\n\n#### Review PR, merge to master, create new release\n\n5. Make any required changes then merge branch into master: `git checkout master; git merge --no-ff <branch-name>`\n6. Push up the new version of master (`git push origin master`).\n7. [Create a new release](https://help.github.com/articles/creating-releases/) with a useful description. Original PR is probably a good starting point. **If making breaking changes, provide guidance in the release notes about what changes will have to be made in other projects**\n8. [Publish the npm package](https://docs.npmjs.com/getting-started/publishing-npm-packages) (`npm publish`) with a new version number.\n\n### How to…\n\n#### Add a new colour\nTo create a new colour variable, add it to the *Colors* section in [_utility-values.scss](https://github.com/robbiemanson/rm-css-utilities/blob/master/_utility-values.scss). New colour should be defined using the `rgb(0, 0, 0)` format, and should follow the standard naming syntax: `$color--rm-colour-name--variant`, e.g. `$color--rm-blue--dark`.\n\n**NB:** New colours should only be added to the utilities after exact value has been decided, so be sure to test them locally beforehand.\n\n## Acknowledgements\n* [Nicolas Gallagher](https://github.com/necolas) particularly for his work on [SUIT CSS](https://suitcss.github.io/), which has informed much of the thinking behind this work\n* [Brian Franco](https://github.com/mastastealth) for the excellent [SASS flex mixin](https://github.com/mastastealth/sass-flex-mixin) we used as the basis for our own partials","readmeFilename":"README.md"}