{"id":20059597,"url":"https://github.com/kenclaron/frontend-page-sample","last_synced_at":"2026-04-12T13:04:15.486Z","repository":{"id":58594606,"uuid":"532633581","full_name":"kenclaron/frontend-page-sample","owner":"kenclaron","description":"Frontend Pixel Perfect project (Gulp, Pug, SCSS, Babel, webpack, JavaScript, Node.js, yarn). With Docker Package and Web Page.","archived":false,"fork":false,"pushed_at":"2022-11-02T22:09:17.000Z","size":4478,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-02T09:45:44.485Z","etag":null,"topics":["babel","docker","front-end","frontend","gulp","javascript","nodejs","pug","scss","yarn"],"latest_commit_sha":null,"homepage":"https://frontend-page-sample.vercel.app","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kenclaron.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-04T19:11:07.000Z","updated_at":"2024-09-14T21:00:45.000Z","dependencies_parsed_at":"2022-09-10T11:21:13.074Z","dependency_job_id":null,"html_url":"https://github.com/kenclaron/frontend-page-sample","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/kenclaron/frontend-page-sample","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenclaron%2Ffrontend-page-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenclaron%2Ffrontend-page-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenclaron%2Ffrontend-page-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenclaron%2Ffrontend-page-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kenclaron","download_url":"https://codeload.github.com/kenclaron/frontend-page-sample/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenclaron%2Ffrontend-page-sample/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260126616,"owners_count":22962663,"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":["babel","docker","front-end","frontend","gulp","javascript","nodejs","pug","scss","yarn"],"created_at":"2024-11-13T13:08:43.286Z","updated_at":"2026-04-12T13:04:15.454Z","avatar_url":"https://github.com/kenclaron.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend page sample (Pug + SCSS + Gulp)\n\n\u003e Link: https://frontend-page-sample.vercel.app/\n\n\u003e Project for Riverstart (\u003chttps://riverstart.ru\u003e)\n\n\u003e Case: Create the provided layout using gulp packing, Pug, SCSS and other libraries. Requirements: cross-browsers supporting (latest versions of Chrome, Firefox and Safari), adhere to pixel-perfect layout principles, creating animations and states for buttons, progress bars, headers\n\n\u003e Stack: `Pug`, `SCSS`, `JavaScript`, `Node.js`, `yarn`, `iconfont`, `webpack`, `babel`. Requirements: `Pixel Perfect HTML-Coding`.\n\n## Features\n\n* Assembly for automating tasks in everyday front-end development;\n* Automatic page reload in browser using `browser-sync`;\n* Using [Babel](https://babeljs.io/) to support modern JavaScript (ES6) in browsers.\n\n## Usage\n\n### **Using via npm**\n\n* Install `Node.js`: \u003chttps://nodejs.org/en/download/\u003e;\n* Install `yarn`: \u003chttps://classic.yarnpkg.com/en/docs/install\u003e;\n* Clone this repository: `git clone https://github.com/kenclaron/frontend-page-sample.git`;\n* Go to folder of repository: `cd ./frontend-page-sample`;\n* Install `gulp` globally: `yarn global add gulp-cli`;\n* Install needed libraries: `yarn` (if you have errors, use alternative npm-command `npm install`);\n* Type: `yarn dev` (launching in dev-mode in browser with `browser-sync`)\n* Type: `yarn jslint` (checking lint errors)\n* Type: `yarn build` (build project for production)\n  * Results save in folder `./dist`\n\n```text\n  git clone https://github.com/kenclaron/frontend-page-sample.git\n  cd ./vue-url-shortener\n  yarn global add gulp-cli\n  yarn\n  yarn dev\n  yarn jslint\n  yarn build\n```\n\n\u003e If you did everything right, you should have a browser open with a local server and running `browser-sync`.\n\n### **Using via Docker**\n\n* Install Node.js - \u003chttps://nodejs.org/en/\u003e\n* Install Docker - \u003chttps://www.docker.com/products/docker-desktop/\u003e\n* Install `yarn`: \u003chttps://classic.yarnpkg.com/en/docs/install\u003e;\n* Type: `yarn global add gulp-cli` to install Gulp CLI globally for correct work\n* Type: `docker pull ghcr.io/kenclaron/frontend-page-sample:main` to clone package in Docker\n* Type: `docker run -p 8080:80 -it --name frontend-page-sample ghcr.io/kenclaron/frontend-page-sample:main` to launch project\n* Open `localhost:8080` or `127.0.0.1:8080`\n\n```text\n  yarn global add gulp-cli\n  docker pull ghcr.io/kenclaron/frontend-page-sample:main\n  docker run -p 8080:80 -it --name frontend-page-sample ghcr.io/kenclaron/frontend-page-sample:main\n```\n\n### **Open Webpage**\n\n* Open: \u003chttps://frontend-page-sample.vercel.app/\u003e\n\n## Plugins\n\n* [browser-sync](https://browsersync.io/docs/gulp) — live reloading of the web page when changes are made to your project files. One of the options - `tunnel`, which gives you a link so that anyone can see your work (bypassing hosting);\n* [gulp-if](https://www.npmjs.com/package/gulp-if) — run jobs only when needed;\n* [gulp-autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) — automatically arranges vendor prefixes in CSS according to the service [Can I Use](https://caniuse.com/);\n* [gulp-babel](https://www.npmjs.com/package/gulp-babel) — using `ES6` with [Babel](https://babeljs.io/);\n* [gulp-pug](https://www.npmjs.com/package/gulp-pug) — compile `.pug` to `HTML`;\n* [gulp-sass](https://www.npmjs.com/package/gulp-sass) — compile `.scss` to `.css`;\n* [gulp-concat](https://www.npmjs.com/package/gulp-concat) — merge files;\n* [gulp-uglify](https://www.npmjs.com/package/gulp-uglify) — minimize `.js`;\n* [gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css) — minimize `.css`;\n* [gulp-sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps) — sourcemaps for styles;\n* [gulp-svg-sprites](https://www.npmjs.com/package/gulp-svg-sprites) — create `.svg`-sprites;\n* [gulp-rename](https://www.npmjs.com/package/gulp-rename) — rename files, add suffixes and prefixes;\n* [gulp-clean](https://www.npmjs.com/package/gulp-clean) — delete files and folders;\n* [gulp-replace](https://www.npmjs.com/package/gulp-replace) — replace lines;\n* [gulp-plumber](https://www.npmjs.com/package/gulp-plumber) — notifications in terminal (ex. errors in SCSS/Sass);\n* [gulp-debug](https://www.npmjs.com/package/gulp-debug) — debug in terminal;\n* [gulp-watch](https://www.npmjs.com/package/gulp-watch) — track changes in your project files;\n* [gulp-iconfont](https://www.npmjs.com/package/gulp-iconfont) — create `.svg`/`.ttf`/`.eot`/`.woff`/`.woff2` fonts from several `.svg` icons with `Gulp`;\n* [yargs](https://www.npmjs.com/package/yargs) — get command line arguments in Node.js.\n\n## Project folder\n\n```text\nfrontend-page-sample\n├── dist               - Builded project\n│   └── assets         - Sources from src/static\n│       ├── js         - Compiled .js-files\n│       └── css        - Compiled .css-files\n│\n├── gulp-tasks         - .js-tasks for gulp\n│\n└── src                - Source fiels\n    ├── iconfont       - Source for iconfont (svg), \n    │\n    ├── js             - .js-files\n    │   ├── components - .js-components\n    │   └── libs       - Third-party libraries\n    │\n    ├── pngsprite      - Sources for .png-sprite\n    │\n    ├── scss           - .scss-files\n    │   ├── components - .scss-components\n    │   ├── fonts\n    │   ├── generated  - Generated sprites and font styles\n    │   ├── img        - Images for styles\n    │   ├── templates  - Templated for sprites and fonts\n    │   └── vendor     - Third-party styles\n    │\n    ├── static         - Static files\n    │   ├── ajax       - Ajax responses\n    │   └── img        - Images\n    │\n    ├── svgsprite      - Sources for .svg-sprite\n    │\n    └── views          - .pug-templates\n        └── _includes  - Importing files\n            ├── blocks - Importing blocks\n            └── mixins - Importing mixins\n```\n\n## Preview\n\n[\u003cimg src=\"https://i.imgur.com/7Fh7zjg.png\" width=\"48%\"/\u003e](https://i.imgur.com/7Fh7zjg.png)\n[\u003cimg src=\"https://i.imgur.com/jspbxVR.png\" width=\"48%\"/\u003e](https://i.imgur.com/jspbxVR.png)\n\n## License\n\nThe **Frontend Page Sample** licensed under the [MIT license](https://opensource.org/licenses/MIT).\n\n## Author\n\n\u003e You can express your gratitude by clicking on one of the links\n\n* [Personal website](https://kenclaron.github.io/kenclaron)\n* [VK](https://vk.com/club190729942)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenclaron%2Ffrontend-page-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenclaron%2Ffrontend-page-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenclaron%2Ffrontend-page-sample/lists"}