{"id":27341931,"url":"https://github.com/cyrildewit/perceptor","last_synced_at":"2026-04-28T01:32:57.479Z","repository":{"id":66347531,"uuid":"99824334","full_name":"cyrildewit/perceptor","owner":"cyrildewit","description":"My personal CSS boilerplate/framework written in Sass","archived":false,"fork":false,"pushed_at":"2018-12-23T10:32:56.000Z","size":36,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-13T07:07:41.353Z","etag":null,"topics":["boilerplate","css","framework","sass","sass-boilerplate","sass-setup","scss","scss-setup","setup"],"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/cyrildewit.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,"zenodo":null},"funding":{"github":"cyrildewit"}},"created_at":"2017-08-09T15:33:38.000Z","updated_at":"2018-12-23T10:32:58.000Z","dependencies_parsed_at":"2023-04-19T03:05:50.742Z","dependency_job_id":null,"html_url":"https://github.com/cyrildewit/perceptor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cyrildewit/perceptor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrildewit%2Fperceptor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrildewit%2Fperceptor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrildewit%2Fperceptor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrildewit%2Fperceptor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cyrildewit","download_url":"https://codeload.github.com/cyrildewit/perceptor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrildewit%2Fperceptor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32362781,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T20:07:02.737Z","status":"ssl_error","status_checked_at":"2026-04-27T20:07:00.910Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","framework","sass","sass-boilerplate","sass-setup","scss","scss-setup","setup"],"created_at":"2025-04-12T16:28:51.290Z","updated_at":"2026-04-28T01:32:57.471Z","avatar_url":"https://github.com/cyrildewit.png","language":"CSS","funding_links":["https://github.com/sponsors/cyrildewit"],"categories":[],"sub_categories":[],"readme":"# Perceptor\n\n\u003e Modern Sass starter kit that requires you to keep your CSS organized and clean.\n\n## Overview\n\nPerceptor is my personal SCSS boilerplate. It's the result of 4 years of finding the right structure that I can use for my personal projects.\n\nNeed an compiler? See [Perceptor Studio](https://github.com/cyrildewit/perceptor-studio)!\n\n### Features\n\n* Organized component structure\n* Bootstrap 4 grid included\n* Sanitize included\n* BEM helper mixins (element \u0026 modifier)\n\n**Note:** This project is currently under development. If you have any ideas or tips, please feel free to report that at the issue tracker.\n\n### Rules / Conventions\n\nSummary of: https://css-tricks.com/abem-useful-adaptation-bem/\n\n#### ABEM\n\n```text\n[a/m/o]-blockName__elementName -modifierName\n```\n\n#### camelCase\n\n```css\n/* classic + atomic prefix */\n.o-subscribe-form__field-item {}\n\n/* camelCase + atomic prefix */\n.o-subscribeForm__fieldItem {}\n```\n\n#### Seperated modifier\n\n```css\n/* classic */\n.block-name__element-name--green {\n  background: green;\n  color: white;\n}\n\n/* seperated modifier */\n.a-blockName__elementName.-green {\n  background: green;\n  color: white;\n}\n```\n\n#### Utilities\n\n```text\nu-utilityName\n```\n\n#### No Sass placeholders\n\nDon't use Sass placeholder! Instead use mixins.\n\nhttps://www.sitepoint.com/avoid-sass-extend/\n\n## Example SCSS structure\n\n```tree\n.\n├── 00_abstracts\n|   ├── mixins\n|       ├── _bem.scss\n|       ├── _clearfix.scss\n|       ├── _hover.scss\n|   ├── _functions.scss\n|   ├── _variables.scss\n├── 01_base\n|   ├── _fonts.scss\n|   ├── _generic.scss\n|   ├── _sanitize.scss\n├── 02_atoms\n|   ├── _button.scss\n|   ├── _card.scss\n|   ├── _panel.scss\n├── 03_molecules\n|   ├── _typography.scss\n|   ├── _lists.scss\n|   ├── _image.scss\n├── 04_organisms\n|   ├── _bootstrap-grid.scss\n|   ├── _site-header.scss\n|   ├── _section.scss\n|   ├── _site-footer.scss\n├── 05_templates\n|   ├── _home.scss\n|   ├── _week-action.scss\n├── 06_pages\n|   ├── _home.scss\n|   ├── _week-action.scss\n├── 07_utilities\n|   ├── _clearfix.scss\n├── 08_vendor\n|   ├── _clearfix.scss\n```\n\n### Organizing\n\n* `00_abstracts`\n    * Sass tools, helpers, global variables, functions, mixins.\n* `01_base`\n    * Boilerplate code; reset, global typographic rules, generic standard styles.\n* `02_atoms`\n* `03_molecules`\n* `04_organisms`\n* `05_templates`\n* `06_pages`\n* `07_utilities`\n* `08_vendor`\n\n## To do\n\nRead:\n\n- https://medium.com/codyhouse/create-your-design-system-part-2-grid-layout-aa961d59b8d6\n- https://medium.com/codyhouse/create-your-design-system-part-1-typography-7c630d9092bd\n- https://ether.thescenery.co/spacing/\n- http://thesassway.com/beginner/how-to-structure-a-sass-project\n- https://www.sitepoint.com/architecture-in-sass/\n- https://github.com/steveosoule/atomic-design-sass-outline/tree/master/stylesheets\n- https://blog.alexdevero.com/atomic-design-scalable-modular-css-sass/\n- https://webdesign.tutsplus.com/articles/structuring-sass-saying-goodbye-to-atomic-design-ambiguity--cms-26679\n- https://css-tricks.com/lets-define-exactly-atomic-css/\n- http://atomicdesign.bradfrost.com/chapter-2/\n- https://www.lullabot.com/articles/bem-atomic-design-a-css-architecture-worth-loving\n- https://css-tricks.com/abem-useful-adaptation-bem/\n- https://www.sitepoint.com/introducing-ccss-component-css/\n- https://www.sitepoint.com/introducing-ccss-component-css/\n- https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/\n\n## Credits\n\n* **Cyril de Wit** - _Initial work_ - [cyrildewit](https://github.com/cyrildewit)\n\nSee also the list of [contributors](https://github.com/cyrildewit/perceptor/graphs/contributors) who participated in this project.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyrildewit%2Fperceptor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcyrildewit%2Fperceptor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyrildewit%2Fperceptor/lists"}