Ballet for children - Lesson №7

Two words about this template

This template is made for simple and high conversion selling any online lessons by subscription. It can be a content like articles, recorded videos or online classes on ZOOM.

Ailin Samsonova Ailin Samsonova 25.12.2020

What's inside?

This template was made on correct cross-browser layout builder based on component approach.

You should have the npm package manager installed and run "npm i" in the template folder to start using the template:

  $ npm i
  

Gulp task manager will be ready to build the project after installing all the dependencies. Here you will see some warns. Accordingly, we start with the command:

  $ gulp
  

The default task describes the assembly of all resources, monitoring changes and the server.

Tasks can be run separately (for example, to build only css or js). See gulpfile.js for more details.

  $ gulp scss
  
  or
  
  $ gulp js
  

The project uses the approach of combining SVG files into a sprite as a font file. You can use such sprites in HTML with:

  class="iconfont iconfont-[filename]"
  

Two modules are used for templating inside the project : gulp-rigger and gulp-file-include

Project structure

  |- assets
  |- |- img (all images are from https://www.freepik.com)
  |- |- |- iconfont (all svg images to generate icon font)
  |- |- js 
  |- |- |- main.js
  |- |- scss
  |- |- |- main.scss
  |- |- |- common
  |- |- |- |- _iconfont.scss (auto generated scss for icon font)
  |- |- |- |- _template.scss (base css file)
  |- |- |- import (aditional scss files)
  |- |- |- |- _mixins.scss
  |- |- |- |- _variables.scss
  |- |- |- |- hero-block.scss
  |- |- |- |- listing.scss
  |- common
  |- |- favicon.ico
  |- modules (all modules of this template)
  |- |- modules/article
  |- |- modules/authors
  |- |- modules/avatar
  |- |- modules/button
  |- |- modules/checkbox
  |- |- modules/contact
  |- |- modules/detail
  |- |- modules/footer
  |- |- modules/form
  |- |- modules/header
  |- |- modules/head.html (head included)
  |- |- modules/lead
  |- |- modules/map
  |- |- modules/pagination
  |- |- modules/post
  |- |- modules/price
  |- |- modules/subscribe-controll
  |- pages (all pages of this template)
  |- |- pages/account.html
  |- |- pages/author.html
  |- |- pages/authors.html
  |- |- pages/category.html
  |- |- pages/changepass.html
  |- |- pages/contact.html
  |- |- pages/detail-about.html
  |- |- pages/detail.html
  |- |- pages/detail-subscribed.html
  |- |- pages/index.html
  |- |- pages/login.html
  |- |- pages/onlypass.html
  |- |- pages/price.html
  |- |- pages/recoverypass.html
  |- |- pages/registration.html
  |- |- pages/search.html
  |- |- pages/subscribe-controll.html
  |- .gitignore
  |- avatar.php (demo file upload script)
  |- gulpfile.js (gulp tasks)
  |- package.json
  |- readme.html (info about template)
  

The build will go to the appropriate folders in /build/