sydmeeran / frontend-page-sample

Frontend Pixel Perfect project (Gulp, Pug, SCSS, Babel, webpack, JavaScript, Node.js, yarn). With Docker Package and Web Page.

Frontend page sample (Pug + SCSS + Gulp)

Link: https://frontend-page-sample.vercel.app/

Project for Riverstart (https://riverstart.ru)

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

Stack: Pug, SCSS, JavaScript, Node.js, yarn, iconfont, webpack, babel. Requirements: Pixel Perfect HTML-Coding.

Features

• Assembly for automating tasks in everyday front-end development;
• Automatic page reload in browser using browser-sync;
• Using Babel to support modern JavaScript (ES6) in browsers.

Usage

Using via npm

• Install Node.js: https://nodejs.org/en/download/;
• Install yarn: https://classic.yarnpkg.com/en/docs/install;
• Clone this repository: git clone https://github.com/kenclaron/frontend-page-sample.git;
• Go to folder of repository: cd ./frontend-page-sample;
• Install gulp globally: yarn global add gulp-cli;
• Install needed libraries: yarn (if you have errors, use alternative npm-command npm install);
• Type: yarn dev (launching in dev-mode in browser with browser-sync)
• Type: yarn jslint (checking lint errors)
• Type: yarn build (build project for production)
  • Results save in folder ./dist

  git clone https://github.com/kenclaron/frontend-page-sample.git
  cd ./vue-url-shortener
  yarn global add gulp-cli
  yarn
  yarn dev
  yarn jslint
  yarn build

If you did everything right, you should have a browser open with a local server and running browser-sync.

Using via Docker

• Install Node.js - https://nodejs.org/en/
• Install Docker - https://www.docker.com/products/docker-desktop/
• Install yarn: https://classic.yarnpkg.com/en/docs/install;
• Type: yarn global add gulp-cli to install Gulp CLI globally for correct work
• Type: docker pull ghcr.io/kenclaron/frontend-page-sample:main to clone package in Docker
• Type: docker run -p 8080:80 -it --name frontend-page-sample ghcr.io/kenclaron/frontend-page-sample:main to launch project
• Open localhost:8080 or 127.0.0.1:8080

  yarn global add gulp-cli
  docker pull ghcr.io/kenclaron/frontend-page-sample:main
  docker run -p 8080:80 -it --name frontend-page-sample ghcr.io/kenclaron/frontend-page-sample:main

Open Webpage

• Open: https://frontend-page-sample.vercel.app/

Plugins

• browser-sync — 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);
• gulp-if — run jobs only when needed;
• gulp-autoprefixer — automatically arranges vendor prefixes in CSS according to the service Can I Use;
• gulp-babel — using ES6 with Babel;
• gulp-pug — compile .pug to HTML;
• gulp-sass — compile .scss to .css;
• gulp-concat — merge files;
• gulp-uglify — minimize .js;
• gulp-clean-css — minimize .css;
• gulp-sourcemaps — sourcemaps for styles;
• gulp-svg-sprites — create .svg-sprites;
• gulp-rename — rename files, add suffixes and prefixes;
• gulp-clean — delete files and folders;
• gulp-replace — replace lines;
• gulp-plumber — notifications in terminal (ex. errors in SCSS/Sass);
• gulp-debug — debug in terminal;
• gulp-watch — track changes in your project files;
• gulp-iconfont — create .svg/.ttf/.eot/.woff/.woff2 fonts from several .svg icons with Gulp;
• yargs — get command line arguments in Node.js.

Project folder

frontend-page-sample
├── dist               - Builded project
│   └── assets         - Sources from src/static
│       ├── js         - Compiled .js-files
│       └── css        - Compiled .css-files
│
├── gulp-tasks         - .js-tasks for gulp
│
└── src                - Source fiels
    ├── iconfont       - Source for iconfont (svg), 
    │
    ├── js             - .js-files
    │   ├── components - .js-components
    │   └── libs       - Third-party libraries
    │
    ├── pngsprite      - Sources for .png-sprite
    │
    ├── scss           - .scss-files
    │   ├── components - .scss-components
    │   ├── fonts
    │   ├── generated  - Generated sprites and font styles
    │   ├── img        - Images for styles
    │   ├── templates  - Templated for sprites and fonts
    │   └── vendor     - Third-party styles
    │
    ├── static         - Static files
    │   ├── ajax       - Ajax responses
    │   └── img        - Images
    │
    ├── svgsprite      - Sources for .svg-sprite
    │
    └── views          - .pug-templates
        └── _includes  - Importing files
            ├── blocks - Importing blocks
            └── mixins - Importing mixins

Preview

License

The Frontend Page Sample licensed under the MIT license.

Author

You can express your gratitude by clicking on one of the links

• Personal website
• VK