Skip to content
A powerful frontend boilerplate. Gulp, HTML5 & CSS3, Pug, Stylus, ES6, Autoprefixer, Browsersync
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
gulpfile.js
.babelrc
.eslintrc
.gitignore
LICENSE.txt
README.md
ftp.config-demo.js
package.json
webpack.config.js

README.md

ilkome frontend template

Powerful frontend boilerplate. HTML5 & CSS3, Pug, Stylus, ES6, Autoprefixer, Browsersync, Gulp

Features

HTML

Template engine using Pug (ex Jade). Pug it's preprocessor HTML.

CSS

  • Stylus compilation including source maps
  • Components system with Stylus. Stylus it's preprocessor CSS. It's also can be SASS, LESS
  • Helpful mixins
  • Minify styles
  • Remove unused CSS styles. For example from CSS libraries like bootstrap
  • Autoprefixer. Parse CSS and add vendor prefixes to rules

JavaScript

  • Compiles ES6 to ES5.
  • Minify.
  • Support ES6 import.

Productivity

  • Browsersync. It's runs local server and reload the browsers across all your devices when you make changes in your application folder files
  • Hot reload for images. Minify images: svg, png, jpg, gif
  • Upolad builded files on the server

Installation

  1. Install nodejs
  2. Install gulp: npm install gulp -g
  3. Clone this repo
  4. cd to project directory
  5. Run npm install to install required files
  6. Rename ftp.config-demo.js to ftp.config.js. Optionally you can write your FTP config for auto upload files to the server.

Usage

Compile App and watch files for changes.

  • npm run dev development
  • npm run build make build
  • npm run upload make build and upload files to server

Tasks

This command will give you a list of all tasks available.

gulp --tasks
  • browserSync-reload reload page in all your connected devices.
  • clean clean build folder.
  • jade compile jade files.
  • html prettify compiled html.
  • images minify images.
  • assets copy everything from assets folder. Used for favicons, fonts, css.
  • stylus compiles styles.
  • css analyze HTML files and clean unused CSS styles. Ignore styles with prefix .js-. Add vendor prefixes.
  • upload upload build folder on the server.
  • zip create archive with build files build.zip

Structure of main folders and files

.
├── app                                 # Application folder
│   ├── atoms                           # Atoms
│   │   └── atom-name                   # Atom's example. It's a component Jade + Stylus + Images
│   │       ├── img                     # Atom's images
│   │       ├── atom-name.jade          # Atom's markdown
│   │       └── atom-name.styl          # Atom's styles.
│   ├── js                              # JavaScript
│   │   ├── index.js                    # Entry
│   |   └── libs                        # Libraries
│   ├── layout                          # Layout files
│   │   ├── head.jade                   # Head
│   │   ├── layout.jade                 # Layout
│   │   ├── scripts.jade                # Scripts
│   │   └── styles.jade                 # Styles
│   ├── pages                           # Pages of application
│   |   |── index.jade                  # Index
│   |   └── contacts.jade               # Contacts
│   ├── assets                          # Assets
│   |   |── css                         # CSS
│   |   |── fonst                       # Fonts
│   |   |── icons                       # Icons
│   |   └── img                         # Images files. Will minify
│   ├── stylus                          # Stylus
│   │   |── base                        # Base styles
│   │   |── helpers                     # Helpers mixins
│   │   └── index.styl
│   │   └── layout.styl
│   │   └── variables.styl
├── build                               # Build folder
├── gulpfle.js                          # Gulp config and tasks
│   ├── index.js                        # Gulp main tasks and watchers
│   └── paths.js                        # Paths config
├── ftp.config.js                       # Config for FTP connection
├── README.md
└── webpack.config.js
You can’t perform that action at this time.