Uirev is a painless front-end boilerplate kit. It can make your developing experience more easy and fast.
| Feature | Summary |
|---|---|
| Responsive boilerplate | A responsive boilerplate optimized for the multi-screen web. Powered by Twitter Bootstrap. |
| Pug suppoprt | Compile Pug into HTML with ease, write Pug syntax and mix it with Javascript to give more freedom. (Run gulp pug to compile) |
| Sass support | Compile Sass into CSS with ease, bringing support for variables, mixins and more. (Run gulp scss:dev for developing or gulp scss:build for production) |
| Image compression | Never think about compressing your image manually, just copy your image into assets/img and it'll be compressed automatically. Thanks to imagemin for such a great tool. |
| ECMAScript 6 | Write in new generation of Javascript with a lot of syntactic sugar. |
| Live Browser Reloading | Reload the browser in real-time whenever you edit your file without any need of extension. Brought to you by Browsersync. (Run npm run serve for developing or npm run build for production) |
Make sure you have installed node.js on your computer. Download
the kit or clone this repository. Run npm install to make everything run smoothly. Then, build your project in ./src directory.
To change between developing and production environment, take a look in ./src/pug/_env.pug.
The default configuration is dev environment but you set it true if you wanna use production environment.
gulp fontsto copy all fonts in./src/assets/scss/fontsto./dist/assets/fonts.
gulp img:hdto optimize and resize all images in./src/assets/img/hdto resolution 1920 x auto. It also convert them into .jpg format.gulp img:mdhas same functiont asgulp img:hdbut the differences is it resize the image to resolution 1320 x auto.gulp img:smto optimize all images in./src/assets/img/sm. It doesn't resize and convert anything because I think small image usually used for background pattern, icon and logo.gulp imgto run all of img command above.
gulp js:vendor-cpto copy all JS vendor assets in./src/assets/js/vendor/cpto./dist/assets/js.gulp js:dev-vendorto convert all of vendor script into ECMAScript 5 then concat them into one file named vendor.js.gulp js:devto convert main.js into ECMAScript 5 and it also runjs:vendor-cpandjs:dev-vendor.gulp js:buildto convert all of vendor script and your main.js into ECMAScript 5 and concat them into one file named vendor.min.js.
gulp scss:dev-vendorto compile all SCSS vendor assets in./src/assets/scss/vendorto CSS files and place the output to./dist/assets/css. It also combine all separated media queries found in them.gulp scss:devto compile all SCSS Vendor assets and your custom stylesheet.gulp scss:build-vendor, it has same function asgulp scss:dev-vendorbut the differences is it combine all SCSS files into one css file named vendor.min.css.gulp scss:build, it has same function asgulp scss:dev.
gulp pugto compile and combile all pug files in./src/puginto one file named index.html.
npm run cleanorgulp cleanto clean your dist project directory.npm run serveor justgulpto run all of dev command above then serve it as localhost server.npm run buildorgulp build, it has same function asnpm run servebut the differences is it run all of build command.
The content of this project itself is licensed under the Creative Commons Attribution 3.0 license, and the underlying source code used to format and display that content is licensed under the MIT license.