├── .gitignore ├── README.md ├── package.json ├── src ├── components │ ├── BlackTriangle.js │ └── BlackTriangle.less ├── index.html ├── main.js └── theme │ └── main.less └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # webpack-black-triangle 2 | 3 | A minimal, development-focussed template to get you up and running with Webpack, Babel & LESS. 4 | 5 | Read how it works at [jamesknelson.com](http://jamesknelson.com/write-es2015-with-instant-feedback-using-webpack-dev-server-and-babel/). 6 | 7 | **Things it does**: 8 | 9 | - Makes ES6 "just work" 10 | - Compiles and includes your LESS files 11 | - Serves your files 12 | - Automatically recompiles/reloads your page when JavaScript/LESS files change 13 | - Decide where your files go (to a degree) 14 | 15 | **Things it doesn't do**: 16 | 17 | - Handle your deployment build 18 | - Include any runtime dependencies (other than babel's polyfill) 19 | 20 | ## Install with three lines 21 | 22 | Just `git clone` & `npm install`: 23 | 24 | ``` 25 | git clone https://github.com/jamesknelson/webpack-black-triangle.git 26 | cd webpack-black-triangle 27 | npm install 28 | ``` 29 | 30 | ## Then use it with one more 31 | 32 | Run the dev server: 33 | 34 | ``` 35 | npm start 36 | ``` 37 | 38 | Then open [localhost:8080](http://localhost:8080/). 39 | 40 | ## Why a black triangle? 41 | 42 | Because [this](http://rampantgames.com/blog/?p=7745). 43 | 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-black-triangle", 3 | "version": "0.1.0", 4 | "description": "A minimal webpack/ES6 project template with a spinning black triangle", 5 | "main": "src/main.js", 6 | "dependencies": { 7 | "babel-polyfill": "^6.0.16" 8 | }, 9 | "devDependencies": { 10 | "autoprefixer-loader": "^2.0.0", 11 | "babel-core": "^6.1.2", 12 | "babel-loader": "^6.0.1", 13 | "babel-preset-es2015": "^6.1.2", 14 | "css-loader": "^0.15.1", 15 | "less": "^2.5.1", 16 | "less-loader": "^2.2.0", 17 | "node-libs-browser": "^0.5.2", 18 | "style-loader": "^0.12.3", 19 | "webpack": "^1.10.0", 20 | "webpack-dev-server": "^1.10.1" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/jamesknelson/webpack-black-triangle.git" 25 | }, 26 | "scripts": { 27 | "start": "node_modules/webpack-dev-server/bin/webpack-dev-server.js" 28 | }, 29 | "keywords": [ 30 | "webpack", 31 | "webpack-dev-server", 32 | "template", 33 | "starter", 34 | "es6", 35 | "babel" 36 | ], 37 | "author": "James K Nelson ", 38 | "license": "MIT" 39 | } 40 | -------------------------------------------------------------------------------- /src/components/BlackTriangle.js: -------------------------------------------------------------------------------- 1 | export default class BlackTriangle { 2 | constructor(selector) { 3 | this.angle = 0; 4 | 5 | this.innerEl = document.createElement('div'); 6 | this.innerEl.className = "BlackTriangle-inner"; 7 | 8 | this.el = document.querySelector(selector) 9 | this.el.className = "BlackTriangle"; 10 | this.el.appendChild(this.innerEl); 11 | } 12 | 13 | rotate(amount) { 14 | this.angle = (this.angle + amount) % 360; 15 | } 16 | 17 | render() { 18 | this.innerEl.style.transform = `rotate(${this.angle}deg)`; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/BlackTriangle.less: -------------------------------------------------------------------------------- 1 | .BlackTriangle { 2 | position: absolute; 3 | height: 100%; 4 | left: 0; 5 | top: 0; 6 | width: 100%; 7 | overflow: hidden; 8 | 9 | &-inner { 10 | position: absolute; 11 | top: 50%; 12 | left: 50%; 13 | width: 277.2px; 14 | height: 277.2px; 15 | margin-top: -138.6px; 16 | margin-left: -138.6px; 17 | border-radius: 100%; 18 | 19 | &:before { 20 | position:absolute; 21 | z-index: 1; 22 | top: 50%; 23 | left: 50%; 24 | margin-top: -136px; 25 | margin-left: -120px; 26 | content: ""; 27 | width: 0; 28 | height: 0; 29 | border-style: solid; 30 | border-width: 0 120px 207.8px 120px; 31 | border-color: transparent transparent #000 transparent; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spinning Black Triangle 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import BlackTriangle from "./components/BlackTriangle"; 4 | 5 | const triangle = new BlackTriangle('#triangle'); 6 | 7 | window.setInterval( 8 | () => { 9 | triangle.rotate(1); 10 | triangle.render(); 11 | }, 12 | 20 13 | ); 14 | -------------------------------------------------------------------------------- /src/theme/main.less: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | min-height: 100%; 4 | margin: 0; 5 | } 6 | 7 | @import "../components/BlackTriangle.less"; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | entry: [ 6 | 'babel-polyfill', 7 | './src/theme/main.less', 8 | './src/main', 9 | 'webpack-dev-server/client?http://localhost:8080' 10 | ], 11 | output: { 12 | publicPath: '/', 13 | filename: 'main.js' 14 | }, 15 | debug: true, 16 | devtool: 'source-map', 17 | module: { 18 | loaders: [ 19 | { 20 | test: /\.js$/, 21 | include: path.join(__dirname, 'src'), 22 | loader: 'babel-loader', 23 | query: { 24 | presets: ['es2015'] 25 | } 26 | }, 27 | { 28 | test: /\.less$/, 29 | loader: "style!css!autoprefixer!less" 30 | }, 31 | ] 32 | }, 33 | devServer: { 34 | contentBase: "./src" 35 | } 36 | }; 37 | --------------------------------------------------------------------------------