:fire: Template based on webpack, pug, stylus, es6, postcss for multi page applications
Simple template based on webpack, pug, stylus, es6, postcss for multi page applications
For questions, bugs and enhancements use issues.
git clone [email protected]:evgen3/mpa-frontend-template.git your-project-name
cd your-project-name && rm -rf .git
yarn
yarn build
- build project for production (includes UglifyJSPlugin, cssnano);yarn watch
- build and start watching for development (includes sourcemaps);yarn start
- build, watch and local server for development (includes reload on change files);yarn lint
- lint js code in src folder with airbnb rules.In file pug/includes/require.pug located function, usage:
img(src='upload/sample.jpg' srcset=`upload/[email protected] 2x` alt='')
.block(style='background-image: url(upload/sample.jpg);')
For short include in file pug/mixins/img.pug located mixin, usage:
+img('sample.jpg')(alt='image').some-class
Attention! This mixin requires a picture in a double size (for srcset) and the link is already included upload/
directory.
Install dependency (for example, swiper):
yarn add swiper
Import dependency in main.styl once:
@require '~swiper/dist/css/swiper.css'
Symbol ~
in styl points to a node_modules folder.
Install dependency (for example, sticky-kit):
yarn add sticky-kit
Import dependency in main.js once:
import 'sticky-kit/dist/sticky-kit';
Install dependency (for example, swiper):
yarn add swiper
Import in the file in which you need the dependency:
import Swiper from 'swiper/dist/js/swiper';
@ in path points to src folder, with it you can create an absolute path. CSS:
src: url("~@/font/rouble-webfont.woff") format("woff")
JS:
import module from '@/js/module';
Put the icon in /ico
folder
And add code in your template:
<svg class="your-class" width="193" height="40">
<use xlink:href="#your-icon-file-name"></use>
</svg>
Or you can use pug-mixin:
+icon('your-icon-file-name')(width=193 height=40).your-class