{"id":14967587,"url":"https://github.com/sutter/hellofront","last_synced_at":"2025-10-25T20:31:36.531Z","repository":{"id":35550788,"uuid":"39822408","full_name":"sutter/helloFront","owner":"sutter","description":"Boilerplate SCSS / PUG / ES6","archived":false,"fork":false,"pushed_at":"2022-12-03T07:47:47.000Z","size":6140,"stargazers_count":44,"open_issues_count":26,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-31T10:23:56.782Z","etag":null,"topics":["boilerplate","css","front-end","gulp","pug","scss","starter-kit","static-site-generator","webpack3"],"latest_commit_sha":null,"homepage":"https://hellofront.netlify.com/","language":"HTML","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/sutter.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}},"created_at":"2015-07-28T08:33:58.000Z","updated_at":"2024-08-11T17:51:15.000Z","dependencies_parsed_at":"2023-01-15T23:16:49.887Z","dependency_job_id":null,"html_url":"https://github.com/sutter/helloFront","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/sutter%2FhelloFront","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sutter%2FhelloFront/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sutter%2FhelloFront/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sutter%2FhelloFront/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sutter","download_url":"https://codeload.github.com/sutter/helloFront/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238207646,"owners_count":19434095,"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","css","front-end","gulp","pug","scss","starter-kit","static-site-generator","webpack3"],"created_at":"2024-09-24T13:38:19.247Z","updated_at":"2025-10-25T20:31:31.211Z","avatar_url":"https://github.com/sutter.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 1. Hello Front\n\nBoilerplate SCSS / PUG / ES6 for clean and fast Front-end project.\n\n* Démo : [https://hellofront.netlify.com/](https://hellofront.netlify.com/)\n\n\nWork on **src/** folder and gulp build in **dist/**.\n\n\u003c!-- TOC --\u003e\n\n- [1. Hello Front](#1-hello-front)\n  - [1.1. Installation](#11-installation)\n    - [1.1.1. Node version manager](#111-node-version-manager)\n    - [1.1.2. Install Sass](#112-install-sass)\n    - [1.1.3. Install Yarn](#113-install-yarn)\n    - [1.1.4. Install Gulp](#114-install-gulp)\n    - [1.1.5. Download the dependencies NPM](#115-download-the-dependencies-npm)\n    - [1.1.6. Install Tooling](#116-install-tooling)\n  - [1.2. Commands](#12-commands)\n    - [1.2.1. Run project](#121-run-project)\n    - [1.2.2. Build project](#122-build-project)\n    - [1.2.3. Optimize SVG](#123-optimize-svg)\n    - [1.2.4. Clean project](#124-clean-project)\n  - [1.3. How it works](#13-how-it-works)\n    - [1.3.1. Works with SCSS](#131-works-with-scss)\n    - [1.3.2. Works with Pug templating](#132-works-with-pug-templating)\n    - [1.3.3. Works with JavaScript](#133-works-with-javascript)\n    - [1.3.4. Working with Images](#134-working-with-images)\n    - [1.3.5. Working with Fonts](#135-working-with-fonts)\n    - [1.3.6. Working width SVG Sprite](#136-working-width-svg-sprite)\n\n\u003c!-- /TOC --\u003e\n\n## 1.1. Installation\n\n### 1.1.1. Node version manager\n\nInstall [NVM](https://github.com/creationix/nvm)\n\n```bash\nnvm use\n```\n\n### 1.1.2. Install Sass\n\nGo to [sass-lang.com/install](http://sass-lang.com/install) for installation in\ncommand line.\n\n### 1.1.3. Install Yarn\n\nGo to\n[https://yarnpkg.com/docs/install](https://yarnpkg.com/docs/install/#mac-tab)\n\n### 1.1.4. Install Gulp\n\nGo to [https://gulpjs.com/](https://gulpjs.com/)\n\n### 1.1.5. Download the dependencies NPM\n\n```bash\nyarn install\n```\n\n### 1.1.6. Install Tooling\n\nUse [Prettier](https://github.com/prettier/prettier) for clean your **JS** /\n**SCSS** files.\n\nPlugin for IDE :\n\n- [Visual Code Studio](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n- [Atom](https://atom.io/packages/prettier-atom)\n- [Sublime text](https://github.com/danreeves/sublime-prettier)\n\n## 1.2. Commands\n\n### 1.2.1. Run project\n\n```bash\nyarn dev\n```\n\n### 1.2.2. Build project\n\n```bash\nyarn build\n```\n\n### 1.2.3. Optimize SVG\n\n```bash\nyarn svg\n```\n\n### 1.2.4. Clean project\n\n```bash\nyarn reset\n```\n\n## 1.3. How it works\n\n### 1.3.1. Works with SCSS\n\nUse [atomic design](http://bradfrost.com/blog/post/atomic-web-design/) design for orgaznise components\n\nThe SCSS files are located in `./src/assets/scss`.\n\nExample SCSS hierarchy :\n\n- **base/** : Unclassed HTML elements (type selector)\n- **atoms/** : Atoms are the basic building blocks of matter (button, input, etc.)\n- **molecules/** : Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound (from, cards, etc.)\n- **layout/** : Layout are the basic elment for build layout.\n- **page/** : Pages are specific instances of templates\n- **tools/** : Default mixin and functions\n- **utils/** : Helpers and overrides\n- **\\_settings.scss** : Global variables\n- **app.scss** : Main stylesheet\n\nUse the [BEM](http://getbem.com/introduction/) namming convention.\n\n### 1.3.2. Works with Pug templating\n\nThe PUG files are located in `./src/template`\n\n- **layout** : layout of html files generated\n- **mixin** : for reusable pattern\n- **pages** : the content of html files generated\n- **partial** : includes of html pattern\n- **config.pug** : global variables\n\n### 1.3.3. Works with JavaScript\n\nThe Javascript files are located in `./src/assets/js`.\n\n**Use the ES6 syntaxe** Babel convert it in ES5 for you via webpack.\n\n### 1.3.4. Working with Images\n\nThe Image files are located in `./src/assets/img`\n\nAccepted file formats : - jpg - png - gif - svg\n\n### 1.3.5. Working with Fonts\n\nThe font files are located in `./src/assets/font`\n\n### 1.3.6. Working width SVG Sprite\n\nThe svg files for sprite are located in `./src/assets/icons`.\n\nUncomment the line 11 of the file `./src/template/layout/base.pug` to include them in the basic layout.\n\nA PUG mixin is planned for use:\n\n```pug\n  +icon('name-of-file', 'my-css-class')\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsutter%2Fhellofront","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsutter%2Fhellofront","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsutter%2Fhellofront/lists"}