The default list of supported browsers is listed in the `package.json` file: **Each `start` command regenerates the contents of the `dist` folder.** `styles` - contains the raw stylesheets `images` - contains several folders too: The `assets` folder contains several folders: All front-end assets are stored in an auto-generated `dist` folder. In order to add an SVG icon in your markup, you can do so by using the SVG `` tag:ħ. It is preferred to include the SVG sprite right after your opening `` tag If you're using another templating method (posthtml include, handlebars, ejs, etc) you need to do so according to its documentation. If you're using HTML files, paste the content of the SVG sprite in each of your HTML files. If you're using PHP files, include it in each of your PHP files: `` In order to use the SVG sprite you first need to include it in your markup. This action is performed each time the `start` command is invoked. SVG Sprite generating using ( )Īll svg files located in `assets/images/svg` are merged into a single `sprite.svg` file in `dist` directory. In order to use this you need to pass a new CLI argument `server` like this.ĥ. If you do not have a web server installed, then the files can be served via the browser-sync built-in server. If you wish to use a proxy in browsersync you can do it using the `url` CLI argument like this: The setup assumes that you have a web server (MAMP, XAMPP, etc) installed. Usage of the latest features in EcmaScriptĤ. The class name corresponds to the name of the PNG file. In order to use the PNG sprite, you need to do so by adding the relevant icons in your markup: If you do not wish to use the retina sprite, comment the retina-sprites($retina-groups) ` statement in `main.scss` file. The default setup includes retina sprite support which means that you should provide a retina version of each png icon. > "Write your CSS rules without vendor prefixes (in fact, forget about them entirely)" ( ) - fixes common flexbox issues on Internet Explorer ( ) - allows usage of utility mixins such as `clearfix` ( ) - locates and copies assets from `node_modules` ( ) boilerplate used as a starting point. The whole stylesheets file/folder structure is up to you PostCSS entry point is `main.css` located in `assets/styles` Go to your new project folder and executeġ. The `wmpan` binary is now available for you to use.
#UNPKG OR WEBPACK INSTALL#
In order to do this you must install Webpack MPA Next globally: It is possible to use the CLI tool included in Webpack MPA Next. Then navigate to the `webpack-mpa-next` folder and proceed with the rest of the instructions.
#UNPKG OR WEBPACK DOWNLOAD#
You can download this setup ( ) and extract it. This will install Webpack-MPA in your project folder and you will be able to start right away. Navigate to your new project's folder and execute the following command: Just keep in mind that the styles should be located in `assets/styles` and the scripts should be located in `assets/scripts`. The default setup uses PHP files, but you can easily switch to a file format of your choice.Īlso, you can always switch to another file/folder structure if the current one does not suit you. Bash terminal (Default on OSX/Linux, GitBash or similar on Windows) In order to use this setup you need to have installed the following dependencies:Ĥ. This boilerplate is suitable for static web applications, WordPress websites, etc. Opinionated multiple page application setup with Webpack using SASS, PostCSS, ES2017, PNG & SVG Sprites and more.