{"id":13397305,"url":"https://github.com/inuitcss/inuitcss","last_synced_at":"2025-04-13T19:19:11.142Z","repository":{"id":38431940,"uuid":"61697384","full_name":"inuitcss/inuitcss","owner":"inuitcss","description":"Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.","archived":false,"fork":false,"pushed_at":"2023-03-01T10:15:22.000Z","size":617,"stargazers_count":1849,"open_issues_count":16,"forks_count":206,"subscribers_count":97,"default_branch":"develop","last_synced_at":"2024-05-15T13:09:15.882Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://inuitcss.com","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/inuitcss.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-22T07:14:33.000Z","updated_at":"2024-06-18T12:31:02.610Z","dependencies_parsed_at":"2024-06-18T12:30:53.613Z","dependency_job_id":"8e65f8ce-50d8-457c-b50e-ac78da6498cc","html_url":"https://github.com/inuitcss/inuitcss","commit_stats":{"total_commits":378,"total_committers":26,"mean_commits":"14.538461538461538","dds":0.6481481481481481,"last_synced_commit":"eae55ee6e4219f0342a9789c8c7ebddaf84f00ea"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inuitcss%2Finuitcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inuitcss%2Finuitcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inuitcss%2Finuitcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inuitcss%2Finuitcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inuitcss","download_url":"https://codeload.github.com/inuitcss/inuitcss/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248766686,"owners_count":21158302,"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-07-30T18:01:16.433Z","updated_at":"2025-04-13T19:19:11.119Z","avatar_url":"https://github.com/inuitcss.png","language":"SCSS","readme":"# ![inuitcss](http://inuitcss.com/img/logo-small.png)\n\n[![CircleCI](https://circleci.com/gh/inuitcss/inuitcss/tree/master.svg?style=shield)](https://circleci.com/gh/inuitcss/inuitcss.nl/tree/master)\n\n**Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting\nUI 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\n## Installation\n\nYou can use inuitcss in your project by installing it using a package manager\n(recommended):\n\n**npm:**\n\n```\n$ npm install inuitcss --save\n```\n\n**yarn:**\n\n```\n$ yarn add inuitcss\n```\n\n**Bower:**\n\n```\n$ bower install inuitcss --save\n```\n\n**Copy/paste (not recommended):**\n\nYou can download inuitcss and save it into your project’s `css/` directory. This\nmethod is not recommended because you lose the ability to easily and quickly\nmanage and update inuitcss as a dependency.\n\n## Getting Started\n\nOnce you have got inuitcss into your project using one of the methods outlined\nabove, there are a handful of things we need to do before we’re ready to go.\n\nFirstly, we need to identify any files whose name contain the word `example`.\nThese files are demo and/or scaffolding files that inuitcss requires, but that\nyou are encouraged to create and define yourself. These files, as of v6.0.0,\nare:\n\n```\nexample.main.scss\nsettings/_example.settings.config.scss\nsettings/_example.settings.global.scss\ncomponents/_example.components.buttons.scss\n```\n\nHere’s what we need to do with them:\n\n### [`example.main.scss`](https://github.com/inuitcss/inuitcss/blob/master/example.main.scss)\n\nThis is your main, or _manifest_, file. This is the backbone of any inuitcss\nproject, and it is responsible for `@import`ing all other files. This is the\nfile that we compile out into a corresponding CSS file.\n\nYou need to copy this file from the directory that your package manager\ninstalled it into, and move it to the root of your `css/` directory. Once there,\nrename it `main.scss`.\n\nNext, you’ll need to update all of the `@import`s in that file to point at the\nnew locations of each partial (that will depend on how your project is set up).\n\nOnce you’ve done this, you should be able to run the following command on that\nfile and get a compiled stylesheet without any errors:\n\n```\npath/to/css/$ sass main.scss:main.css\n```\n\n**N.B.** If you downloaded inuitcss, you do not need to move this file; you\ncan simply rename it.\n\n### [`_example.settings.config.scss`](https://github.com/inuitcss/inuitcss/blob/master/settings/_example.settings.config.scss)\n\nThis is a configuration file that inuitcss uses to handle the state, location,\nor environment of your project. This handles very high-level settings that don’t\nnecessarily affect the CSS itself, but can be used to manipulate things\ndepending on where you are running things (e.g. turning a debugging mode on, or\ntelling your CI sever that you’re compiling for production).\n\nCopy this file into your own `css/settings/` directory and rename it\n`_settings.config.scss`.\n\n**N.B.** If you downloaded inuitcss, you do not need to move this this file; you\ncan simply rename it.\n\n### [`_example.settings.global.scss`](https://github.com/inuitcss/inuitcss/blob/master/settings/_example.settings.global.scss)\n\nThis is an example globals file; it contains any settings that are available to\nyour entire project. These variables and settings could be font families,\ncolours, border-radius values, etc.\n\nCopy this file into your own `css/settings/` directory and rename it\n`_settings.global.scss`. Now you can begin adding your own project-wide\nsettings.\n\n### [`_example.components.buttons.scss`](https://github.com/inuitcss/inuitcss/blob/master/components/_example.components.buttons.scss)\n\nYou don’t need to really do much with this file other than ensure you don’t let\nit into your final project!\n\nThis file exists to show you how you might build components into an inuitcss\nproject, because components are the one thing that inuitcss purposefully refuses\nto provide.\n\nYou can, if you wish, copy this file to your own `css/components/` directory and\nrename it `_components.buttons.scss`. You can now use this file as the basis for\nyour own buttons component.\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, so 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 \"settings/settings.global\";\n@import \"settings/settings.colors\";\n\n// TOOLS\n@import \"node_modules/inuitcss/tools/tools.font-size\";\n@import \"node_modules/inuitcss/tools/tools.clearfix\";\n@import \"node_modules/sass-mq/mq\";\n@import \"tools/tools.aliases\";\n\n// GENERIC\n@import \"node_modules/inuitcss/generic/generic.box-sizing\";\n@import \"node_modules/inuitcss/generic/generic.normalize\";\n@import \"node_modules/inuitcss/generic/generic.shared\";\n\n// ELEMENTS\n@import \"node_modules/inuitcss/elements/elements.page\";\n@import \"node_modules/inuitcss/elements/elements.headings\";\n@import \"elements/elements.links\";\n@import \"elements/elements.quotes\";\n\n// OBJECTS\n@import \"node_modules/inuitcss/objects/objects.layout\";\n@import \"node_modules/inuitcss/objects/objects.media\";\n@import \"node_modules/inuitcss/objects/objects.flag\";\n@import \"node_modules/inuitcss/objects/objects.list-bare\";\n@import \"node_modules/inuitcss/objects/objects.list-inline\";\n@import \"node_modules/inuitcss/objects/objects.box\";\n@import \"node_modules/inuitcss/objects/objects.block\";\n@import \"node_modules/inuitcss/objects/objects.table\";\n\n// COMPONENTS\n@import \"components/components.buttons\";\n@import \"components/components.page-head\";\n@import \"components/components.page-foot\";\n@import \"components/components.site-nav\";\n@import \"components/components.ads\";\n@import \"components/components.promo\";\n\n// UTILITIES\n@import \"node_modules/inuitcss/utilities/utilities.widths\";\n@import \"node_modules/inuitcss/utilities/utilities.headings\";\n@import \"node_modules/inuitcss/utilities/utilities.spacings\";\n```\n\n**NOTE:** Every `@import` above which begins with \"node_modules\" is inuitcss core. When you installed inuitcss via bower, these imports would begin with \"bower_components\".\n\nHaving your own and inuitcss’ partials interlaced like this is one of the real strengths of inuitcss.\n\n## Core functionality\n\nBefore inuitcss can do anything, it needs to know your base `font-size` and `line-height`. These settings are stored in `settings.core` (as `$inuit-global-font-size` and `$inuit-global-line-height`), and can be overridden in the same way you’d [override any of inuitcss’ config](#modifying-inuitcss).\n\nProbably the most opinionated thing inuitcss will ever do is reassign your `$inuit-global-line-height` variable to `$inuit-global-spacing-unit`. This value then becomes the cornerstone of your UI, acting as the default margin and padding value for any components that require it.\n\nWhile this might seem overly opinionated, it does mean that:\n\n1. **You get a free vertical rhythm** because everything sits on a multiple of your baseline, and…\n2. **We reduce the amount of [magic numbers](http://csswizardry.com/2012/11/code-smells-in-css/#magic-numbers) in our codebase** because we can rationalise where the majority of values in our CSS came from.\n\n## Modifying inuitcss\n\ninuitcss is highly configurable, but **should not be edited directly**. The correct way to make changes to inuitcss is to pass in variables **before** you `@import` the specific file. Let’s take [`settings.core`](https://github.com/inuitcss/inuitcss/blob/develop/settings/_settings.core.scss) as an example—in this file we can see the variables `$inuit-global-font-size` and `$inuit-global-line-height`. If we want to keep these as-is then we needn’t do anything other than `@import` the file. If we wanted to change these values to `12px` and `18px` respectively (don’t worry, inuitcss will convert these pixel values to rems for you) then we just need to pass those values in before the `@import`, thus:\n\n```scss\n$inuit-global-font-size:   12px;\n$inuit-global-line-height: 18px;\n@import \"node_modules/inuitcss/settings/settings.core\";\n```\n\nThe same goes for any inuitcss module: you can configure it by predefining any\nof its variables immediately before the `@import`:\n\n```scss\n$inuit-wrapper-width: 1480px;\n@import \"node_modules/inuitcss/objects/objects.wrapper\";\n\n$inuit-fractions: 1 2 3 4 12;\n@import \"node_modules/inuitcss/utilities/utilities.widths\";\n```\n\nThis method of modifying the framework means that you don’t need to edit any\nfiles directly (thus making it easier to update the framework), but also means\nthat you’re not left with huge, bloated, monolithic variables files from which\nyou need to configure an entire library.\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\n### Aliases\n\nIn order to avoid clashes with your own code, all of inuitcss’ mixins and\nvariables are namespaced with `inuit-`, for example: `$inuit-global-spacing-unit`.\nThese variables and mixins can become very tedious and time consuming to type\nover and over, so it is recommended that you alias them to something a little\nshorter. You can do this by creating a `tools.aliases` file\n(`tools/_tools.aliases.scss`) which would be populated with code like this:\n\n```scss\n// Reassign `$inuit-global-spacing-unit` to `$unit`.\n$unit: $inuit-global-spacing-unit;\n\n// Reassign lengthy font-size mixin to `font-size()`.\n@mixin font-size($args...) {\n  @include inuit-font-size($args...);\n}\n```\n\nYou can now use your own aliases onto inuitcss’ defaults throughout your\nproject.\n\n### Components\n\ninuitcss is a design-free, OOCSS framework—it does its best to provide zero\ncosmetic styling. This means that inuitcss can be used on any and all types of\nproject (and it has been) without dictating (or even suggesting) a\nlook-and-feel. If you do require a UI out of the box, then inuitcss is probably\nnot the best tool for you. I’d recommend looking at a UI Toolkit such as\n[Bootstrap](http://getbootstrap.com/).\n\nBecause inuitcss does no cosmetic styling, it is up to you to author the\nComponents layer. Components are small partials that contain discrete chunks of\nUI that utilise the layers that came before it, for example, a carousel, or a\ndropdown nav, or an image gallery, and so on.\n\n## Namespaces\n\nYou may have stumbled upon the “odd” way inuitcss’ classes are prefixed. There are three different namespaces directly relevant to inuitcss:\n\n* `.o-`: Objects\n* `.c-`: Components\n* `.u-`: Utilities\n\nIn short: Every class in either of these three directories gets the appropriate prefix in its classname. All of inuitcss’ classes in one of these three layers has this kind of prefix. Be sure to follow this convention in your own code as well to keep a consistent naming convention across your code base.\n\nIf you want to dive deeper into namespacing classes and want to know why this is a great idea, have a look at [this article](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/).\n\n## Responsive\n\ninuitcss is built with as much extensibility as possible in mind. Adding full responsive functionality for every kind of module would pretty much kill the intended generic concept behind the framework.\n\nThe one opinionated decision we made was adding [Sass-MQ](https://github.com/sass-mq/sass-mq) as a dependency, to provide at least a full working responsive grid off-the-shelf. So if you need media-query support in your own Sass code, have a look at the [Sass-MQ documentation on how to use it](https://github.com/sass-mq/sass-mq#how-to-use-it) properly.\n\n**NOTE: If you've installed inuitcss neither with npm nor with bower, make sure that Sass-MQ is properly imported in your `main.scss` in the tools layer.**\n\nIf you want to use another media-query library like [@include-media](http://include-media.com/) or [sass-mediaqueries](https://github.com/paranoida/sass-mediaqueries), feel free to do so. But in this case you have to manage your [responsive widths classes](https://github.com/inuitcss/inuitcss/blob/develop/utilities/_utilities.widths.scss) yourself.\n\n## Providing plugins for inuitcss\n\nSince inuitcss just provides very generic modules, there are probably modules you will write anew in every project. Although these modules might seem generic enough to you to be integrated into the core framework, we probably will consider it as not generic enough ([we'd appreciate every idea](https://github.com/inuitcss/inuitcss/blob/develop/CONTRIBUTING.md), though!).\nBut just because we are not willing to include a module you consider being useful, does not mean other inuitcss users shall not benefit from such an useful module. Due to inuitcss’ modular architecture, it's totally possible and we even welcome it, that these modules are published as kind of inuitcss plugins by you in a separate repository.\n\nWe'd love to see that the framework gets extended through the contribution of you and your plugins!\n\n## Prerequisites\n\nMake sure you have at least Sass v3.3 installed.\n","funding_links":[],"categories":["CSS","Code Examples","SCSS","Frameworks / Resources","Stalled Development"],"sub_categories":["I"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finuitcss%2Finuitcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finuitcss%2Finuitcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finuitcss%2Finuitcss/lists"}