Complete boilerplate for front-end development.
- Frontee Boilerplate + Statamic
🚶 Author Stories
The creation of this boilerplate is based on my experiences of development which half of the clients require only Plain
HTML, CSS and JS file for their websites as requirements. However, the given deadline is only 5 days working days which is too tight for me. Below the issues that I have been encounter.
- Conflict in name and variables in SASS.
- Repopulating content each time there is styles changes because of huge amount of content.
- Keep F5 to refresh the browser.
- Resources file to big which increase the website load times.
- Messy code which make it hard to find and read.
The boileplate is currently solve my listed problem above. Now, you only focus on your coding and output. From 5 days now you can finish it in 3 days.
🎯 Objectives of this Front-end boilerplate
- Clean Code.
- Smooth Code Experience.
- Reduce development times.
- Comply to the best practice of code guidelines.
- Increase the performance of your website.
🛠️ What is the features included?
- ✔️ Statamic: A Comprehensive CMS for populating your content with Antlers Templating.
- ✔️ Sass: Organized code and file structures.
- ✔️ Stylelint: Clean and standardize your sass code.
- ✔️ Laravel Mix: Simple command, Versioning and Minify.
- ✔️ Browsersync: Enabled (Auto reload browser).
- 🚧 Codesplitting: Reduce Compilation time by compiling only for file that has been changed.
- ✔️ PurgeCss: Remove unused class from CSS file to reduce load time on the client.
- ✔️ Versioning: Cache busting
- ✔️ Static Site Generation: Compile your website into static html files. (Optional)
💻 What to do next?
- Setup localhost (Homestead recommended).
- Clone/install this boilerplate on your local machines.
webpack.mix.jsfiles and configure the browsersync setting based-on your localhost machines.
npm run watchto enable auto reload browser on file changes.
npm run prodto compile the resources file for productions (minify, versioning and purge unused class).
npm run lint-fixto fix error and detect sass code that not comply with standard guideline.
php please ssg:generateto generate static website files.
🔎 Tips and Tricks
- ALWAYS START YOUR DEVELOPMENT FROM MOBILE FIRST DESIGN.
- SASS: Use
../for your url to allow the url processing to prevent broken link. For example,
url(../path/file.png). Important for static Site generation.
- SASS: Use BEM Naming Convention or use SuitCSS
npm run watch-pollinstead of
npm run watchif your browser doesnt autoreload when you make file changes.
- SASS: Use
~to import files from node_modules. For example,