layout-template

General info

A boilerplate for creating HTML+CSS+JS projects with development server and SASS/SCSS preprocessor.

Quick start with creating a new project using this template

1. Create a new repository on Github and save github directions for starting work with the new repository

2. Clone this template project to your new local project folder:

   git clone <https://github.com/this-repo-url.git> <path/to/your/new-project-folder-name>

3. Delete the hidden .git folder from the root directory of the cloned repository

4. Specify the title of your app inside the title tag of the src/index.html file:

   <title>Your app title</title>

5. Specify the name and the version of your project in the package.json settings:

   {
     "name": "new-project-name",
     "version": "1.0.0",
     ...
   }
   

6. To add a favicon in the webpack.config.js uncomment a line with the HtmlWebpackPlugin's favicon property and specify the path to where your favicon file is in its value:

   module.exports = {
     ...
     plugins: [
       ...
       new HtmlWebpackPlugin({
         favicon: './path/to/your-favicon-file.png',
         ...
       }),
       ...
     ],
     ...
   }
   

7. Install dependencies using npm:

   npm install

8. Add information about your project here in the README.md

9. Push the repository to Github in accordance with directions for starting work given in the first step.

Available scripts

npm start

Starts the project in development mode.

npm run build

Builds the app for production to the dist folder.

Technologies

Tools used for handy development:

• Webpack v5 with loaders and plugins:

  • webpack-dev-server
  • html-loader
  • html-webpack-plugin
  • css-loader
  • postcss-loader with autoprefixer
  • css-minimizer-webpack-plugin
  • mini-css-extract-plugin
  • sass-loader

• Sass

• normalize.css

• Babel with polyfills and "preset-env" preset

• EditorConfig

• ESLint with "airbnb-base" config

• Prettier

  Note: to use autoformatting with Prettier please make sure that Prettier is installed and configured as a default formatter in your IDE.