Asteroids
Ahoy! This kit is our all-new/all-old web starter kit. Use it well!
Asteroids include SASS, jQuery and Nunjucks, a super cool template engine created by Mozilla.
Quickstart
Install Node.js and Gulp4 to run this starter kit.
- Download or clone the repository
- Install the local dependencies with
$ npm i - Run the kit with
$ npm start
Tasks
Launch a web server for development
$ npm startLaunch a web server with browserSync to work on your project. Several watchers will have their eyes on your NJK/SCSS/JS files to reload your connected browsers when needed.
Process a production-ready distribution
$ npm run deployDelete and reprocess the public folder with optimized versions of your HTML/CSS/JS files.
Compress a production-ready distribution
$ gulp zipitDelete and reprocess the public folder with optimized versions of your HTML/CSS/JS files and compress it in a .zip file.
You can customize the name of the ZIP document editing the config.json file ;)
Optionally you can add a keyword to this ZIP file:
$ gulp zipit -b keywordIt will generate an ignored DDMMYY-keyword-project-name.zip file
Folder structure
Our gulpfile.js uses a configuration JSON file to set source and destination files of the project. Check config.json out and edit what you need.
The project folder structure looks like this:
/
|- _source
| |- assets
| | |- icons
| | |- img
| | `- js
| | `- vendor
| |- js
| | |- components
| | `- plugins
| |- scss
| | |- components
| | |- core
| | |- pages
| | `- vendors
| `- templates
| |- layout
| `- partials
`- public
`- assets
|- css
|- img
`- js
CSS
Asteroids do not include a CSS reset stylesheet anymore, but we have added two awesome tools:
- A csscomb JSON file to use with your code editor as your own risk :)
- The risky gulp-combine-mq package to group and combine all your media queries.
JS
Asteroids use JQuery, Modernizr and two JS files, main.js, and plugins.js, located before the </body> tag. You can find the custom build of Modernizr in the <head> section of the page.
| Item | Version | URL |
|---|---|---|
| JQuery | v3.2.1 | https://jquery.com |
| Modernizr | v3.5.0 | https://modernizr.com |
| Width_snitch | v1 | https://github.com/oneeyedman/Width-Snitch/ |
| Breakpoints | v1.0 | https://github.com/xoxco/breakpoints |
| jQuery Cookie Plugin | v1.4.0 | https://github.com/carhartl/jquery-cookie |
Browser Support
That's up to you ;)
TODO
So, what is next?
- Gulp task to generate a timestamped deploy folder
- Add CSS Linters
- Add JS Linters
- Use EJS/Nunjucks instead of PUG
- Mobile icons + PSD source file
- Quit using Jquery
- Update modernizr checkers
-
Fix PUG/HTML reload loop
Request a feature
Do you miss anything? Feel free to request a feature or contribute to making it better ;)