This is a node.js front-end toolchain that uses gulp as a build system. It speeds up the development of responsive layouts. This early version leverages the benefits of these npm packages:
The streaming build system.
PostCSS gulp plugin to pipe CSS through several processors, but parse CSS only once.
PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter, and Taobao.
PostCSS fractional grid system built with calc() by Cory Simmons (who also built Jeet). Supports masonry, vertical, and waffle grids.
Gulp plugin to run a webserver (with LiveReload)
Compile Stylus with gulp. Stylus is a dynamic stylesheet language that renders CSS.
PostStylus is a PostCSS adapter for Stylus. With it you can use any PostCSS plugin as a transparent Stylus plugin, and do custom post-processing of Stylus output.
A lightweight, up-to-date version of HTML5 Boilerplate with conditionally loaded polyfills and a nice general reset for amazing CSS3 support back to IE6.
- download or clone this repo
- download and install node.js
- open your command line and locate this repo on your local machine:
cd *\postcss-lost-stylus
- install the dependencies:
npm install --save-dev gulp gulp-postcss autoprefixer lost gulp-connect gulp-stylus poststylus
- run the default task:
gulp
- open your browser and go to:
localhost:8080
- edit and save:
postcss-lost-stylus\src\css\styles.styl- your browser will refresh automatically with your saved changes
- resize your browser window to view the responsive layout sample