{"id":21368313,"url":"https://github.com/logustra/personal","last_synced_at":"2026-04-11T19:03:36.715Z","repository":{"id":104130503,"uuid":"84887108","full_name":"logustra/personal","owner":"logustra","description":"Personal - HTML Template","archived":false,"fork":false,"pushed_at":"2017-10-02T09:34:37.000Z","size":27784,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-22T20:29:47.456Z","etag":null,"topics":["bootstrap","bootstrap3","css","gulp","html","javascript","jquery","sass","scss"],"latest_commit_sha":null,"homepage":"https://logustra.github.io/personal/","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/logustra.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":"2017-03-14T00:17:37.000Z","updated_at":"2018-04-06T00:39:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"1f5a8085-7866-44ca-8e5b-14694eb5791e","html_url":"https://github.com/logustra/personal","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/logustra%2Fpersonal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logustra%2Fpersonal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logustra%2Fpersonal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logustra%2Fpersonal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/logustra","download_url":"https://codeload.github.com/logustra/personal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243841217,"owners_count":20356446,"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":["bootstrap","bootstrap3","css","gulp","html","javascript","jquery","sass","scss"],"created_at":"2024-11-22T07:23:47.766Z","updated_at":"2025-12-30T21:07:29.592Z","avatar_url":"https://github.com/logustra.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Architecture Sass\nProperly architecting your Sass project is a crucial starting point to having a maintainable, scalable, and well-organized project. Sass makes separating your project into logical “modules” simple with the `@import` directive, which acts differently than the native CSS `@import` directive in that it **includes** `.scss` **or** `.sass` **files before the final CSS output.**\n\nYou can [read the documentation on the](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import) `@import` [directive](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import) to get a good idea of how you can use it to include partial files.\n\nThere are many project architectures that you can employ in your project, and each might have their pros and cons. The important thing is that you **choose one and stick with it**. In this article, The **7-1 Pattern** by Hugo Giraudel will be used. To summarize, there are **seven** folders and **one** `main.scss` file for output:\n\n- `base/` – contains global styles, such as resets, typography, colors, etc.\n- `components/` – contains each self-contained component in its own .scss partial\n- `layout/` – contains styling for larger layout components; e.g. nav, header, footer, etc.\n- `pages/` – contains page-specific styling, if necessary\n- `themes/` – contains styling for different themes\n- `utils/` – contains global mixins, functions, helper selectors, etc.\n- `vendors/` – contains 3rd-party styles, mixins, etc.\n- `main.scss` – output file that brings together all of the above parts\n\nSource : [scotch.io](https://scotch.io/tutorials/aesthetic-sass-1-architecture-and-style-organization)\n\n## Instructions\n\n1. Make sure you have these installed\n\t- [node.js](http://nodejs.org/)\n\t- [git](http://git-scm.com/)\n\t- [gulp](http://gulpjs.com/)\n\t- [ruby](https://www.ruby-lang.org/)\n\t- [sass](http://sass-lang.com/)\n\n2. Clone this repository into your local machine using the terminal (linux) or Gitbash (PC) `git clone https://github.com/Logustra/imgtohtml.git`\n3. CD to the folder cd `imgtohtml`\n4. Run `npm-install` to install the project dependencies\n5. Install gulp.js via the linux terminal or Gitbash on a PC `npm install --global gulp-cli`\n6. Run the Gulp command `gulp`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogustra%2Fpersonal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogustra%2Fpersonal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogustra%2Fpersonal/lists"}