Frontend Starter Kit

Description

This is a startup project template for developing a web interface. There is no jQuery in it, only Vanilla JS, only hardcore! If you need jQuery, then you can add it separately as bootstrap and other modules. This template includes a number of useful modules in my opinion that automate part of the work.

Plugins

Start project

Clone repository

git clone https://github.com/le2xx/frontend-starter-kit.git new-project
cd new-project

Install modules

npm install

Start template

npm start

Building project

npm build

Create new component

npm run new-block name-block

GitHub page deploy

npm run gh-deploy

File and folder structure

├── src/                                    #
│   ├── app/                                # 
│   │   ├── components/                     # Components directory
│   │   │   ├── layout/                     #
│   │   │   │   └── layout.pug              # 
│   │   │   └── component-name/             # Component directory  
│   │   │       ├── component-name.js       # JS file component  
│   │   │       ├── component-name.pug      # Pug file component  
│   │   │       └── component-name.styl     # Styl file component
│   │   └── pages/                          #
│   │       └── index.pug                   # Index page
│   ├── assets/                             #
│   │   ├── favicons/                       # Favicons directory
│   │   ├── fonts/                          # Directory for font files
│   │   └── images/                         # Directory for image files
│   ├── styles/                             #
│   │   ├── base.styl                       # Base stylus file for include other stylus files
│   │   ├── fonts.styl                      # Stylus file for include fonts  
│   │   ├── mixins.styl                     # Stylus file for making replayable styles
│   │   └── variables.styl                  # Stylus file for making variables
│   ├── main.js                             # Main JavaScript file
│   └── polyfills.js                        #
├── .gitignore                              #
├── .stylintrc                              #
├── new-block.js                            # Script for making new components
├── package.json                            #
├── README.md                               #
└── webpack.conf.js                         # Webpack config file

Todo

• Add automated testing tools
• Possible to add TypeScript