Next-gen-boilerplate NPM

HTML5 Boilerplate

A simple html5 boilerplate with modern javascript support.

Features

Industry standard structure
7-1 sass architecture
Awesome linting support
Image optimization after build project
Included popular library like bootstrap & jquery
Modern browser support
Cross browser compatibility

Tech Stack

Languages: HTML5, CSS3, JavaScript

Libraries: Scss, Bootstrap, Bootstrap Icons, jQuery

Tools: Node JS, Git, NPM, Webpack, Babel, ES List, Prettier

Run Locally

Download the project

  npx next-gen-boilerplate project-name

Go to the project directory

  cd project-name

Install dependencies

  npm install

Install dependencies for linting support

  npm run lint

Start the developemnt server, http://localhost:3000

  npm run start

Build for production, project will build on dist directory

  npm run build

Usage/Examples

Folder Structure

.vscode
 ┗ settings.json
public
 ┗ index.html
src
 ┣ assets
 ┃ ┣ fonts
 ┃ ┃ ┗ poppins
 ┃ ┃ ┃ ┣ Poppins-Bold.ttf
 ┃ ┃ ┃ ┣ Poppins-Light.ttf
 ┃ ┃ ┃ ┣ Poppins-Medium.ttf
 ┃ ┃ ┃ ┣ Poppins-Regular.ttf
 ┃ ┃ ┃ ┣ Poppins-SemiBold.ttf
 ┃ ┃ ┃ ┗ Poppins-Thin.ttf
 ┃ ┗ images
 ┃ ┃ ┣ svg
 ┃ ┃ ┃ ┗ icon-speaker.svg
 ┃ ┃ ┗ bar_icon_active.png
 ┣ js
 ┃ ┣ modules
 ┃ ┃ ┗ Calculator.js
 ┃ ┗ app.js
 ┗ scss
 ┃ ┣ abstracts
 ┃ ┃ ┣ _mixins.scss
 ┃ ┃ ┗ _variables.scss
 ┃ ┣ base
 ┃ ┃ ┣ _reset.scss
 ┃ ┃ ┗ _typography.scss
 ┃ ┣ components
 ┃ ┃ ┗ _button.scss
 ┃ ┣ helpers
 ┃ ┃ ┣ _functions.scss
 ┃ ┃ ┗ _media-query.scss
 ┃ ┣ layout
 ┃ ┃ ┣ _footer.scss
 ┃ ┃ ┣ _grid.scss
 ┃ ┃ ┣ _header.scss
 ┃ ┃ ┣ _navigation.scss
 ┃ ┃ ┗ _sidebar.scss
 ┃ ┣ pages
 ┃ ┃ ┗ _home.scss
 ┃ ┣ themes
 ┃ ┃ ┗ _theme.scss
 ┃ ┗ app.scss
webpack
 ┣ webpack.config.common.js
 ┣ webpack.config.dev.js
 ┣ webpack.config.js
 ┗ webpack.config.prod.js
.babelrc
.eslintrc
.gitignore
package-lock.json
package.json
postcss-preset-env.js
README.md

Include new javascript file

entry: {
  app: path.resolve(__dirname, "../src", "js/app.js"),
},

Advance media query setup using sass

$breakpoints:('mobile': (min-width: 360px),
  'largeMobile': (min-width: 425px),
  'xlMobile': (min-width: 600px),
  'tablet': (min-width: 768px),
  'smallLaptop': (min-width: 992px),
  'laptop': (min-width: 1200px),
  'desktop': (min-width: 1400px)
);
@mixin respondScreen($screen) {
  @if map-has-key($breakpoints, $screen) {
    @media #{inspect(map-get($breakpoints, $screen))} {
      @content;
    }
  }
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$screen}`. ";
  }
}

Include all scss files

@import '~bootstrap/dist/css/bootstrap.min.css';

// Abstracts
@import "abstracts/variables";
@import "abstracts/mixins";

// Vendors - If Needed
@import "vendors/*.css";

// Base
@import "base/reset";
@import "base/typography";

// Helpers
@import "helpers/functions";
@import "helpers/media-query";

// Layout
@import "layout/navigation";
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";

// Components
@import "components/button";

// Pages
@import "pages/home";

// Themes
@import "themes/theme";