Aurora Project is a clean, modern, design-system focused project boilerplate that's both Sass and ES6-ready. It comes packed with tools that help developers work better together, including built-in linting and documentation support.
This project features a several goodies that will help improve your development workflow, so you can spend time on what you do best--developing websites--instead of configuring tools.
- Webpack support
- Sensible configuration
- Flexible architecture
- Linting with Stylelint
- Focused on Vanilla JS, but ready for anything
- Supports ES Next with Babel
- Linting with ESLint
- Uglification / minification
- Icon (SVG) concatenation & minification
- Image minification
- KSS Node for easy styleguide creation
- Lightweight CSS Normalization with Sanitize.css
- Test-driven development features
- Project CLI
To get started, clone this repo to your computer:
git clone https://github.com/carrieforde/Aurora-Project.git /path/to/project
Once you have cloned the project, move into the project directory and install all the Node dependencies:
cd /path/to/project npm install
aurora/ ├── src/ │ ├── sass │ │ ├── main.scss │ │ ├── _config.scss │ │ ├── _base.scss │ ├── index.js │ ├── index.html │ ├── main.css ├── .babelrc ├── .eslint.json ├── .gitignore ├── .prettierrc ├── .stylelintignore ├── .stylelintrc ├── Gruntfile.js ├── kss-config.json ├── package-lock.json ├── package.json ├── README.md
Tasks & Bundling
Once you have run
npm install, you're ready to start using Aurora's taskrunning features. Aurora includes several
node tasks, and bundling with Webpack.
npm run build
Generates bundled, production-ready files with
npm run dev
webpack to spin up a development server at
http://localhost:9000, and initiates
webpack --watch. Changes to files in
./src will be bundled automatically, and the site will be reloaded.
/src directory. Only errors will be displayed in the console.
Keep formatting consistent between developers with Prettier. Enforces whether to use tabs or spaces, the number of spaces to use, single vs. double quotes, etc. Automatically fixes JS, JSX, and SCSS files.
npm run jsdoc
npm run kss
Looks through Sass files and compiles a KSS styleguide based on Sass comments.
npm run kss:watch
Automatically watches Sass files for changes and rebuilds KSS styleguide.
npm run sassdoc
Generates Sassdoc documentation based on Sassdoc annotations in all
npm run stylelint
Runs Stylelint to enforce rules for style files (.css, .scss, etc.) in the
/src directory. Flags errors in the console.
npm run stylelint:fix
A subtask for Stylelint that not only checks against style rules, but automatically fixes fixable issues.