{"id":17344891,"url":"https://github.com/harwinborger/itcss","last_synced_at":"2025-09-07T18:34:31.168Z","repository":{"id":81525584,"uuid":"190192483","full_name":"HarwinBorger/ITCSS","owner":"HarwinBorger","description":"An ITCSS boilerplate written in SASS/SCSS","archived":false,"fork":false,"pushed_at":"2019-06-04T12:41:18.000Z","size":5,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-01T15:11:28.570Z","etag":null,"topics":["boilerplate","css","itcss","methodology","sass","scss"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HarwinBorger.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2019-06-04T12:00:34.000Z","updated_at":"2019-06-04T13:06:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"2eb870fd-6b06-4ac4-8cb0-853b0200629b","html_url":"https://github.com/HarwinBorger/ITCSS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarwinBorger%2FITCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarwinBorger%2FITCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarwinBorger%2FITCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarwinBorger%2FITCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HarwinBorger","download_url":"https://codeload.github.com/HarwinBorger/ITCSS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245823317,"owners_count":20678173,"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":["boilerplate","css","itcss","methodology","sass","scss"],"created_at":"2024-10-15T16:27:40.549Z","updated_at":"2025-03-27T10:21:49.237Z","avatar_url":"https://github.com/HarwinBorger.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ITCSS BOILERPLATE \n\nThis is an ITCSS boilerplate which represents a map/file structure you can use to setup new ITCSS projects.\n\n## Features\n### Numeric (`1.settings/`)\nEach ITCSS folder has a numeric prefix so it shown in the right ITCSS order. This makes it easier to find files. \n\n### Double underscore files (`__settings.scss`)\nThe main file in each ITCSS folder contains a double underscore so it is always shown on top within the folder structure. From this main file you can import other SCSS files.\n\n## Folder structure\n\n1. **Settings** – used with preprocessors and contain font, colors definitions, etc.\n\n2. **Tools** – globally used mixins and functions. It’s important not to output any CSS in the first 2 layers.\n\n3. **Generic** – reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS.\n\n4. **Elements** – styling for bare HTML elements (like `H1`, `A`, etc.). These come with default styling from the browser so we can redefine them here.\n\n5. **Objects** – class-based selectors which define undecorated design patterns, for example media object known from **OOCSS**\n\n6. **Components** – specific UI components. This is where majority of our work takes place and our UI components are often composed of Objects and Components. **BEM** is a good methology to use here. \n\n7. **Utilities** – utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class. The utilities folder should be the only folder were `!important` may be used. \n \n\n## External resources\n- https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ \n- [Harry Roberts - Managing CSS Projects with ITCSS](https://www.youtube.com/watch?v=1OKZOV-iLj4)\n- https://en.bem.info/methodology/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharwinborger%2Fitcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharwinborger%2Fitcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharwinborger%2Fitcss/lists"}