{"id":18615592,"url":"https://github.com/hex-digital/inuitcss-hex","last_synced_at":"2026-03-19T05:22:51.828Z","repository":{"id":32578172,"uuid":"137210040","full_name":"hex-digital/inuitcss-hex","owner":"hex-digital","description":"An extension to inuitcss to cover the base Hex requirements","archived":false,"fork":false,"pushed_at":"2023-01-11T14:47:48.000Z","size":570,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-27T11:15:53.814Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","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/hex-digital.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-13T12:05:02.000Z","updated_at":"2020-10-01T10:14:39.000Z","dependencies_parsed_at":"2023-01-14T21:38:32.785Z","dependency_job_id":null,"html_url":"https://github.com/hex-digital/inuitcss-hex","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hex-digital%2Finuitcss-hex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hex-digital%2Finuitcss-hex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hex-digital%2Finuitcss-hex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hex-digital%2Finuitcss-hex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hex-digital","download_url":"https://codeload.github.com/hex-digital/inuitcss-hex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239406497,"owners_count":19633025,"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-11-07T03:30:42.018Z","updated_at":"2025-11-03T04:30:33.486Z","avatar_url":"https://github.com/hex-digital.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![inuitcss](http://inuitcss.com/img/logo-small.png)\n \n[![CircleCI](https://img.shields.io/circleci/project/hex-digital/inuitcss-hex/master.svg?maxAge=2592000?style=flat-square)](https://circleci.com/gh/hex-digital/inuitcss-hex)\n\nPlease note, this is an extension to the great framework \n[inuitcss repo](https://github.com/inuitcss/inuitcss) by Harry Roberts et al.\nIt is therefore a pre-requisite of this extension to add that first.\n\n**An extension to the extensible, scalable, Sass-based, OOCSS framework for \nlarge and long-lasting UI projects.**\n\ninuitcss is a framework in its truest sense: it does not provide you with UI and\ndesign out of the box, instead, it provides you with a solid architectural\nbaseline upon which to complete your own work.\n\nThis extension is a means of bringing partials that we commonly use into a\npackage that can then be used ontop of inuit.\n\nThe following README assumes you have already followed the inuitcss installation\nand setup guide in thee [inuitcss repo](https://github.com/inuitcss/inuitcss).\n\n## Installation\n\nYou can install inuitcss-hex in your project by using a package manager (we \nrecommend yarn):\n\n**yarn:**\n\n    yarn add inuitcss-hex --dev\n\n**npm:**\n\n    npm install inuitcss-hex --save-dev\n\n## Getting Started\n\nAssuming you have got inuitcss-hex into your project using one of the above\nmethods, you can now include the files you need in your existing main.scss file\nthat was setup for inuitcss.\n\nSimply link to it the same way you link to a core inuit file, and you're set!\n\n## CSS directory structure\n\ninuitcss follows a specific folder structure, which you should follow as well in your own CSS directory:\n\n* `/settings`: Global variables, site-wide settings, config switches, etc.\n* `/tools`: Site-wide mixins and functions.\n* `/generic`: Low-specificity, far-reaching rulesets (e.g. resets).\n* `/elements`: Unclassed HTML elements (e.g. `a {}`, `blockquote {}`, `address {}`).\n* `/objects`: Objects, abstractions, and design patterns (e.g. `.o-layout {}`).\n* `/components`: Discrete, complete chunks of UI (e.g. `.c-carousel {}`). This is the one layer that inuitcss doesn’t provide code for, as this is completely your terrain.\n* `/utilities`: High-specificity, very explicit selectors. Overrides and helper\n  classes (e.g. `.u-hidden {}`).\n\nFollowing this structure allows you to intersperse inuitcss’ code with your own,\nso that your `main.scss` file might look something like this:\n\n```scss\n// SETTINGS\n@import \"settings/settings.config\";\n@import \"node_modules/inuitcss/settings/settings.core\";\n@import \"node_modules/inuitcss-hex/settings/settings.global\";\n@import \"settings/settings.colors\";\netc...\n```\n\nInterlacing partials like this is one of the real strengths of inuitcss.\n\n## Extending inuitcss\n\nTo extend inuitcss with your own code, simply create a partial in the `\u003csection\u003e.\u003cfile\u003e` format, put it into the [appropriate directory](#css-directory-structure) and `@import` it in your `main.scss`.\n\nBut extending inuitcss does not only mean adding your own partials to the project. Due to inuitcss’ modular nature, you can also omit those partials of inuitcss you don't need. But be aware that there are a few interdependencies between various inuitcss partials. The only partial that is indispensable for the framework to work properly is `settings.core`, though. But we recommend using all partials from the `/settings`, `/tools` and `/generic` layer.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhex-digital%2Finuitcss-hex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhex-digital%2Finuitcss-hex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhex-digital%2Finuitcss-hex/lists"}