This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
clarion with all
npm packages installed. Try it out:
clarion lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
A simple CLI for scaffolding front-end projects using the Clarion Style Architecture.
Check out the official Documentation here: www.projectclarion.com
Install Node.js, if you don't already have it installed.
In your terminal or command prompt type:
npm install -g clarion
clarion new MyProject
Your dependencies will automatically be installed!
After your dependencies are installed you can run your project.
cd MyProject npm run dev
The project architecture implements the Clarion Style Architecture.
MyProject/ |--build/ | |--src/ | |--sass/ | | |--00_Abstracts/ # Variables, Functions, Mixins, and Placeholders | | | | | |--01_Base/ # Resets/Normalize, Typography Rules, Etc. | | | |--index.scss # Manifest File | | | | | |--02_Vendors/ # Style sheets provided by a third party such as themes or plug-ins | | | |--index.scss # Manifest File | | | | | |--03_Elements/ # Styles for HTML tags, such as a form label, an input or a button | | | |--index.scss # Manifest File | | | | | |--04_Components/ # Cards, Carousels, and Navbars | | | |--index.scss # Manifest File | | | | | |--05_Layouts/ # Grid System, Header, Footer, and Sidebars | | | |--index.scss # Manifest File | | | | | |--06_Pages/ # Page specific styles | | | |--index.scss # Manifest File | | | | | |--07_Utilities/ # Utilities and Helper Classes | | | |--index.scss # Manifest File | | | | | |--styles.scss/ # Main Sass Manifest | | | |--scripts/ | |--components/ # Component-Specific Scripts | |--services/ # Reusable Functionality | |--main.js | |--index.html |--package.json |--postcss.config.js |--webpack.config.js
Additional style files can easily be manged through the CLI as well.
clarion add <directory> <file name>
clarion add element headings
This will create the file _headings.scss in the 03_Elements directory as well as add "@import '_headings.scss'" import statement to the directory manifest file so it can be included in your final CSS file.
Similar to adding a file, removing files can also be done through the CLI.
clarion remove <directory> <file name>
clarion remove element headings
This will remove the file _headings.scss in the 03_Elements directory as well as remove "@import '_headings.scss'" import statement from the directory manifest file.
To build your application for final use, run the build command.
npm run build
These are options you can run when initializing you project.
Project Content -O, --only generate the style architecture only (great for integrating into frameworks) -E, --empty generate an empty project without any of the start-up files (COMING SOON!!!) Style Format -C, --scss files are in .scss format (default) -A, --sass files are in .sass format -L, --less files are in .less format Task Runners and Bundlers -W, --webpack configure project for WebPack bundler (default) -P, --parcel configure project for Parcel bundler -U, --gulp configure project for Gulp task runner -R, --grunt configure project for Grunt task runner
1.0.3 - Replaced failing 'extract-text-webpack-plugin' with 'mini-css-extract-plugin' for Webpack 4.
1.0.1 - Fixed an type-o in the Grunt project.
1.0.0 - Final testing and added documentation via markdown files in each directory.
0.9.2 - Fixed bugs in SASS projects.
0.9.1 - Fixed Webpack build error.
0.9.0 - Refactored to use a better templating system and added unit tests.
0.8.7 - Updated documentation to include new site URL and install instructions.
0.8.6 - Temporarily removed "extract-text-webpack-plugin" as it is currently incompatible with Webpack v4.
0.8.5 - Updated Webpack project for changes in version 4.
0.8.4 - Added example for Vue.js.
0.8.1 - Added option for Parcel project creation.
0.7.1 - Added missing dependency for Gulp project.
0.7.0 - Revised dependency management so the latest packages are always installed, added Grunt, and added 'pixrem' to postcss.
0.6.1 - Fixed error in gulpfile.js.
0.6.0 - Modified add feature to find any directory name rather than only those in the Clarion Style Architecture.
0.5.1 - Added example for ASP.Net.
0.5.0 - Renamed 02_Themes to 02_Vendors.
0.4.4 - Added example for Jekyll.
0.4.3 - Added example for React.
0.4.2 - Added example for Angular.
0.4.1 - Added link to documentation site.