[object Object]

Getting Started

CSS doesn't suck (or at least it doesn't have to)! The days of the monolithic styles.css page are gone! Use Clarion to help you and your teams build better projects that are easier to maintain, collaborate in, and built for scale. The last thing you need to do is waste your time wrestling with styles that don't seem to cooperate.

Create Your Project

NOTE

Make sure you have Node.js and npm installed.

npm install -g clarion  or  yarn global add clarion
clarion new
# answer a few questions about your project
cd ProjectName
npm run dev

NOTE

The Style Framework is not currently available for LESS. However, the CLI and Style Architecture are fully supported.

Your New Project

The default project is configured with SASS using the .scss syntax and webpack as the compiler and module manager.

The project implements the Clarion Style Architecture.

ProjectName/
|
|--dist/
|
|--src/
|  |--sass/
|  |  |--00_Abstracts/       # Variables, Functions, Mixins, and Placeholders
|  |  |  |--mixins           # Reusable styles
|  |  |  |--functions        # Calculated style values
|  |  |  |--_variables.scss  # Style Architecture Variables
|  |  |  |--index.scss       # Directory Manifest File
|  |  |
|  |  |--01_Base/            # Resets/Normalize, Typography Rules, Etc.
|  |  |  |--index.scss       # Directory Manifest File
|  |  |
|  |  |--02_Vendors/         # Style sheets provided by a third party such as themes or plug-ins
|  |  |  |--index.scss       # Directory Manifest File
|  |  |
|  |  |--03_Elements/        # Styles for HTML tags, such as a form label, an input or a button
|  |  |  |--index.scss       # Directory Manifest File
|  |  |
|  |  |--04_Components/      # Cards, Carousels, and Navbars
|  |  |  |--index.scss       # Directory Manifest File
|  |  |  
|  |  |--05_Layouts/         # Grid System, Header, Footer, and Sidebars
|  |  |  |--index.scss       # Directory Manifest File
|  |  |
|  |  |--06_Pages/           # Page specific styles
|  |  |  |--index.scss       # Directory Manifest File
|  |  |
|  |  |--07_Utilities/       # Utilities and Helper Classes
|  |  |  |--index.scss       # Directory Manifest File
|  |  |
|  |  |--styles.scss/        # Main Manifest
|  |
|  |--scripts/
|     |--components/         # Component-Specific Scripts
|     |--services/           # Reusable Functionality
|     |--main.js             # The Main Manifest that ties the project together
|
|--index.html
|--package.json
|--postcss.config.js
|--webpack.config.js

NOTE

To find out more about the Clarion Style Architecture check out our official documentation.

Adding a New File

Additional style files can easily be managed through the CLI as well. In your terminal type the following command:

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.

Removing a File

Similar to adding a file, removing files can also be done through the CLI:

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.

Building Your Project

To build your application for final use, run the build command:

npm run build

The final compiled JavaScript and CSS file are in dist directory in the root of your project.

Find out more at https://projectclarion.com!