{"id":15965582,"url":"https://github.com/jamiemason/csslib","last_synced_at":"2025-07-06T00:37:14.635Z","repository":{"id":57210966,"uuid":"51698540","full_name":"JamieMason/csslib","owner":"JamieMason","description":"A customised fork of inuitcss which I use on most projects.","archived":false,"fork":false,"pushed_at":"2016-02-17T11:10:58.000Z","size":35,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-07T06:18:22.689Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","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/JamieMason.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":"2016-02-14T14:48:48.000Z","updated_at":"2018-09-22T12:29:13.000Z","dependencies_parsed_at":"2022-09-01T08:21:39.673Z","dependency_job_id":null,"html_url":"https://github.com/JamieMason/csslib","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/JamieMason/csslib","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JamieMason%2Fcsslib","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JamieMason%2Fcsslib/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JamieMason%2Fcsslib/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JamieMason%2Fcsslib/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JamieMason","download_url":"https://codeload.github.com/JamieMason/csslib/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JamieMason%2Fcsslib/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263832484,"owners_count":23517350,"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-10-07T17:42:22.722Z","updated_at":"2025-07-06T00:37:14.607Z","avatar_url":"https://github.com/JamieMason.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSSlib\n\n\u003e A customised fork of [inuitcss](https://github.com/inuitcss) which I use on most projects.\n\n## Contents\n\n- [Breakpoints](#breakpoints)\n- [Responsive Widths](#responsive-widths)\n- [Variables](#variables)\n    - [Settings](#settings)\n    - [Generic ](#generic)\n    - [Base](#base)\n    - [Block Object](#block-object)\n    - [Box Object](#box-object)\n    - [Button Component](#button-component)\n    - [Flag Object](#flag-object)\n    - [Layout Object](#layout-object)\n    - [Bare List Object](#bare-list-object)\n    - [Block List Object](#block-list-object)\n    - [Inline List Object](#inline-list-object)\n    - [UI List Object (Drawers)](#ui-list-object-drawers)\n    - [Media Object](#media-object)\n    - [Pack Object](#pack-object)\n    - [Table Object](#table-object)\n    - [Tabs Object](#tabs-object)\n    - [Spacing Trump](#spacing-trump)\n    - [Responsive Spacing Trump](#responsive-spacing-trump)\n\n## Breakpoints\n\n| Name | Dimensions |\n| ------- | ------- |\n| palm | `screen and (max-width: 44.9375em)` |\n| lap | `screen and (min-width: 45em) and (max-width: 63.9375em)` |\n| lap-and-up | `screen and (min-width: 45em)` |\n| portable | `screen and (max-width: 63.9375em)` |\n| desk | `screen and (min-width: 64em)` |\n| retina | `(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)` |\n\n## Responsive Widths\n\n```css\n.inuit-palm-one-half\n.inuit-lap-two-quarters\n.inuit-lap-and-up-three-sixths\n.inuit-portable-four-eighths\n.inuit-desk-five-tenths\n.inuit-retina-six-twelfths\n```\n\n## Variables\n\n### Settings\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-base-background-color | #fff |\n| $inuit-base-font-size | 16px |\n| $inuit-base-line-height | 24px |\n| $inuit-base-text-color | #333 |\n| $inuit-global-border-box | false |\n| $inuit-namespace | null |\n\n### Generic \n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-global-border-box | false |\n| $inuit-use-fractions | true |\n| $inuit-widths-namespace | $inuit-namespace |\n| $z-indexes | foo, bar, baz |\n\n### Base\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-heading-size-1 | 36px |\n| $inuit-heading-size-2 | 30px |\n| $inuit-heading-size-3 | 24px |\n| $inuit-heading-size-4 | 20px |\n| $inuit-heading-size-5 | 16px |\n| $inuit-heading-size-6 | 14px |\n| $inuit-lede-size | 1.125 |\n\n### Block Object\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-block-gutter | $inuit-base-spacing-unit |\n| $inuit-block-gutter--huge | quadruple($inuit-block-gutter) |\n| $inuit-block-gutter--large | double($inuit-block-gutter) |\n| $inuit-block-gutter--small | halve($inuit-block-gutter) |\n| $inuit-block-gutter--tiny | quarter($inuit-block-gutter) |\n| $inuit-block-namespace | $inuit-namespace |\n| $inuit-enable-block--center | false |\n| $inuit-enable-block--flush | false |\n| $inuit-enable-block--huge | false |\n| $inuit-enable-block--large | false |\n| $inuit-enable-block--right | false |\n| $inuit-enable-block--small | false |\n| $inuit-enable-block--tiny | false |\n\n### Box Object\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-box-namespace | $inuit-namespace |\n| $inuit-box-padding | $inuit-base-spacing-unit |\n| $inuit-box-padding--huge | quadruple($inuit-box-padding) |\n| $inuit-box-padding--large | double($inuit-box-padding) |\n| $inuit-box-padding--small | halve($inuit-box-padding) |\n| $inuit-box-padding--tiny | quarter($inuit-box-padding) |\n| $inuit-enable-box--flush | false |\n| $inuit-enable-box--huge | false |\n| $inuit-enable-box--large | false |\n| $inuit-enable-box--small | false |\n| $inuit-enable-box--tiny | false |\n\n### Button Component\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-btn-background | #4a8ec2 |\n| $inuit-btn-border-color | $inuit-btn-background |\n| $inuit-btn-border-style | solid |\n| $inuit-btn-border-width | 1px |\n| $inuit-btn-color | #fff |\n| $inuit-btn-namespace | $inuit-namespace |\n| $inuit-btn-padding | halve($inuit-base-spacing-unit) |\n| $inuit-btn-padding--large | double($inuit-btn-padding) |\n| $inuit-btn-padding--small | halve($inuit-btn-padding) |\n| $inuit-btn-radius | 0 |\n| $inuit-enable-btn--full | false |\n| $inuit-enable-btn--large | false |\n| $inuit-enable-btn--pill | false |\n| $inuit-enable-btn--small | false |\n\n### Flag Object\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-enable-flag--bottom | false |\n| $inuit-enable-flag--flush | false |\n| $inuit-enable-flag--huge | false |\n| $inuit-enable-flag--large | false |\n| $inuit-enable-flag--responsive | false |\n| $inuit-enable-flag--rev | false |\n| $inuit-enable-flag--small | false |\n| $inuit-enable-flag--tiny | false |\n| $inuit-enable-flag--top | false |\n| $inuit-flag-collapse-at | 720px |\n| $inuit-flag-gutter | $inuit-base-spacing-unit |\n| $inuit-flag-gutter--huge | quadruple($inuit-flag-gutter) |\n| $inuit-flag-gutter--large | double($inuit-flag-gutter) |\n| $inuit-flag-gutter--small | halve($inuit-flag-gutter) |\n| $inuit-flag-gutter--tiny | quarter($inuit-flag-gutter) |\n| $inuit-flag-namespace | $inuit-namespace |\n\n### Layout Object\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-enable-layout--auto | false |\n| $inuit-enable-layout--bottom | false |\n| $inuit-enable-layout--center | false |\n| $inuit-enable-layout--flush | false |\n| $inuit-enable-layout--huge | false |\n| $inuit-enable-layout--large | false |\n| $inuit-enable-layout--middle | false |\n| $inuit-enable-layout--rev | false |\n| $inuit-enable-layout--right | false |\n| $inuit-enable-layout--small | false |\n| $inuit-enable-layout--tiny | false |\n| $inuit-layout-gutter | $inuit-base-spacing-unit |\n| $inuit-layout-gutter--huge | quadruple($inuit-layout-gutter) |\n| $inuit-layout-gutter--large | double($inuit-layout-gutter) |\n| $inuit-layout-gutter--small | halve($inuit-layout-gutter) |\n| $inuit-layout-gutter--tiny | quarter($inuit-layout-gutter) |\n| $inuit-layout-namespace | $inuit-namespace |\n\n### Bare List Object\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-list-bare-namespace | $inuit-namespace |\n\n### Block List Object\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-enable-list-block--huge | false |\n| $inuit-enable-list-block--large | false |\n| $inuit-enable-list-block--small | false |\n| $inuit-enable-list-block--tiny | false |\n| $inuit-list-block-namespace | $inuit-namespace |\n| $inuit-list-block-padding | $inuit-base-spacing-unit |\n| $inuit-list-block-padding--huge | quadruple($inuit-list-block-padding) |\n| $inuit-list-block-padding--large | double($inuit-list-block-padding) |\n| $inuit-list-block-padding--small | halve($inuit-list-block-padding) |\n| $inuit-list-block-padding--tiny | quarter($inuit-list-block-padding) |\n\n### Inline List Object\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-enable-list-inline--delimited | false |\n| $inuit-list-inline-delimit-character | \",\\00A0\" |\n| $inuit-list-inline-namespace | $inuit-namespace |\n\n### UI List Object (Drawers)\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-enable-list-ui--huge | false |\n| $inuit-enable-list-ui--large | false |\n| $inuit-enable-list-ui--small | false |\n| $inuit-enable-list-ui--tiny | false |\n| $inuit-list-ui-border-color | #ccc |\n| $inuit-list-ui-border-style | solid |\n| $inuit-list-ui-border-width | 1px |\n| $inuit-list-ui-namespace | $inuit-namespace |\n| $inuit-list-ui-padding | $inuit-base-spacing-unit |\n| $inuit-list-ui-padding--huge | quadruple($inuit-list-ui-padding) |\n| $inuit-list-ui-padding--large | double($inuit-list-ui-padding) |\n| $inuit-list-ui-padding--small | halve($inuit-list-ui-padding) |\n| $inuit-list-ui-padding--tiny | quarter($inuit-list-ui-padding) |\n\n### Media Object\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-enable-media--flush | false |\n| $inuit-enable-media--huge | false |\n| $inuit-enable-media--large | false |\n| $inuit-enable-media--responsive | false |\n| $inuit-enable-media--rev | false |\n| $inuit-enable-media--small | false |\n| $inuit-enable-media--tiny | false |\n| $inuit-media-collapse-at | 720px |\n| $inuit-media-gutter | $inuit-base-spacing-unit |\n| $inuit-media-gutter--huge | quadruple($inuit-media-gutter) |\n| $inuit-media-gutter--large | double($inuit-media-gutter) |\n| $inuit-media-gutter--small | halve($inuit-media-gutter) |\n| $inuit-media-gutter--tiny | quarter($inuit-media-gutter) |\n| $inuit-media-namespace | $inuit-namespace |\n\n### Pack Object\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-enable-pack--auto | false |\n| $inuit-enable-pack--bottom | false |\n| $inuit-enable-pack--huge | false |\n| $inuit-enable-pack--large | false |\n| $inuit-enable-pack--middle | false |\n| $inuit-enable-pack--rev | false |\n| $inuit-enable-pack--small | false |\n| $inuit-enable-pack--tiny | false |\n| $inuit-pack-gutter | $inuit-base-spacing-unit |\n| $inuit-pack-gutter--huge | quadruple($inuit-pack-gutter) |\n| $inuit-pack-gutter--large | double($inuit-pack-gutter) |\n| $inuit-pack-gutter--small | halve($inuit-pack-gutter) |\n| $inuit-pack-gutter--tiny | quarter($inuit-pack-gutter) |\n| $inuit-pack-namespace | $inuit-namespace |\n\n### Table Object\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-enable-table--cells | false |\n| $inuit-enable-table--columns | false |\n| $inuit-enable-table--comfy | false |\n| $inuit-enable-table--compact | false |\n| $inuit-enable-table--cosy | false |\n| $inuit-enable-table--fixed | false |\n| $inuit-enable-table--rows | false |\n| $inuit-table-border-color | #ccc |\n| $inuit-table-border-style | solid |\n| $inuit-table-border-width | 1px |\n| $inuit-table-namespace | $inuit-namespace |\n| $inuit-table-padding--comfy | $inuit-base-spacing-unit |\n| $inuit-table-padding--compact | quarter($inuit-base-spacing-unit) |\n| $inuit-table-padding--cosy | halve($inuit-base-spacing-unit) |\n\n### Tabs Object\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-tabs-namespace | $inuit-namespace |\n\n### Spacing Trump\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-enable-margins | false |\n| $inuit-enable-margins--huge | false |\n| $inuit-enable-margins--large | false |\n| $inuit-enable-margins--negative | false |\n| $inuit-enable-margins--negative-huge | false |\n| $inuit-enable-margins--negative-large | false |\n| $inuit-enable-margins--negative-small | false |\n| $inuit-enable-margins--negative-tiny | false |\n| $inuit-enable-margins--none | false |\n| $inuit-enable-margins--small | false |\n| $inuit-enable-margins--tiny | false |\n| $inuit-enable-paddings | false |\n| $inuit-enable-paddings--huge | false |\n| $inuit-enable-paddings--large | false |\n| $inuit-enable-paddings--none | false |\n| $inuit-enable-paddings--small | false |\n| $inuit-enable-paddings--tiny | false |\n| $inuit-margin | $inuit-base-spacing-unit |\n| $inuit-margin--huge | quadruple($inuit-margin) |\n| $inuit-margin--large | double($inuit-margin) |\n| $inuit-margin--small | halve($inuit-margin) |\n| $inuit-margin--tiny | quarter($inuit-margin) |\n| $inuit-padding | $inuit-base-spacing-unit |\n| $inuit-padding--huge | quadruple($inuit-padding) |\n| $inuit-padding--large | double($inuit-padding) |\n| $inuit-padding--small | halve($inuit-padding) |\n| $inuit-padding--tiny | quarter($inuit-padding) |\n| $inuit-spacing-namespace | $inuit-namespace |\n\n### Responsive Spacing Trump\n\n| Setting | Default |\n| ------- | ------- |\n| $inuit-enable-responsive-margins | false |\n| $inuit-enable-responsive-margins--huge | false |\n| $inuit-enable-responsive-margins--large | false |\n| $inuit-enable-responsive-margins--negative | false |\n| $inuit-enable-responsive-margins--negative-huge | false |\n| $inuit-enable-responsive-margins--negative-large | false |\n| $inuit-enable-responsive-margins--negative-small | false |\n| $inuit-enable-responsive-margins--negative-tiny | false |\n| $inuit-enable-responsive-margins--none | false |\n| $inuit-enable-responsive-margins--small | false |\n| $inuit-enable-responsive-margins--tiny | false |\n| $inuit-enable-responsive-paddings | false |\n| $inuit-enable-responsive-paddings--huge | false |\n| $inuit-enable-responsive-paddings--large | false |\n| $inuit-enable-responsive-paddings--none | false |\n| $inuit-enable-responsive-paddings--small | false |\n| $inuit-enable-responsive-paddings--tiny | false |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamiemason%2Fcsslib","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamiemason%2Fcsslib","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamiemason%2Fcsslib/lists"}