{"id":25269929,"url":"https://github.com/javascript-pro/boilerplate-es6-sass","last_synced_at":"2025-07-24T06:40:37.368Z","repository":{"id":89534001,"uuid":"90924559","full_name":"javascript-pro/boilerplate-es6-sass","owner":"javascript-pro","description":"Quickly get up and running with an ES6 \u0026 SASS MVC Application. - Simple Sass file structure ready to use - Example ES6 application you can extend - Holy grail 3 column flexbox layout - Easy, modular integration with any project","archived":false,"fork":false,"pushed_at":"2017-06-07T05:02:11.000Z","size":637,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"Stable","last_synced_at":"2025-02-12T11:37:33.210Z","etag":null,"topics":[],"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/javascript-pro.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-05-11T01:39:21.000Z","updated_at":"2019-09-26T23:07:21.000Z","dependencies_parsed_at":"2023-03-13T18:09:05.222Z","dependency_job_id":null,"html_url":"https://github.com/javascript-pro/boilerplate-es6-sass","commit_stats":null,"previous_names":["javascript-pro/boilerplate-es6-sass"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2Fboilerplate-es6-sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2Fboilerplate-es6-sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2Fboilerplate-es6-sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2Fboilerplate-es6-sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javascript-pro","download_url":"https://codeload.github.com/javascript-pro/boilerplate-es6-sass/tar.gz/refs/heads/Stable","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441060,"owners_count":20939239,"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":[],"created_at":"2025-02-12T11:28:00.814Z","updated_at":"2025-04-06T06:15:14.802Z","avatar_url":"https://github.com/javascript-pro.png","language":"CSS","readme":"![alt text](https://raw.githubusercontent.com/listingslab/boilerplate-es6-sass/Latest/public/images/listingslab.png \"Listingslab Logo\")\n\n## Boilerplate JavaScript ES6 MVC Application (with Sass)\n\nQuickly get up and running with a JavaScript [ES6](https://es6.io) MVC Application and [Sass](http://sass-lang.com) styling. It uses [Gulp](http://gulpjs.com/) and [Babel](https://babeljs.io) as simply as possible to transpile the source code into browser-ready JavaScript and CSS but you can easily adapt it to your own workflow.\n\n#### What does it give you?\n\n- Simple Sass file structure ready to use\n- Example ES6 application you can extend\n- Holy grail 3 column flexbox layout\n- Easy, modular integration with any project\n- Koa 2 boilerplate Rest API\n\n#### Install \u0026 Start developing\nTo get started as a developer, use your preferred command line application to change directory to your working folder and run the following commands.\n\n```\ngit clone https://github.com/listingslab/boilerplate-es6-sass.git project-name\ncd project-name\nsudo npm install\ngulp\n```\nThis will create the codebase in a folder called __project-name__, install the node dependencies you need and start gulp running. The gulp process watches for any changes in the /src/js or scss folders and re-transpiles the JS and Sass into modern browser compliant, minimised code. \n\nInstall http-server locally and run it to start a tiny http webserver on http://127.0.0.1:8080 which allows us the freedom of loading in javascript (which you can only do when the JS is running on a webserver rather than as a flat file.)\n \n```bash\nsudo npm install http-server -g\nhttp-server\n```\nPoint your browser to http://127.0.0.1:8080 and your text editor to /__project-name__/src/ and start editing.\n\n\n## Node.js KOA API Server\n\nUsing Koa we'll spin up a very minimal Node.js API to act as our bridging component for further integration.\n\n### Install and run API server\n\n```bash\nsudo npm install\nnpm run api\n```\n\n#### Overrides\nA list of possible quick overrides to the Module that are available\n- __Sass variables file.__ Take full control of the colour in one easy to edit Sass file (/src/scss/_variables.scss)\n\n\n\n#### Fork it here\n\nIf you'd like to detach this git repo from the origin so that you can fork it into your own repo on github with a clean commit history, then you can do so by typing the following commands in your __project-name__/ folder\n\n```bash\ncd /project-name\nsudo rm -r .git\nsudo rm README.md\ngit init\ngit add .\ngit commit -m 'Initial commit'\ngit remote add origin https://github.com/you/repo-name\ngit push origin master\n```\n\n#### What is MVC?\nModel–view–controller (MVC) is a software architectural pattern for implementing user interfaces on computers. It divides a given application into three interconnected parts in order to separate internal representations of information from the ways that information is presented to and accepted from the user.\n\n![alt text](https://raw.githubusercontent.com/listingslab/boilerplate-es6-sass/Latest/public/images/mvc.png \"What is MVC?\")\n\n#### License\n\n[Open Software License 3.0](https://spdx.org/licenses/OSL-3.0.html)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavascript-pro%2Fboilerplate-es6-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavascript-pro%2Fboilerplate-es6-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavascript-pro%2Fboilerplate-es6-sass/lists"}