/WebWizardsAgency

Fictional web development agency WebWizards built by group of passionate developers.

Primary LanguageJavaScriptMIT LicenseMIT

Web Wizards Agency

Fictional web development agency WebWizards built by group of passionate developers.

Contributors ✨

Thanks goes to these people:


Jovana Marčeta
πŸ’¬ 🌏
Aidas Kairys
πŸ’¬ 🌏
Guenez Muhamed
πŸ’¬ 🌏
Deepak Gudi
πŸ’¬ 🌏

contributions welcome license version

gulp-webpack-handlebars is a flexible template for web development. It includes many tools for creating responsive, high-performance and lightweight pages.

πŸš€ Gulp 4 + Webpack 4 + Handlebars + Babel + BrowserSync πŸ”₯

Documentation

Getting Started

Install

  1. Install NodeJS and yarn
  2. Clone this repository
  3. Run yarn install

Use tasks

Task Name Description Environment
🚧 gulp Compile dev build, start the server and watch for changes Development
🏭 gulp build --production Compile production build Production

How to use SVG sprite?

Add images
  1. optional Change color values (fill or stroke) in your SVG file to currentColor to support dynamic color changes.
  2. Put SVG file in src/img/svg-sprite directory.
  3. The code from your SVG file will be included in one svg-sprite and placed in dist/img/svg-sprite/sprite.svg
SVG tag
<svg viewBox="x0 y0 x1 y1">
  <use href="assets/img/svg-sprite/sprite.svg#YOUR_SVG_FILE_NAME"></use>
</svg>

You can get viewBox value from your SVG file or using devTools on the page after including sprite.svg

IMG tag
<img src="assets/img/svg-sprite/sprite.svg#YOUR_SVG_FILE_NAME" alt="">

In this case, the image does not respond to color changes.

⬆ back to menu

Features

Type List
Task Runner Gulp
CSS SASS / SCSS, CleanCSS, Autoprefixer
JS Webpack, Babel
JS Examples FileInclude, Uglify
HTML Templates Handlebars.js, handlebars-layouts
Images ImageMin
Live Reload BrowserSync
Debug Sourcemaps, Plumber
More Favicons, SVG Sprites, Notifier, Changed
Included JS Jquery, Bootstrap 4, CurrentDevice

⬆ back to menu

File structure

|-- dist
|-- tasks
|-- src
|   |-- fonts
|   |-- img
|   |   |-- favicon
|   |   |   |-- logo.png
|   |   |-- content (optional)
|   |   |-- main (optional)
|   |   |-- svg-sprite
|   |-- js
|   |   |-- components
|   |   |-- other
|   |   |-- app.js
|   |   |-- main.js
|   |-- styles
|   |   |-- components
|   |   |-- main.scss
|   |   |-- _app.scss
|   |   |-- _variables.scss
|   |-- views
|   |   |-- data
|   |   |-- helpers
|   |   |-- partials
|   |   |-- templates
|   |   |   |-- pages
|   |   |   |-- index.html
|-- .babelrc.js
|-- .browserslistrc
|-- .gitignore
|-- gulpfile.babel.js
|-- package.json
|-- webpack.config.js

  • dist - folder with the finished results of assembly. In dev mode, is the root of the server.

  • tasks - directory with gulp tasks.

  • .babelrc.js - babel static configuration.

  • gulpfile.babel.js - config and main tasks.

  • src - source files

    • fonts - fonts files in directories named by font name. For example fonts/Ubuntu/Regular.{woff, woff2, ttf}

    • img - all images for optimization:

      • content - optional directory (Implied as: dynamic images for pages, may be removed after placing the layout on the CMS)

      • main - optional directory (Implied as: static template images (logo, background and etc.))

      • favicon - generating favicons from one image

      • svg-sprite - optimizes them and bakes them into SVG sprites

    • views

      • helpers - Handlebars.js helpers

      • partials - Handlebars.js templates

      • template - site pages

        • index.html - entry point

        • pages - all pages

⬆ back to menu

Copyright and license

Copyright 2019 Maksim Abuzyarov under the MIT license.