Make Your Life Easier With CSS Architecture!
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 do amazing things. The last thing you need to do is waste your time wrestling with styles that don't seem to cooperate.
Maintainable and Scalable CSS
The Clarion CSS Architecture is designed so your CSS actually "cascades" and allows you to avoid sprinkling those pesky
!important attributes throughout your code. Now you can avoid spending hours trying to figure out why your menu won't align properly.
Creating new projects and making sure all of the necessary components are working properly can slow things WAY down. After you've done that, adding new files and maintaining references can get confusing and frustrating. Using the CLI, you can scaffold out projects and create new integrated style sheets with no additional work.Docs on the CLI →
Use Your Favorite Tools
Clarion makes it easy to use your favorite tools! Write your styles in SASS, SCSS, or LESS. Run your projects with your favorite task runners and bundlers like Grunt, Gulp, WebPack, or Parcel. the goal is to get you up and running as quickly as possible and help you create amazing things.Docs on New Projects →
Make sure you have Node.js and npm installed.
The default project uses webpack and webpack-dev-server and will need to be installed. Check out the documentation to see how to use other bundlers and task runners.
Your New Project
The project architecture implements the Clarion CSS Architecture.
Adding a New File
Additional style files can easily be manged 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 for Production
To build your application for final use, run the build command:
npm run build
build directory in the root of your project.
Check out the documentation to see what other amazing things you can do with Clarion!