Theme Boilerplate

A pre-configured set of files and folder that includes a basic setup for building a website, it also includes a set of automated tasks.

Getting Started

• Run npx -p @tech-dynamics/theme_boilerplate create-theme my-project-name to clone the Boilerplate.
• Run npm install to install the necessary dependencies.
• Run npm start to start the development server.
• Run npm run build to build the application for production.
• Run npm run deploy to deploy the application.

Directory Structure

.
├── README.md
├── dist
│   ├── assets
│   │   ├── css
│   │   │   └── main.css
│   │   ├── img
│   │   │   └── image.webp
│   │   └── js
│   │       └── main.js
│   ├── index.html
│   └── pages
│       └── about.html
├── src
│   ├── img
│   │   └── test.png
│   ├── index.html
│   ├── js
│   │   ├── main.js
│   │   └── vendors
│   │       ├── index.js
│   ├── pages
│   │   └── about.html
│   └── sass
│       ├── abstracts
│       │   ├── _mixins.scss
│       │   └── index.scss
│       ├── components
│       │   ├── _menu.scss
│       │   └── index.scss
│       ├── layout
│       │   └── index.scss
│       ├── main.scss
│       └── vendors
│           └── index.scss
├── theme
│   ├── assets
│   │   ├── css
│   │   │   └── style.css
│   │   ├── images
│   │   │   └── image.webp
│   │   └── js
│   │       └── script.js
│   ├── base.html
│   ├── compiled
│   │   ├── main.css
│   │   └── main.js
│   ├── config.json
│   ├── main.css
│   ├── main.js
│   ├── preview
│   └── templates
├── gulpfile.js
├── package-lock.json
├── package.json
├── scripts
│   └── pushtheme.js
├── vite-custom-plugins
│   └── renameImagesPlugin.js
└── vite.config.js

Configuration

The boilerplate uses Vite as a build tool and includes a basic configuration file (vite.config.js) that can be modified to suit the needs of the project, it also uses Gulp for creating tasks and automate repeated tasks see gulpfile.js to see available tasks or run gulp --tasks.

Features

• Hot-reloading
• Code splitting
• SASS support
• ES6+ support
• Production-ready builds
• Image optimization (convert images to webp format)

dependencies

The boilerplate includes the following dependencies:

Production

• Bootstrap

Development

• Vite
• Gulp
• Imagemin
• SASS
• Purgcss

Best Practices

Use component-based architecture
Write tests for components and utilities