tamino-martinius / ui-snippets-template

Webpack Template with HTML (just body), CSS/PostCSS and JS/TypeScript

Simple CodePen like Template which supports postCSS and TypeScript to build UI Snippets

Use this Template to quickly build UI snippets.

Features

• TypeScript (compiling directly to ES5)
• postCSS with several plugins:
  • import
  • nesting
  • custom properties
  • each
  • cssnext
  • autoprefixer
• Webpack
• EditorConfig
• Linting
  • TSLint: general rules
  • Stylint: CSS rules
• VS Code Extensions
  • VS Code TSLint extension
  • stylelint
  • stylefmt

Getting Started

Install

• Clone repository
  • git clone https://github.com/tamino-martinius/ui-snippets-template
  • or go to GitHub and download as zip
• Rename and enter folder
• install packages npm install Node.js >= 8.10 suggested for module syntax and async / await without TypeScript

Open the project with your Text Editor

Tip for VS Code Users: Add code command to your Terminal by pressing cmd + shift + p and search for Shell Command: Install 'code' command to PATH.

Now you can open the project using this command:

code .

Use without TypeScript

Rename /src/index.ts to /src/index.js before starting the Server.

Use without PostCSS

Just don't use the additional postCSS features.

Start development server with Hot Reloading

npm run start

Build for production

npm run build

Deploy to github pages

npm run deploy

Create Epic UI snippets