{"id":21506557,"url":"https://github.com/khomsiadam/sass-architecture","last_synced_at":"2025-10-10T22:04:01.077Z","repository":{"id":109418981,"uuid":"423970091","full_name":"KhomsiAdam/SASS-Architecture","owner":"KhomsiAdam","description":"SASS Architecture Template based on the 7-1 architecture to be used as a starter template for frontend project development. Contains various mixins, functions and pre-defined utility classes. All utility classes have a prefix of \"ss-\" to avoid conflicts.","archived":false,"fork":false,"pushed_at":"2021-11-23T13:26:14.000Z","size":1416,"stargazers_count":21,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-23T22:07:04.885Z","etag":null,"topics":["7-1architecture","bem","frontend","javascript","sass","scss"],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/KhomsiAdam.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-02T19:16:33.000Z","updated_at":"2025-04-11T10:34:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"fe5b9ab5-04d6-4a6c-89b1-93307620ec6b","html_url":"https://github.com/KhomsiAdam/SASS-Architecture","commit_stats":null,"previous_names":[],"tags_count":3,"template":true,"template_full_name":null,"purl":"pkg:github/KhomsiAdam/SASS-Architecture","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KhomsiAdam%2FSASS-Architecture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KhomsiAdam%2FSASS-Architecture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KhomsiAdam%2FSASS-Architecture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KhomsiAdam%2FSASS-Architecture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KhomsiAdam","download_url":"https://codeload.github.com/KhomsiAdam/SASS-Architecture/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KhomsiAdam%2FSASS-Architecture/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279005458,"owners_count":26083898,"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","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["7-1architecture","bem","frontend","javascript","sass","scss"],"created_at":"2024-11-23T19:41:58.589Z","updated_at":"2025-10-10T22:04:01.058Z","avatar_url":"https://github.com/KhomsiAdam.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SASS Architecture \u0026 Structure\n\nThis is a Template based on the 7-1 architecture and [Sass Guidelines](https://sass-guidelin.es) writing conventions.\n\nEach folder contains a `README.md` file for explanations and informations.\n\nFolders in the `scss/` folder have an `_index.scss` file that allows to load from a single entrypoint all modules if needed with the help of the `@forward` rule, using one single rule `@use 'folder_name' as *;` in our `main.scss` file. Be sure to browse the repository to see how it works.\n\n\n```\ncss/                            # Compiled CSS\nfonts/                          # Hosted fonts\nicons/                          # Icons (svg preferably)\nimages/                         # Image assets\njs/                             # JavaScript (scripts, libraries, modules etc…)\nscss/                           # SCSS folder\n|\n|– abstracts/\n|   |– _index.scss              # To import the whole folder if needed\n|   |– _functions.scss          # Functions\n|   |– _mixins.scss             # Mixins to include\n|   |– _placeholders.scss       # Placeholders to extend\n|   |– _variables.scss          # Variables, Maps\n|   ...                         # Etc…\n|\n|– base/\n|   |– _index.scss              # To import the whole folder if needed\n|   |– _font-face.scss          # @font-face rules (if you're hosting your fonts)\n|   |– _resets.scss             # Reset/normalize\n|   |– _typography.scss         # Typography rules (font-size in each breakpoint etc…)\n|   |– _Utilities.scss          # Utility classes\n|   ...                         # Etc…\n|\n|– components/\n|   |– _index.scss              # To import the whole folder if needed\n|   |– _breadcrumbs.scss        # Breadcrumbs\n|   |– _buttons.scss            # Buttons\n|   |– _cards.scss              # Cards\n|   |– _carousel.scss           # Carousel/Sliders\n|   |– _checkbox.scss           # Custom checkboxes\n|   |– _forms.scss              # Forms\n|   |– _radio.scss              # Custom radio buttons\n|   |– _select.scss             # Custom select inputs\n|   |– _tables.scss             # Tables\n|   ...                         # Etc…\n|\n|– layout/\n|   |– _index.scss              # To import the whole folder if needed\n|   |– _footer.scss             # Footer\n|   |– _header.scss             # Header\n|   |– _navigation.scss         # Navigation\n|   |– _sidebar.scss            # Sidebar\n|   ...                         # Etc…\n|\n|– pages/\n|   |– home.scss                # Homepage specific stylesheet\n|   ...                         # Etc…\n|\n`– main.scss                  # Main SCSS file to be compiled into CSS and linked accross all pages\n```\n\n# Requirements\n\nSince the importing of files is with the [`@use`](https://sass-lang.com/documentation/at-rules/use) and [`@forward`](https://sass-lang.com/documentation/at-rules/forward) rules, [Dart-Sass](https://sass-lang.com/dart-sass) is required, install with your preferred method: [Install Sass](https://sass-lang.com/install).\n\n# Methodology\n\nWhen writing your HTML and CSS or SASS/SCSS, it is a good practice to follow a certain methodology or class naming convention like the [BEM](http://getbem.com/) methodology. It's purpose is to make your front-end code easier to read, understand, scale and manage.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhomsiadam%2Fsass-architecture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkhomsiadam%2Fsass-architecture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhomsiadam%2Fsass-architecture/lists"}