Start Your Project

After installing the Clarion CLI running the following command will provide you with the default project:

clarion new MyProject

The default project comes pre-configured for SASS using the .scss format and WebPack as the compiler and bundler. There are some additional features that come out-of-the-box for you to help simplify your development process.

Options

One fo the great things about the Clarion CLI is the amount of flexibility you have with your project tooling. There are so many options on the tools to use in your projects, it can be very overwhelming. The objective of Clarion CLI is to help simplify that process and reduce the time to start-up a new project.

Project Contents

-O, --only

This will only install the style architecture. If you are using a framework or your team has a specific architecture pattern, this will allow you leverage the style architecture while still adhering to an existing specifications.

-E, --empty

This feature is currently the default. Coming soon, the starter project will come with dome predefined Abstracts and helper classes.

Style Format

-C, --scss

This will configure the style files to use .scss format. This is a SASS format. Many people prefer this format as the syntax is more consistent with standard CSS. This syntax is great for those who are starting out with SASS.

-A, --sass

This will configure the style files to use .sass format. This is also (obviously) a SASS format. This is more of a minimalist approach for writing SASS.

-L, --less

This will configure the style files to use .sass format.

Bundlers and Task Runners

-W, --webpack

Webpack is the default bundler for your project. Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. This project uses webpack and webpack-dev-server CLI tools and will need to be installed (npm i -g webpack webpack-dev-server).

-P, --parcel

Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration. This project uses the parcel CLI tool and will need to be installed (npm i -g parcel-bundler).

-U, --gulp

Gulp is a task runner built on Node.js and npm, used for automation of time-consuming and repetitive tasks involved in web development like minification, concatenation, cache busting, unit testing, linting, optimization etc. This project uses the gulp CLI tool and will need to be installed (npm i -g gulp-cli).

-R, --grunt

Grunt is also a task runner similar to Gulp and is used to automatically perform frequently used tasks such as minification, compilation, unit testing, linting, etc. It uses a command-line interface to run custom tasks defined in a file (known as a Gruntfile). This project uses the grunt CLI tool and will need to be installed (npm i -g grunt-cli).

PostCSS

PostCSS is a post-compiler for your CSS. This allows additional functionality to be added to your styles without needing additional work on your end. PostCSS transforms styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

Autoprefixer

Autoprefixer is a plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. This will help make your application more consistent across each browser.

CSSNano

CSSNano takes your nicely formatted CSS and runs it through many focused optimizations, to ensure that the final result is as small as possible for a production environment.

Pixrem

Pixrem is a CSS post-processor that, given CSS and a root em value, returns CSS with pixel unit fallbacks or replacements. It's based on browser data so only needed fallbacks will be added. Basically, it's for IE8 or less, and for IE9 & IE10 in the font shorthand property and in pseudo-elements.