GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → izica → Html Sass Babel Webpack Boilerplate

izica / Html Sass Babel Webpack Boilerplate

Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload

Programming Languages

javascript
184084 projects - #8 most used programming language
es6
455 projects
es7
32 projects

Labels

csswebpackscssboilerplatesasseslintcss3modulewebpack4modulesboilerplate-template

Projects that are alternatives of or similar to Html Sass Babel Webpack Boilerplate

Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+2802.86%)
Mutual labels:  webpack, webpack4, boilerplate, scss, sass
Static Site Boilerplate
A better workflow for building modern static websites.
Stars: ✭ 1,633 (+4565.71%)
Mutual labels:  webpack, eslint, boilerplate, sass
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: ✭ 102 (+191.43%)
Mutual labels:  webpack, webpack4, boilerplate, sass
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+1982.86%)
Mutual labels:  webpack, scss, sass, css3
Webpack Boilerplate
A minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board
Stars: ✭ 404 (+1054.29%)
Mutual labels:  webpack, webpack4, boilerplate, sass
Adminkit
🧰 AdminKit is a free & open source Bootstrap 5 Admin Template
Stars: ✭ 395 (+1028.57%)
Mutual labels:  webpack, boilerplate-template, scss, sass
Frasco
Quick starter for Jekyll including full setup for Sass, PostCSS, Autoprefixer, stylelint, Webpack, ESLint, imagemin, Browsersync, etc.
Stars: ✭ 123 (+251.43%)
Mutual labels:  webpack, eslint, scss, sass
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (+554.29%)
Mutual labels:  webpack, webpack4, eslint, boilerplate
React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: ✭ 165 (+371.43%)
Mutual labels:  webpack, eslint, boilerplate, sass
Iceberg
Front-End Boilerplate built with React + Babel + Webpack + SASS
Stars: ✭ 144 (+311.43%)
Mutual labels:  webpack, eslint, boilerplate, sass
Vue Cnode
🔥Vue.js打造一个开源的CNode社区。CNode by Vue.js
Stars: ✭ 249 (+611.43%)
Mutual labels:  webpack, scss, sass, css3
Frontend Webpack Boilerplate
Simple starter webpack 5 project template supporting SASS/PostCSS, Babel ES7, browser syncing, code linting. Easy project setup having multiple features and developer friendly tools.
Stars: ✭ 242 (+591.43%)
Mutual labels:  webpack, boilerplate-template, boilerplate, sass
Threejs Webpack Es6 Boilerplate
A basic boilerplate for a Three.js project compiled with Webpack and transpiled via Babel to enable using ES6 syntax.
Stars: ✭ 267 (+662.86%)
Mutual labels:  webpack, eslint, boilerplate, sass
Budgeting
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Stars: ✭ 971 (+2674.29%)
Mutual labels:  webpack, eslint, sass
Tabler
Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap
Stars: ✭ 24,611 (+70217.14%)
Mutual labels:  boilerplate-template, scss, sass
Motherplate
A bare bones responsive SCSS boilerplate for web designers
Stars: ✭ 392 (+1020%)
Mutual labels:  boilerplate, scss, sass
React Typescript Web Extension Starter
🖥 A Web Extension starter kit built with React, TypeScript, SCSS, Storybook, Jest, EsLint, Prettier, Webpack and Bootstrap. Supports Google Chrome + Mozilla Firefox + Brave Browser 🔥
Stars: ✭ 510 (+1357.14%)
Mutual labels:  webpack, eslint, scss
Webpack Starter Basic
A simple webpack starter project for your basic modern web development needs.
Stars: ✭ 552 (+1477.14%)
Mutual labels:  webpack, webpack4, sass
Wxapp Boilerplate
使用 webpack, babel, scss 开发的微信/支付宝小程序项目脚手架
Stars: ✭ 367 (+948.57%)
Mutual labels:  webpack, boilerplate, scss
React Webpack Typescript Starter
Minimal starter with hot module replacement (HMR) for rapid development.
Stars: ✭ 632 (+1705.71%)
Mutual labels:  webpack, boilerplate, sass
View All Similar Projects ➔

Webpack boilerplate with SASS(SCSS), HTML modules, Babel

Features

  • Easy to start yarn install + yarn start (npm install + npm start)
  • Don't worry about webpack config, just code
  • Custom HTML Modules plugin
        <!DOCTYPE html>
        <html>
        <head>
            <title>Example doc</title>
        </head>
        <body>
            <include>_header.html</include>
            <h1>Catalog products</h1>
            <include>_products-filter.html</include>
            <include>_products-list.html</include>
            <include>_footer.html</include>
        </body>
        </html>
  • HTML hot reload(Livereload)
  • SCSS (SASS)
  • jQuery already installed
  • Babel
    • ES6
    • ES7
    • Class syntax + Class properties
    • etc
  • Autoprefixer
  • Minifier
  • PostCSS
  • Eslint (airbnb-base config)
  • Eslinting on the fly (while dev)
  • Pretty console output (Friendly errors webpack plugin)

Adding libraries to JS

  1. Find the desired library at https://www.npmjs.com/ (example: https://www.npmjs.com/package/moment)
  2. Install yarn add moment or npm install moment
  3. Import library into your code import moment from 'moment'
  4. Use it

Usage

Installation

npm install
or
yarn

Start dev server for development

npm start
or 
yarn start-yarn

Build

npm run build
or
yarn build
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].