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.
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.
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.
This feature is currently the default. Coming soon, the starter project will come with dome predefined Abstracts and helper classes.
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 .sass format.
Bundlers and Task Runners
npm i -g webpack webpack-dev-server).
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 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 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 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 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 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 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.