[object Object]

# Start Your Project

First, make sure you have the clarion CLI installed:

npm install -g clarion  or  yarn global add clarion

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

clarion new

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

# Starter Project

If you are starting an application from scratch, this is a great boilerplate! This will install the style architecture, the style framework, as well as any task runners/bundlers and optimizers needed to begin developing a web application.

In the Starter Project the following tools will also be installed to optimize your code:

# 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.

# Styles Only

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

# Architecture Only

This option will only scaffold out the style architecture and will not contain any of the style framework code.

# Style Format


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.


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.


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

# Bundlers and Task Runners

# 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).

# 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).

# 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).

# 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).