starter kit for frontend development.
Switch branches/tags
Nothing to show
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.
src
.babelrc
.browserslist
.eslintrc
.gitignore
.sprite-png-template
.sprite-svg-template
README.md
fractal.config.js
gulpfile.js
package.json
webpack.common.js
webpack.dev.js
webpack.prod.js
yarn.lock

README.md

Starter kit for front end development.

Features

Automation

  • Gulp
  • Webpack
  • Browsersync(html/ssi/php)

HTML

  • Pug
    • pug-linter

CSS

  • normalize.css
  • Sass(node-sass)
    • sass-bulk-import
    • node-sass-package-importer
    • sourcemaps
    • csso
    • postcss
      • autoprefixer
      • css-mqpacker
  • Sprite(png/svg)

JavaScript

  • BabelJS
  • ESLint(eslint-config-airbnb)

Images

  • imagemin
    • pngquant
    • mozjpeg
    • svgo
    • optipng
    • gifsicle

Component Guide

  • fractal

Requirements

  • node >= 9.3.0
  • gulp >= 3.9.1
  • sass >= 3.4.24

Getting Started

# clone
$ git clone git@github.com:raym-design/frontend-starter-kit.git
$ cd frontend-starter-kit

# Install Dependencies
$ yarn install

# Run the Application
$ yarn run start

# Deploy for production
$ yarn run dist

Directory Structure

.
├── .babelrc
├── .browserslist
├── .eslintrc
├── .gitignore
├── .sprite-png-template
├── .sprite-svg-template
├── fractal.config.js
├── gulpfile.js
├── package.json
├── README.md
├── dist -> client-side public
├── docs -> fractal components guide
├── src
│   ├── docs
│   │   ├── components
│   │   │   ├── _preview.hbs.html
│   │   │   └── headings.hbs
│   │   └── index.md
│   ├── img
│   │   └── sprite
│   │       ├── png
│   │       └── svg
│   ├── js
│   │   └── app.js
│   ├── pug
│   │   ├── inc
│   │   │   ├── core
│   │   │   │   ├── _base.pug
│   │   │   │   ├── _config.pug
│   │   │   │   └── _mixin.pug
│   │   │   ├── layout
│   │   │   │   ├── _footer.pug
│   │   │   │   └── _header.pug
│   │   │   └── module
│   │   ├── index.pug
│   │   └── setting.json
│   └── scss
│       ├── app.scss
│       ├── components
│       ├── foundation
│       │   ├── base
│       │   │   └── _default.scss
│       │   ├── functions
│       │   │   ├── _rem.scss
│       │   │   ├── _sprite.scss
│       │   │   └── _z-index.scss
│       │   ├── mixins
│       │   │   ├── _clearfix.scss
│       │   │   ├── _media-queries-only.scss
│       │   │   ├── _media-queries.scss
│       │   │   ├── _placeholder.scss
│       │   │   ├── _responsive-iframe.scss
│       │   │   └── _sprite-image-replace.scss
│       │   └── variables
│       │       └── _variables.scss
│       ├── layout
│       │   ├── _container.scss
│       │   ├── _footer.scss
│       │   ├── _header.scss
│       │   └── _sidebar.scss
│       ├── utility
│       └── venders
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
└── yarn.lock