Git Product home page Git Product logo

simplestarterpack's Introduction

SSP » Simple Starter Pack

Simple HTML5 + (S)CSS + TypeScript starter pack (boilerplate) with pre-configured usefull tools & libraries:

  • Live reload & sync (using Browsersync)
  • SCSS compile with autoprefixer, sourcemaps and minification
  • TypeScript compile (using Webpack and Babel) with sourcemaps and minification
  • JPG / PNG / GIF images optimization (with imagemin)
  • SVG optimization (with SVGO)
  • Predefined tasks for VSCode editor
  • Included Sass libraries:
    • normalize.css - A modern, HTML5-ready alternative to CSS resets
    • include-media - Simple, elegant and maintainable media queries in Sass
    • mdcolorize - Simple Sass (SCSS) function for fast usage material design colors
  • Configured packages:

Installation & Usage

  • npm: npm install simple-starter-pack
  • yarn: yarn add simple-starter-pack

or

git clone https://github.com/PixelT/SimpleStarterPack.git path/to/your/project
cd path/to/your/project
yarn install

Gulp tasks

  • gulp or gulp build - it compiles & minifies SCSS and TypeScript, sourcemaps are disabled.
  • gulp dev - it runs Browsersync in developer mode, with sourcemaps enabled.

Static vs Dynamic sites

By default, SSP are using html file(s) and run in server mode - no action is needed here. If you have already running local PHP server (MAMP / XAMP / WAMP etc.) you can use dynamic mode - change index.html to index.php and run gulp dev task with --proxy argument (see below)

Pass custom settings

It's possible to pass to Browsersync custom settings, by adding additional arguments into gulp dev task:

  • --proxy or --proxy="your_proxy_address" - custom proxy URL address (default is <your_folder_name>.test)
  • --port="your_port" - custom port for proxy (default is 3000)

simplestarterpack's People

Contributors

pixelt avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.