- Installed owl.carousel.scss for sliders.
- Changed settings of bootstrap in node_modules/bootstrap/scss/_variables.scss
$container-max-widths: ( sm: 1145px, md: 1145px, lg: 1145px, xl: 1145px ) !default;
Barebones starter template for static site integrations.
- NodeJS must be installed.
- Yarn globally installed.
- A PHP server.
- Clone the repo and run
yarn - Run php server. Recommended
valet link - Enter your site URL in
webpack.mix.js
This build provides you with a compiler that watches your files and serves up your domain on localhost with Browsersync enabled.
- Run
yarn watchand openhttp://localhost:3000
- All sass files and assets should go under
./src - There is some simple page routing under
./pageswith apartial()function to help grab common elements. Markup should be built under/pagesand/partials - When assets are compiled, they become versioned under a mix-manifest.json file, so there's a
asset()helper (seen in/partials/head.php) that you can use for any assets (images, css, js, etc).
When going live, building the project will compile and optimize all assets and put them in /dist.
Note: /dist isn't versioned. So to deploy you need two steps:
git pullyarn production
However, if you can't run yarn or npm on the production server, simply add /dist to versioning.
To install third party libraries, use yarn add {package name}. You can include sass from node_modules with ~package/path.scss.
Use the ES6 syntax import to import libraries into your main.js.
For more documentation, refer to Laravel Mix.
The php involved is very minimal. You can repurpose or add to what's already there, which is just a simple include of a function that get's the manifest file - that way you can grab assets with the asset() function.