{"id":17005357,"url":"https://github.com/cbedroid/smacss-it","last_synced_at":"2026-04-12T14:55:27.695Z","repository":{"id":101937729,"uuid":"279574789","full_name":"cbedroid/smacss-it","owner":"cbedroid","description":"Build SMACSS folders and files structure template for Sass/Scss/Css ","archived":false,"fork":false,"pushed_at":"2020-08-18T00:06:00.000Z","size":15,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-27T10:29:01.489Z","etag":null,"topics":["boilerplate","boilerplate-template","css","django","flask","html","javascript","jquery","python","sass","scss","smacss","smacss-sass","snippets"],"latest_commit_sha":null,"homepage":"","language":"Python","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/cbedroid.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":"2020-07-14T12:08:51.000Z","updated_at":"2023-03-09T01:47:01.000Z","dependencies_parsed_at":"2023-03-13T15:24:59.425Z","dependency_job_id":null,"html_url":"https://github.com/cbedroid/smacss-it","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/cbedroid%2Fsmacss-it","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbedroid%2Fsmacss-it/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbedroid%2Fsmacss-it/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbedroid%2Fsmacss-it/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cbedroid","download_url":"https://codeload.github.com/cbedroid/smacss-it/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244945594,"owners_count":20536295,"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","boilerplate-template","css","django","flask","html","javascript","jquery","python","sass","scss","smacss","smacss-sass","snippets"],"created_at":"2024-10-14T04:46:07.903Z","updated_at":"2025-10-20T05:17:16.840Z","avatar_url":"https://github.com/cbedroid.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SMACSS_IT\n\nCmdline tool that creates Sass/Scss folders and files structure for SMACSS.\n\nThis tool is great for adding order, structure and cleanliness to your web project.\nIf you are using HTML \u0026 CSS inside of your project. Installing and creating boiler plates over \u003cspan\u003e\u003cimg src=\"https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/72/facebook/230/man-gesturing-ok-type-4_1f646-1f3fd-200d-2642-fe0f.png\" alt=\"smile\" height=\"40\" width=\"40\"/\u003e and over ...\u003cimg src=\"https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/72/facebook/230/man-pouting-type-4_1f64e-1f3fd-200d-2642-fe0f.png\" alt=\"\" height=\"45\" width=\"45\"\u003e and over...\u003cimg src=\"https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/72/facebook/230/man-frowning-type-4_1f64d-1f3fd-200d-2642-fe0f.png\" alt= \":confused:\" height=\"45\" width=\"45\"\u003eand over again makes me \u003cimg src=\"https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/72/facebook/230/man-facepalming-type-4_1f926-1f3fd-200d-2642-fe0f.png\" alt=\"anger\" height=\"45\" width=\"45\"/\u003e ! **\u003cspan\u003e\u003ch3\u003eDont't Get Mad \u003cimg src=\"https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/72/facebook/230/man-gesturing-not-ok-type-4_1f645-1f3fd-200d-2642-fe0f.png\" alt=\"no more\" height=\"45\" width=\"45\"/\u003e... Just Smacss It !!!** \u003c/span\u003e\n\n# WHAT IS SMACSS?\n\n\u003ccenter\u003e\u003ca href=\"http://smacss.com/\"\u003e\u003cimg src=\"http://smacss.com/img/book-covers.png\" alt=\"Smaccs_Image\" width=50% height=300/\u003e\u003c/a\u003e\u003c/center\u003e\n\n### \u003ccenter\u003e Scalable and Modularclass Architecture for CSS\u003c/center\u003e\n\n\u003cp\u003eSMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. There is no git repository for you to clone. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. And really, who isn’t building a site with CSS these days?!\u003c/p\u003e\n\n- \u003cfont size=\"2\"\u003e **For more information about SMACSS:** \u0026nbsp; \u0026nbsp; [SMACSS Documentation](http://smacss.com/)\n  \u003c/font\u003e\n\n## Requirements\n\n- Requires **`python`** - python 3.5\u003e= greater.\n\n## Getting Started\n\n- Open linux terminal.\n\n- Clone this repo using **`sudo git clone https://github.com/cbderoid/smacss_it.git`**\n\n  ```bash\n  sudo git clone https://github.com/cbderoid/smacss_it.git\n  ```\n\n- Navigate to repo folder by typing **\u003cspan\u003e`cd \"path-to-this-repo-folder\"`\u003c/span\u003e**\n\n  ```bash\n  cd \"path-to-this-repo-folder\"\n  ```\n\n- Move **`smacssit`** file to **`/usr/bin`** by typing **`sudo mv smacssit /usr/bin/`**\n\n  ```bash\n  sudo mv smacssit /usr/bin/\n  ```\n\n- Make sure file is executable through system - **`sudo chmod +x /usr/bin/smacssit`**\n\n  ```bash\n  sudo chmod +x /usr/bin/smacssit\n  ```\n\n## How To Use SmacssIt\n\n#### Now that smacssit is installed , Lets go over how to use it! :+1:\n\nRight out the box, smacssit is configured to created the basic folders and filesystem.\n\nFollowing SMACSS Guide Rules , SmacssIt will create the following folders and files.\n\n\u003cpre\u003e\n\n\u003c/pre\u003e\n\nTo run **`smacssit`**, first cd to your project SASS's directory. **\u003cspan\u003e`cd \"your-project-sass-folder\"`\u003c/span\u003e**\n\n```bash\ncd \"path-to-your-project-sass-folder\"\n```\n\nLastly, Let's create the SMACSS folder structure, now type **`sudo smacssit`**\n\n```bash\nsudo smacssit\n```\n\n```bash\nusage: makesmacss [-h] [-l] [-m MODULAR [MODULAR ...]] [-s]\n                  [-e EXCLUDE [EXCLUDE ...]]\n\n        *********************************************************\n        *             SMACSS BOILER PLATE                       *\n        *                                                       *\n        *      Create SASS/SCSS files and folders               *\n        *-------------------------------------------------------*\n        *                                                       *\n        * A flexible guide to developing sites small and large. *\n        *          Documentations:                              *\n        *         ------------------                            *\n        *     SMACSS: https://smacss.com                        *\n        *     SASS:   https://sass-guidelin.es                  *\n        *                                                       *\n        *********************************************************\n\noptional arguments:\n  -h, --help            show this help message and exit\n  -l, --list            list all smacss dirs\n  -m MODULAR [MODULAR ...], --modular MODULAR [MODULAR ...]\n                         Add additional smacss modulars.\n\t\t\t\t\t      * Modulars can be place in a specific order by\n\t\t\t\t\t         adding a number followed by a dash (-).\n                          * Example:\n\t                         [number]-[name_of_modular] --\u003e 6-icons\n  -s, --scss            Use scss format ( default: .sass)\n  -e EXCLUDE [EXCLUDE ...], --exclude EXCLUDE [EXCLUDE ...]\n                        excludes creating a smacss dir folder\n```\n\n\u003cpre\u003e\n\n\u003c/pre\u003e\n\n#### Congratulations.. The finally results should now look similiar to this structure ...\n\n```bash\n├── 0-plugins\n│   ├── _plugin.sass\n│   └── _plugins-dir.sass\n├── 1-bases\n│   ├── _base.sass\n│   └── _bases-dir.sass\n├── 2-layouts\n│   ├── _layout.sass\n│   └── _layouts-dir.sass\n├── 3-modules\n│   ├── _module.sass\n│   └── _modules-dir.sass\n├── 4-states\n│   ├── _state.sass\n│   └── _states-dir.sass\n├── 5-themes\n│   ├── _theme.sass\n│   └── _themes-dir.sass\n├── _animations.sass\n├── app.sass\n├── _breakpoints.sass\n├── _mixins.sass\n└── _vars.sass\n```\n\n\u003cpre\u003e\u003cb\u003e\u003csmall\u003e\u003cfont color=\"#0EC7FF\"\u003eFor more details on this file structure, visit: \u003c/small\u003e\n     \u003ca href =\"https://www.youtube.com/watch?v=c3fwnwSRGU0\"\u003e\u003cimg src=\"https://cdn.fastly.picmonkey.com/content4/previews/social/social_33_550.png\" alt=\"\" width=\"35\" height=\"35\"/\u003e\u003cfont size=\"3\" color=\"#00\"\u003e \u003cb\u003eBRAD HUSSEY\u003c/b\u003e - Sass Best Practices \u003c/font\u003e\u003c/a\u003e\u003c/pre\u003e\n\n## Thanks \u0026 Resources\n\n- [Codes](https://github.com/cbedroid/Smacss-It)\n- [SMACSS Documentation](http://smacss.com/)\n- [Sass Documentation](https://sass-guidelin.es/)\n- [Issues \u0026 Bugs](https://github.com/cbedroid/Smacss-It/issues)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcbedroid%2Fsmacss-it","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcbedroid%2Fsmacss-it","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcbedroid%2Fsmacss-it/lists"}