{"id":15041513,"url":"https://github.com/kingrayhan/html5-scss-boilerplate","last_synced_at":"2025-04-14T20:21:52.391Z","repository":{"id":96069722,"uuid":"88924833","full_name":"kingRayhan/html5-scss-boilerplate","owner":"kingRayhan","description":"A quick start scss based html5 boilerplate for front-end project.","archived":false,"fork":false,"pushed_at":"2017-04-24T03:40:00.000Z","size":1100,"stargazers_count":10,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T08:41:13.327Z","etag":null,"topics":["boilerplate","html5","kingrayhan","quickstart","scss","scss-framework"],"latest_commit_sha":null,"homepage":"","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/kingRayhan.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-04-21T01:08:46.000Z","updated_at":"2024-10-08T14:33:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"f512f50f-ed06-45e8-adcb-b6b66225c074","html_url":"https://github.com/kingRayhan/html5-scss-boilerplate","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/kingRayhan%2Fhtml5-scss-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingRayhan%2Fhtml5-scss-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingRayhan%2Fhtml5-scss-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingRayhan%2Fhtml5-scss-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kingRayhan","download_url":"https://codeload.github.com/kingRayhan/html5-scss-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952444,"owners_count":21188444,"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","html5","kingrayhan","quickstart","scss","scss-framework"],"created_at":"2024-09-24T20:46:11.099Z","updated_at":"2025-04-14T20:21:52.363Z","avatar_url":"https://github.com/kingRayhan.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](http://image.prntscr.com/image/762fac151662412b9fa870126b72669a.png)\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\n# HTML5 SCSS Boilerplate\n\n### Clone the repo for your project\n```\ngit clone https://github.com/kingRayhan/html5-scss-boilerplate.git\n```\n\n## Navigate to project directory\n```\ncd html5-scss-boilerplate\n```\n\n### Generate `style.css` file by compiling scss files\n```\nsass --watch assets/styles/style.scss:style.css\n```\n** For run this command compile all scss styles,  you must have to install [Ruby Gem](https://rubygems.org/) and [SASS](http://sass-lang.com/) previously in your local machine. **\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# File architecture\n\u003cimg src=\"http://i.imgur.com/yRp0ZSG.png\"\u003e\n\u003ca href=\"http://i.imgur.com/yRp0ZSG.png\" target=\"_blank\"\u003eSee in better resolution\u003c/a\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003e All assets file like images , javascripts , scss including third-party libraries will be in the `assets` folder. Only markup files ( .html , .php , .rb , .asp ...) and main style sheet ( style.css which will come in after compiling scss files ).\n\n\n\n# Assets directory difination\n\n* **image/** - Contains all images\n* **plugins/** - All third-party libraries like wow.js , animate.css , bootstrap will be here. By default this framework included 4 libraries. They are -\n  * [Twitter Bootstrap](https://github.com/twbs/bootstrap) - The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.\n  * [Font-Awesome](https://github.com/FortAwesome/Font-Awesome) - The iconic font and CSS toolkit\n  * [jquery](https://github.com/jquery/jquery) - Javascript library for make javascript easy\n  * [JQuery MeanMenu](https://github.com/meanthemes/meanMenu) - Jquery plugin for responsive mobile menu.\n* **styles/**\n  * **style.scss** - Contains all scss pertials\n  * **abstracts/**\n    * **_functions.scss** - This file contains all application-wide Sass functions.\n    * **_mixins.scss** - This file contains all application-wide Sass mixins.\n    * **_mixins.scss** - This file contains all application-wide Sass mixins.\n    * **_variables.scss** - This file contains all application-wide Sass variables.\n  * **base/**\n    * **_base.scss** - This file contains very basic styles.\n    * **_fonts.scss** - This file contains all @font-face declarations, if any.\n    * **_helpers.scss** - This file contains CSS helper classes.\n    * **_typography.scss** - Basic typography style for copy text  \n   * **components/** - This directory will holds your project's components partials scss files such as `_buttons.scss` , `_tab.scss` , `_accordion.scss` ...\n   * **layout/** - This directory contains all styles of application layouts such as `_header.scss` , `_sidebar.scss` etc...\n   * **pages/** - Page specific scss partials file will be here.\n   * **themes/** - If your project has several theme , then these theme specified scss pertials will be here.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkingrayhan%2Fhtml5-scss-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkingrayhan%2Fhtml5-scss-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkingrayhan%2Fhtml5-scss-boilerplate/lists"}