Ahoy! This kit is my all-new/all-old web starter kit. Use it well!

With the help of Gulp and 11ty, Asteroids includes SCSS processing, JS minification and Nunjucks, a super cool template engine created by Mozilla.

To run Asteroids you'll need to have Node and Gulp installed:

• NodeJS LTS version should be okay.
• Gulp globally installed.

🤓 Running on Windows? Just remember to use the Git Bash console instead of that horrible thing called PowerShell.

Go to the official NodeJS website and download the version that best suits you. The LTS version should work fine. Install it, and your done :)

You can check if everything went okay by opening a terminal window and typing:

node -v

We'll need Gulp to process our SCSS and JS files because Eleventy doesn't do this. Go to the official Gulp website and follow the installing instructions. They should be something like open a terminal and type:

npm install --global gulp-cli

But it's best to check it out ;)

You can also check that everything went the way it was supposed to by opening a new terminal window and typing:

gulp -v

Once you've installed both NodeJS and Gulp, let's run this starter kit:

1. Download or clone the repository.
2. Install the local dependencies with $ npm i.
3. Run the kit development stuff with $ npm start.

$ npm start

Launch Eleventy in serve mode and run some Gulp tasks to keep an eye on your SCSS/JS files to process and reload your project on port 8080

$ npm run build:pro

Delete and reprocess the dist folder with optimized versions of your HTML/CSS/JS files.

$ gulp zipit

Delete and reprocess the public folder with optimized versions of your HTML/CSS/JS files and compress it in a .zip file.

The task picks the name of the project from the package.json "name" property.

It will generate an ignored DDMMYY-hm-project-name.zip file

The 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:

/.
├── _src/
│   ├── _data/
│   │   └── settings.js
│   ├── _templates/
│   │   └── layouts/
│   ├── assets/
│   │   ├── _domain/
│   │   ├── _icon/
│   │   ├── _scripts/
│   │   ├── _scss/
│   │   ├── css/
│   │   ├── fonts/
│   │   ├── images/
│   │   └── js/
│   └── index.njk
└── dist/
    ├── CNAME
    ├── assets/
    │   ├── css/
    │   ├── fonts/
    │   ├── images/
    │   └── js/
    ├── favicon.ico
    ├── humans.txt
    └── index.html

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 media query combiner tool from @hail2u css-mqpacker.

A few linter configurations are also included in Asteroids: Eslint, Stylelint and Markdown lint. You may need certain plugins or extensions for your code editor in order to use them.

👉 There is no such thing as a pre commit configuration or autoformat setting, these linters are only meant to show "problems" as you edit any JS/SCSS/MD file.

That's up to you :), although you can find a "browserlist" property for the autoprefixer in the package.json file.

So, what is next?

• Use SASS Dart.
• Process JS files: minify and obfuscate?
• Add a GitHub Pages action.
• Mobile icons + PSD source file.
• Gulp task to generate a timestamped deploy folder. @done
• Add CSS Linters. @done
• Add JS Linters. @done
• Use EJS/Nunjucks instead of PUG. @done
• Quit using Jquery. @done
• Migrate to 11ty. @done
• Update modernizr checkers. @wontDoIt
• Fix PUG/HTML reload loop. @wontDoIt

Do you miss anything? Feel free to request a feature or contribute to making it better ;)