{"id":16124284,"url":"https://github.com/jongacnik/gr8","last_synced_at":"2025-05-07T15:21:32.486Z","repository":{"id":57252931,"uuid":"80873536","full_name":"jongacnik/gr8","owner":"jongacnik","description":"Customizable, functional css utilities","archived":false,"fork":false,"pushed_at":"2020-06-18T06:07:47.000Z","size":201,"stargazers_count":174,"open_issues_count":6,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-24T14:04:12.832Z","etag":null,"topics":["css","functional","utilities"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/jongacnik.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":"2017-02-03T22:06:40.000Z","updated_at":"2024-07-02T13:00:06.000Z","dependencies_parsed_at":"2022-08-31T22:11:14.924Z","dependency_job_id":null,"html_url":"https://github.com/jongacnik/gr8","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fgr8","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fgr8/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fgr8/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fgr8/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jongacnik","download_url":"https://codeload.github.com/jongacnik/gr8/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252902726,"owners_count":21822291,"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":["css","functional","utilities"],"created_at":"2024-10-09T21:20:25.649Z","updated_at":"2025-05-07T15:21:32.467Z","avatar_url":"https://github.com/jongacnik.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003egr8\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/gr8\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/gr8.svg?style=flat-square\" alt=\"NPM version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/feross/standard\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\" alt=\"NPM version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"http://gr8.style\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/website-gr8.style-ff69b4.svg?style=flat-square\" alt=\"Website\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\nCustomizable, functional css utilities built using [**gr8-util**](https://github.com/jongacnik/gr8-util). Includes:\n\n- [**css stylesheet**](#stylesheet-usage) with default utilities\n- [**`gr8` function**](#javascript-usage) to generate and customize utilities within javascript\n\n## Usage\n\n### stylesheet usage\n\nThe simplest way to use `gr8` is to include the [gr8.css](https://github.com/jongacnik/gr8/blob/master/dist/gr8.css) stylesheet in your project:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/gr8.css\" /\u003e\n```\n\n### javascript usage\n\nUse the `gr8` function to generate utilities:\n\n```js\nvar gr8 = require('gr8')\nvar css = gr8()\n```\n\n[Detailed usage →](#api)\n\n## Utilities\n\nDefault utilities:\n\n\u003cdetails id=\"column\"\u003e\n\u003csummary\u003ecolumn\u003c/summary\u003e\n\n```css\n.c1{width:8.33333%}\n.c2{width:16.66667%}\n.c3{width:25%}\n.c4{width:33.33333%}\n.c5{width:41.66667%}\n.c6{width:50%}\n.c7{width:58.33333%}\n.c8{width:66.66667%}\n.c9{width:75%}\n.c10{width:83.33333%}\n.c11{width:91.66667%}\n.c12{width:100%}\n.s1{width:100%}\n.s2{width:50%}\n.s3{width:33.33333%}\n.s4{width:25%}\n.s5{width:20%}\n.s6{width:16.66667%}\n.s7{width:14.28571%}\n.s8{width:12.5%}\n.s9{width:11.11111%}\n.s10{width:10%}\n.s11{width:9.09091%}\n.s12{width:8.33333%}\n.co0{margin-left:0}\n.co1{margin-left:8.33333%}\n.co2{margin-left:16.66667%}\n.co3{margin-left:25%}\n.co4{margin-left:33.33333%}\n.co5{margin-left:41.66667%}\n.co6{margin-left:50%}\n.co7{margin-left:58.33333%}\n.co8{margin-left:66.66667%}\n.co9{margin-left:75%}\n.co10{margin-left:83.33333%}\n.co11{margin-left:91.66667%}\n.co12{margin-left:100%}\n```\n\n\u003c/details\u003e\n\n\u003cdetails id=\"margin\"\u003e\n\u003csummary\u003emargin\u003c/summary\u003e\n\n```css\n.m0{margin:0}\n.m1{margin:1rem}\n.m2{margin:2rem}\n.m3{margin:3rem}\n.m4{margin:4rem}\n.mt0{margin-top:0}\n.mt1{margin-top:1rem}\n.mt2{margin-top:2rem}\n.mt3{margin-top:3rem}\n.mt4{margin-top:4rem}\n.mr0{margin-right:0}\n.mr1{margin-right:1rem}\n.mr2{margin-right:2rem}\n.mr3{margin-right:3rem}\n.mr4{margin-right:4rem}\n.mb0{margin-bottom:0}\n.mb1{margin-bottom:1rem}\n.mb2{margin-bottom:2rem}\n.mb3{margin-bottom:3rem}\n.mb4{margin-bottom:4rem}\n.ml0{margin-left:0}\n.ml1{margin-left:1rem}\n.ml2{margin-left:2rem}\n.ml3{margin-left:3rem}\n.ml4{margin-left:4rem}\n.mx0{margin-left:0;margin-right:0}\n.mx1{margin-left:1rem;margin-right:1rem}\n.mx2{margin-left:2rem;margin-right:2rem}\n.mx3{margin-left:3rem;margin-right:3rem}\n.mx4{margin-left:4rem;margin-right:4rem}\n.my0{margin-top:0;margin-bottom:0}\n.my1{margin-top:1rem;margin-bottom:1rem}\n.my2{margin-top:2rem;margin-bottom:2rem}\n.my3{margin-top:3rem;margin-bottom:3rem}\n.my4{margin-top:4rem;margin-bottom:4rem}\n```\n\n\u003c/details\u003e\n\n\u003cdetails id=\"padding\"\u003e\n\u003csummary\u003epadding\u003c/summary\u003e\n\n```css\n.p0{padding:0}\n.p1{padding:1rem}\n.p2{padding:2rem}\n.p3{padding:3rem}\n.p4{padding:4rem}\n.pt0{padding-top:0}\n.pt1{padding-top:1rem}\n.pt2{padding-top:2rem}\n.pt3{padding-top:3rem}\n.pt4{padding-top:4rem}\n.pr0{padding-right:0}\n.pr1{padding-right:1rem}\n.pr2{padding-right:2rem}\n.pr3{padding-right:3rem}\n.pr4{padding-right:4rem}\n.pb0{padding-bottom:0}\n.pb1{padding-bottom:1rem}\n.pb2{padding-bottom:2rem}\n.pb3{padding-bottom:3rem}\n.pb4{padding-bottom:4rem}\n.pl0{padding-left:0}\n.pl1{padding-left:1rem}\n.pl2{padding-left:2rem}\n.pl3{padding-left:3rem}\n.pl4{padding-left:4rem}\n.px0{padding-left:0;padding-right:0}\n.px1{padding-left:1rem;padding-right:1rem}\n.px2{padding-left:2rem;padding-right:2rem}\n.px3{padding-left:3rem;padding-right:3rem}\n.px4{padding-left:4rem;padding-right:4rem}\n.py0{padding-top:0;padding-bottom:0}\n.py1{padding-top:1rem;padding-bottom:1rem}\n.py2{padding-top:2rem;padding-bottom:2rem}\n.py3{padding-top:3rem;padding-bottom:3rem}\n.py4{padding-top:4rem;padding-bottom:4rem}\n```\n\n\u003c/details\u003e\n\n\u003cdetails id=\"opacity\"\u003e\n\u003csummary\u003eopacity\u003c/summary\u003e\n\n```css\n.op0{opacity:0}\n.op25{opacity:0.25}\n.op50{opacity:0.5}\n.op75{opacity:0.75}\n.op100{opacity:1}\n```\n\n\u003c/details\u003e\n\n\u003cdetails id=\"background\"\u003e\n\u003csummary\u003ebackground\u003c/summary\u003e\n\n```css\n.bgsc{background-size:cover}\n.bgsct{background-size:contain}\n.bgpc{background-position:center}\n.bgpt{background-position:top}\n.bgpr{background-position:right}\n.bgpb{background-position:bottom}\n.bgpl{background-position:left}\n.bgrn{background-repeat:no-repeat}\n.bgrx{background-repeat:repeat-x}\n.bgry{background-repeat:repeat-y}\n```\n\n\u003c/details\u003e\n\n\u003cdetails id=\"flex\"\u003e\n\u003csummary\u003eflex\u003c/summary\u003e\n\n```css\n.x{display:flex}\n.xac{align-items:center}\n.xab{align-items:baseline}\n.xas{align-items:stretch}\n.xafs{align-items:flex-start}\n.xafe{align-items:flex-end}\n.xdr{flex-direction:row}\n.xdrr{flex-direction:row-reverse}\n.xdc{flex-direction:column}\n.xdcr{flex-direction:column-reverse}\n.xjc{justify-content:center}\n.xjb{justify-content:space-between}\n.xja{justify-content:space-around}\n.xjs{justify-content:flex-start}\n.xje{justify-content:flex-end}\n.xw{flex-wrap:wrap}\n.xwr{flex-wrap:wrap-reverse}\n.xwn{flex-wrap:nowrap}\n.xi{flex:initial}\n.xx{flex:1}\n.xa{flex:auto}\n.xn{flex:none}\n.xo0{order:0}\n.xo1{order:1}\n.xo2{order:2}\n.xo3{order:3}\n.xo4{order:4}\n.xot{order:-1}\n.xob{order:99}\n```\n\n\u003c/details\u003e\n\n\u003cdetails id=\"display\"\u003e\n\u003csummary\u003edisplay\u003c/summary\u003e\n\n```css\n.df{display:flex}\n.db{display:block}\n.dib{display:inline-block}\n.di{display:inline}\n.dt{display:table}\n.dtc{display:table-cell}\n.dtr{display:table-row}\n.dn{display:none}\n```\n\n\u003c/details\u003e\n\n\u003cdetails id=\"float\"\u003e\n\u003csummary\u003efloat\u003c/summary\u003e\n\n```css\n.fl{float:left}\n.fr{float:right}\n.fn{float:none}\n.cf:after{content:\"\";display:block;clear:both}\n```\n\n\u003c/details\u003e\n\n\u003cdetails id=\"overflow\"\u003e\n\u003csummary\u003eoverflow\u003c/summary\u003e\n\n```css\n.oh{overflow:hidden}\n.os{overflow:scroll}\n.ov{overflow:visible}\n.oxh{overflow-x:hidden}\n.oxs{overflow-x:scroll}\n.oxv{overflow-x:visible}\n.oyh{overflow-y:hidden}\n.oys{overflow-y:scroll}\n.oyv{overflow-y:visible}\n```\n\n\u003c/details\u003e\n\n\u003cdetails id=\"positioning\"\u003e\n\u003csummary\u003epositioning\u003c/summary\u003e\n\n```css\n.psa{position:absolute}\n.psr{position:relative}\n.psf{position:fixed}\n.pss{position:static}\n.t0{top:0}\n.r0{right:0}\n.b0{bottom:0}\n.l0{left:0}\n.z0{z-index:0}\n.z1{z-index:1}\n.z2{z-index:2}\n.z3{z-index:3}\n.z4{z-index:4}\n```\n\n\u003c/details\u003e\n\n\u003cdetails id=\"size\"\u003e\n\u003csummary\u003esize\u003c/summary\u003e\n\n```css\n.w0{width:0}\n.w100{width:100%}\n.h0{height:0}\n.h100{height:100%}\n.vw50{width:50vw}\n.vw100{width:100vw}\n.vwmn50{min-width:50vw}\n.vwmn100{min-width:100vw}\n.vwmx50{max-width:50vw}\n.vwmx100{max-width:100vw}\n.vh50{height:50vh}\n.vh100{height:100vh}\n.vhmn50{min-height:50vh}\n.vhmn100{min-height:100vh}\n.vhmx50{max-height:50vh}\n.vhmx100{max-height:100vh}\n.ar25:before{padding-top:25%;content:\"\";display:block}\n.ar50:before{padding-top:50%;content:\"\";display:block}\n.ar75:before{padding-top:75%;content:\"\";display:block}\n.ar100:before{padding-top:100%;content:\"\";display:block}\n```\n\n\u003c/details\u003e\n\n\u003cdetails id=\"typography\"\u003e\n\u003csummary\u003etypography\u003c/summary\u003e\n\n```css\n.fs1{font-size:1rem}\n.fs1-2{font-size:1.2rem}\n.fs1-6{font-size:1.6rem}\n.fs2-4{font-size:2.4rem}\n.fs3-2{font-size:3.2rem}\n.fs6-4{font-size:6.4rem}\n.lh1{line-height:1}\n.lh1-5{line-height:1.5}\n.fsn{font-style:normal}\n.fsi{font-style:italic}\n.fwn{font-weight:normal}\n.fwb{font-weight:bold}\n.tal{text-align:left}\n.tac{text-align:center}\n.tar{text-align:right}\n.taj{text-align:justify}\n.toi{text-overflow:initial}\n.toc{text-overflow:clip}\n.toe{text-overflow:ellipsis}\n.tdu{text-decoration:underline}\n.tdo{text-decoration:overline}\n.tdlt{text-decoration:line-through}\n.tdn{text-decoration:none}\n.ttu{text-transform:uppercase}\n.ttl{text-transform:lowercase}\n.ttc{text-transform:capitalize}\n.ttn{text-transform:none}\n.vabl{vertical-align:baseline}\n.vat{vertical-align:top}\n.vam{vertical-align:middle}\n.vab{vertical-align:bottom}\n.wsn{white-space:normal}\n.wsnw{white-space:nowrap}\n.wsp{white-space:pre}\n.wsi{white-space:inherit}\n.tc1{columns:1}\n.tc2{columns:2}\n.tc3{columns:3}\n.tc4{columns:4}\n```\n\n\u003c/details\u003e\n\n\u003cdetails id=\"miscellaneous\"\u003e\n\u003csummary\u003emiscellaneous\u003c/summary\u003e\n\n```css\n.curp{cursor:pointer}\n.curd{cursor:default}\n.cura{cursor:alias}\n.curzi{cursor:zoom-in}\n.curzo{cursor:zoom-out}\n.usn{user-select:none}\n.usa{user-select:auto}\n.ust{user-select:text}\n.pen{pointer-events:none}\n.pea{pointer-events:auto}\n.vh{visibility:hidden}\n.vv{visibility:visible}\n```\n\n\u003c/details\u003e\n\n\u003cdetails id=\"development\"\u003e\n\u003csummary\u003edevelopment\u003c/summary\u003e\n\n```css\n.dev{outline:1px solid #912eff}\n.dev \u003e * {outline:1px solid #5497ff}\n.dev \u003e * \u003e * {outline:1px solid #51feff}\n.dev \u003e * \u003e * \u003e * {outline:1px solid #ff0000}\n.dev \u003e * \u003e * \u003e * * {outline:1px solid #00ff00}\n```\n\n\u003c/details\u003e\n\n## API\n\n### `css = gr8([opts])`\n\nGenerate utilities and return a string of css. `opts` accepts the following values:\n\n#### Value Options\n\n- `opts.spacing` **[Mixed]** values for [margin](#margin) \u0026 [padding](#padding) utilities\n- `opts.fontSize` **[Mixed]** values for [font-size](#typography) utilities\n- `opts.lineHeight` **[Mixed]** values for [line-height](#typography) utilities\n- `opts.size` **[Mixed]** values for [width \u0026 height](#size) utilities\n- `opts.viewport` **[Mixed]** values for [viewport](#size) utilities\n- `opts.zIndex` **[Mixed]** values for [zIndex](#positioning) utilities\n- `opts.flexOrder` **[Mixed]** values for [flex-order](#flex) utilities\n- `opts.opacity` **[Mixed]** values for [opacity](#opacity) utilities\n- `opts.aspectRatio` **[Mixed]** values for [aspect ratio](#size) utilities\n- `opts.textColumn` **[Mixed]** values for [text columns](#typography) utilities\n\n#### Selector Options\n\n- `opts.selector` **[Function]** css selector template function\n- `opts.breakpoints` **[Object]** values for breakpoint utilities\n- `opts.breakpointSelector` **[String | Function]** selector shortcut or css selector template function\n\n#### Custom Utilities Options\n\n- `opts.utils` **[Array]** custom [gr8-util](https://github.com/jongacnik/gr8-util) utilities\n- `opts.exclude` **[Array]** keys of default utilities to exclude\n\n## Value Options\n\nValue options customize numeric `gr8` utilities. They accept Numbers, Strings, Arrays, or Objects. Typically Arrays of Numbers will be used. Refer to [gr8-util](https://github.com/jongacnik/gr8-util) for details on all possible ways to format values.\n\n**Defaults:**\n\n```js\nvar css = gr8({\n  spacing: [0, 1, 2, 3, 4],\n  fontSize: [1, 1.2, 1.6, 2.4, 3.2, 6.4],\n  lineHeight: [1, 1.5],\n  size: [0, 100],\n  viewport: [50, 100],\n  zIndex: [0, 1, 2, 3, 4],\n  flexOrder: [0, 1, 2, 3, 4],\n  opacity: [0, 25, 50, 75, 100],\n  aspectRatio: [25, 50, 75, 100],\n  textColumn: [1, 2, 3, 4]\n})\n```\n\n## Selector Options\n\nSelector options control selectors \u0026 breakpoints.\n\n**Defaults:**\n\n```js\nvar css = gr8({\n  selector: s =\u003e `.${s}`,\n  breakpoints: {\n    sm: 768,\n    md: 1024,\n    lg: 1280\n  },\n  breakpointSelector: 'attribute'\n})\n```\n\n### `opts.selector`\n\nFunction expects a selector name as input and returns a css selector string as output. For example, to use an attribute selector instead of classes:\n\n```js\nvar css = gr8({\n  selector: s =\u003e `[gr8~=\"${s}\"]`\n})\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eOutput\u003c/strong\u003e\u003c/summary\u003e\n\n  ```css\n  [gr8~=\"fs1\"]{font-size:1rem}\n  [gr8~=\"fs1-6\"]{font-size:1.6rem}\n  /* etc... */\n  ```\n\n\u003c/details\u003e\n\n### `opts.breakpoints`\n\nObject keys are used in selector names and object values are used to define the media queries. Object values can either be integers (which results in a `min-width` media queries), or object values can be media query strings. Pass `false` to disable breakpoint utilities entirely:\n\n```js\nvar css = gr8({\n  breakpoints: {\n    small: 1024,\n    medium: '(min-width:768px) and (max-width:1280px)',\n    'not-big': '(max-width:1024px)',\n    portrait: '(orientation:portrait)'\n  }\n})\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eOutput\u003c/strong\u003e\u003c/summary\u003e\n\n  ```css\n  @media (min-width:1024px) {\n    [small~=\"fs1\"]{font-size:1rem}\n    /* etc... */  \n  }\n  @media (min-width:768px) and (max-width:1280px) {\n    [medium~=\"fs1\"]{font-size:1rem}\n    /* etc... */  \n  }\n  @media (max-width:1024px) {\n    [not-big~=\"fs1\"]{font-size:1rem}\n    /* etc... */  \n  }\n  @media (orientation:portrait) {\n    [portrait~=\"fs1\"]{font-size:1rem}\n    /* etc... */  \n  }\n  ```\n\n\u003c/details\u003e\u003cbr\u003e\n\n**Note:** If you care about valid attribute selectors, prepend `data-` to your breakpoint keys.\n\n### `opts.breakpointSelector`\n\nBy default, attribute selectors are generated for breakpoint utilities (as seen above). Use prefixed classes instead by passing in the `'class'` shortcut, or provide a selector function for more granular control:\n\n#### `'class'` Shortcut\n\n```js\nvar css = gr8({\n  breakpointSelector: 'class'\n})\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eOutput\u003c/strong\u003e\u003c/summary\u003e\n  \n  ```css\n  @media (min-width:768px) {\n    .sm-fs1{font-size:1rem}\n    /* etc... */\n  }\n  @media (min-width:1024px) {\n    .md-fs1{font-size:1rem}\n    /* etc... */\n  }\n  @media (min-width:1280px) {\n    .lg-fs1{font-size:1rem}\n    /* etc... */\n  }\n  ```\n\n\u003c/details\u003e\n\n#### Selector Function\n\n\n```js\nvar css = gr8({\n  breakpointSelector: key =\u003e s =\u003e `.gr8-${key}-${s}`\n})\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eOutput\u003c/strong\u003e\u003c/summary\u003e\n\n  ```css\n  @media (min-width:768px) {\n    .gr8-sm-fs1{font-size:1rem}\n    /* etc... */\n  }\n  @media (min-width:1024px) {\n    .gr8-md-fs1{font-size:1rem}\n    /* etc... */\n  }\n  @media (min-width:1280px) {\n    .gr8-lg-fs1{font-size:1rem}\n    /* etc... */\n  }\n  ```\n\n\u003c/details\u003e\n\n## Custom Utilities Options\n\n[gr8-util](https://github.com/jongacnik/gr8-util) is a little function for generating functional css utilities. Given a plain object, concise css utilities are generated. All the utilities in `gr8` are built using this.\n\nUse the `utils` option to pass an array of `gr8-util` objects to extend the `gr8` output with custom utilities:\n\n```js\nvar bgcolor = {\n  prop: {\n    bgc: 'background-color'\n  },\n  vals: ['red', 'blue', 'green']\n}\n\nvar fontcolor = {\n  prop: {\n    fc: 'color'\n  },\n  vals: ['red', 'blue', 'green']\n}\n\nvar css = gr8({\n  utils: [\n    bgcolor,\n    fontcolor\n  ]\n})\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eOutput\u003c/strong\u003e\u003c/summary\u003e\n\n  ```css\n  .bgcr{background-color:red}\n  .bgcb{background-color:blue}\n  .bgcg{background-color:green}\n  .fcr{color:red}\n  .fcb{color:blue}\n  .fcg{color:green}\n  /* etc... */\n\n  @media (min-width:768px) {\n    [sm~=\"bgcr\"]{background-color:red}\n    [sm~=\"bgcb\"]{background-color:blue}\n    [sm~=\"bgcg\"]{background-color:green}\n    [sm~=\"fcr\"]{color:red}\n    [sm~=\"fcb\"]{color:blue}\n    [sm~=\"fcg\"]{color:green}\n    /* etc... */\n  }\n\n  @media (min-width:1024px) {\n    [md~=\"bgcr\"]{background-color:red}\n    [md~=\"bgcb\"]{background-color:blue}\n    [md~=\"bgcg\"]{background-color:green}\n    [md~=\"fcr\"]{color:red}\n    [md~=\"fcb\"]{color:blue}\n    [md~=\"fcg\"]{color:green}\n    /* etc... */\n  }\n\n  @media (min-width:1280px) {\n    [lg~=\"bgcr\"]{background-color:red}\n    [lg~=\"bgcb\"]{background-color:blue}\n    [lg~=\"bgcg\"]{background-color:green}\n    [lg~=\"fcr\"]{color:red}\n    [lg~=\"fcb\"]{color:blue}\n    [lg~=\"fcg\"]{color:green}\n    /* etc... */\n  }\n  ```\n\n\u003c/details\u003e\u003cbr\u003e\n\n**[Refer to gr8-util for further documentation on generating custom utilities.](https://github.com/jongacnik/gr8-util)**\n\n### `opts.exclude`\n\nUse the `exclude` option to remove some of the default utilities. Accepts an array with any of the following values:\n\n`column`, `margin`, `padding`, `opacity`, `background`, `flex`, `display`, `float`, `overflow`, `positioning`, `size`, `typography`, `miscellaneous`, `development`\n\n## Proxies\n\nFor more advanced use cases, some additional methods are proxied:\n\n```js\n// direct access to gr8-util\nvar gr8util = require('gr8/util')\nvar css = gr8util({options})\n```\n\n```js\n// direct access to gr8-utils\nvar gr8utils = require('gr8/utils')\nvar css = gr8utils({options})\n\n// or even lower level\ngr8utils.generate(gr8utils.utils, gr8utils.defaults)\n```\n\n## Notes\n\n`gr8` is developed and iterated-on primarily for use within projects at [Folder Studio](http://folderstudio.com). It shares similarities with other functional css libraries like [tachyons](https://github.com/tachyons-css/tachyons) or [basscss](https://github.com/basscss/basscss), but diverges in its minimalism and customizability. `gr8` provides no colors, no borders, no font-families, etc out of the box, but instead provides ways to quickly define your own utilities for things like these using plain objects. It facilitates creating coherent design systems without imposing one by default.\n\nIn any case, I hope you like it and perhaps find it useful!\n\n## Todo\n\n- [ ] Advanced documentation\n- [ ] Website\n\n## See Also\n\n- [gr8-util](https://github.com/jongacnik/gr8-util)\n\n## License\n\n[MIT](https://github.com/jongacnik/gr8/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjongacnik%2Fgr8","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjongacnik%2Fgr8","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjongacnik%2Fgr8/lists"}