{"id":15429559,"url":"https://github.com/break-stuff/clarion","last_synced_at":"2025-08-14T18:34:21.633Z","repository":{"id":24369157,"uuid":"101564526","full_name":"break-stuff/clarion","owner":"break-stuff","description":"A simple CLI for scaffolding front-end projects using the Clarion Style Architecture.","archived":false,"fork":false,"pushed_at":"2022-12-30T20:25:57.000Z","size":1663,"stargazers_count":23,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T10:33:35.997Z","etag":null,"topics":["architecture","clarion","clarion-style-architecture","cli","front-end","grunt","gulp","less","sass","scaffolding","scss","webpack"],"latest_commit_sha":null,"homepage":"https://projectclarion.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/break-stuff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-27T16:15:12.000Z","updated_at":"2024-11-21T17:49:43.000Z","dependencies_parsed_at":"2023-01-14T00:50:56.084Z","dependency_job_id":null,"html_url":"https://github.com/break-stuff/clarion","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fclarion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fclarion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fclarion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fclarion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/break-stuff","download_url":"https://codeload.github.com/break-stuff/clarion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249742995,"owners_count":21319035,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["architecture","clarion","clarion-style-architecture","cli","front-end","grunt","gulp","less","sass","scaffolding","scss","webpack"],"created_at":"2024-10-01T18:11:28.501Z","updated_at":"2025-04-19T16:53:43.444Z","avatar_url":"https://github.com/break-stuff.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Clarion\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://projectclarion.com/\"\u003e\u003cimg src=\"https://projectclarion.com/images/clarion_default_image.png\" alt=\"product clarion logo\" style=\"width: 100%; max-width: 500px;\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## A CSS and Design System Framework for well crafted applications.\n\n_Check out the official Documentation here: [projectclarion.com](http://projectclarion.com)_\n\n## Installation\n\nInstall [Node.js](https://nodejs.org/), if you don't already have it installed.\n\nIn your terminal or command prompt type:\n\n```bash\nnpm install -g clarion\n- or -\nyarn global add clarion\n```\n\n## Start a New Project\n\n```bash\nclarion new\n```\n\nAnswer a few questions about you would like to configure your project and it will be scaffolded out for you.\n\nYour dependencies will also automatically be installed!\n\n## Run Your New Project\n\nAfter your dependencies are installed you can run your project.\n\n```bash\ncd ProjectName\nnpm run dev\n```\n\n## About Your New Project\n\nThe default project is configured with [SASS](http://sass-lang.com/) using the `.scss` syntax and [webpack](https://webpack.js.org/) as the compiler and module manager.\n\nThe project architecture implements the Clarion Style Architecture.\n\n```bash\nMyProject/\n|\n|--build/\n|\n|--src/\n|  |--sass/\n|  |  |--00_Abstracts/     # Variables, Functions, Mixins, and Placeholders\n|  |  |\n|  |  |--01_Base/          # Resets/Normalize, Typography Rules, Etc.\n|  |  |  |--index.scss     # Manifest File\n|  |  |\n|  |  |--02_Vendors/       # Style sheets provided by a third party such as themes or plug-ins\n|  |  |  |--index.scss     # Manifest File\n|  |  |\n|  |  |--03_Elements/      # Styles for HTML tags, such as a form label, an input or a button\n|  |  |  |--index.scss     # Manifest File\n|  |  |\n|  |  |--04_Components/    # Cards, Carousels, and Navbars\n|  |  |  |--index.scss     # Manifest File\n|  |  |  \n|  |  |--05_Layouts/       # Grid System, Header, Footer, and Sidebars\n|  |  |  |--index.scss     # Manifest File\n|  |  |\n|  |  |--06_Pages/         # Page specific styles\n|  |  |  |--index.scss     # Manifest File\n|  |  |\n|  |  |--07_Utilities/     # Utilities and Helper Classes\n|  |  |  |--index.scss     # Manifest File\n|  |  |\n|  |  |--styles.scss/      # Main Sass Manifest\n|  |\n|  |--scripts/\n|     |--components/       # Component-Specific Scripts\n|     |--services/         # Reusable Functionality\n|     |--main.js\n|   \n|--index.html\n|--package.json\n|--postcss.config.js\n|--webpack.config.js\n```\n\n## Adding a New File\n\nAdditional style files can easily be manged through the CLI as well.\n\n### Usage\n\n```bash\nclarion add \u003cdirectory\u003e \u003cfile name\u003e\n```\n\n#### Example\n\n```bash\nclarion add element headings\n```\n\nThis 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.\n\n## Removing a File\n\nSimilar to adding a file, removing files can also be done through the CLI.\n\n### Usage\n\n```bash\nclarion remove \u003cdirectory\u003e \u003cfile name\u003e\n```\n\n#### Example\n\n```bash\nclarion remove element headings\n```\n\nThis 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.\n\n## Building Your Project\n\nTo build your application for final use, run the build command.\n\n```bash\nnpm run build\n```\n\nThe final compiled JavaScript and CSS file are in build directory in the root of your project.\n\n## Options\n\nThese are options you can run when initializing you project.\n\n## Project Content\n\n| Option | Description |\n| --- | --- |\n| Starter Project | generate  the style architecture, the style framework, as well as any task runners/bundlers and optimizers needed to begin developing a web application.\n| Styles Only  |  generate the style architecture only (great for integrating into frameworks) |\n| Architecture Only  |  generate a the style architecture without any of the start-up files |\n\n## Style Format\n\n| Option | Description |\n| --- | --- |\n| [SCSS](https://sass-lang.com/)  |   files are in .scss format |\n| [SASS](https://sass-lang.com/)  |   files are in .sass format |\n| [LESS](http://lesscss.org/)  |   files are in .less format |\n\n## Task Runners and Bundlers\n\n| Option | Description |\n| --- | --- |\n| [Webpack](https://webpack.js.org/) | configure project for WebPack bundler |\n| [Parcel](https://parceljs.org/)  | configure project for Parcel bundler |\n| [Gulp](https://gulpjs.com/)   |  configure project for Gulp task runner |\n| [Grunt](https://gruntjs.com/)  |  configure project for Grunt task runner |\n\n## Changelog\n\n3.8.4 - Fix color palette.\n\n3.8.3 - Updated pipeline config files to handle 'less' and 'sass' configurations better.\n\n3.8.1 - Fix Grunt build\n\n3.8.0 - Miscellaneous bug fixes and added mixins such as: `z-index` mixin, updated default color pallet for accessibility, `$content-width` variable, font families variables are now a map and use the `font` mixin, media queries now use `rem`s instead of `px`s, and spacing mixins now follow standard CSS patterns.\n\n3.7.1 - Fixed bug in `Pow` function for some bundlers/task runners for decimals.\n\n3.7.0 - Added [display mixins](https://projectclarion.com/framework/documentation/mixins/display.html) - `full-width`, `full-height`, `full-screen`, and `screen-reader-only`\n\n3.6.0 - Added `important` parameter on mixins\n\n3.5.1 - Updated spacing variable to be more inline with naming convention\n\n3.5.0 - Add [border mixin](https://projectclarion.com/framework/documentation/mixins/border.html)\n\n3.4.0 - Fix [padding and margin mixin](https://projectclarion.com/framework/documentation/mixins/spacing.html) parameter order\n\n3.4.0 - Fix [directory creation](https://projectclarion.com/cli/documentation/add.html#adding-directories) logic\n\n3.2.2 - Fix CleanWebpackPlugin error for WebPack projects.\n\n3.2.1 - Fix color functions to handle \"black\" and \"white\" values\n\n3.2.0 - Streamlined new project setup.\n\n3.1.0 - Updated variables, added new color contrast logic, and fixed SASS file references.\n\n3.0.2 - Fixed file reference error in SCSS.\n\n3.0.1 - Added additional border radius mixins and fixed some error messages.\n\n3.0.0 - Added style framework for SASS and SCSS.\n\n2.1.0 - Added a default configuration option and some bug fixes.\n\n2.0.1 - Updated documentation.\n\n2.0.0 - Added new CLI interface.\n\n1.1.2 - Fixed hot reloading for Webpack.\n\n1.1.1 - Added ability to add new Directories [via the CLI](https://projectclarion.com/documentation/architecture/).\n\n1.0.3 - Replaced failing 'extract-text-webpack-plugin' with 'mini-css-extract-plugin' for Webpack 4.\n\n1.0.1 - Fixed an type-o in the Grunt project.\n\n1.0.0 - Final testing and added documentation via markdown files in each directory.\n\n0.9.2 - Fixed bugs in SASS projects.\n\n0.9.1 - Fixed Webpack build error.\n\n0.9.0 - Refactored to use a better templating system and added unit tests.\n\n0.8.7 - Updated documentation to include new site URL and install instructions.\n\n0.8.6 - Temporarily removed \"extract-text-webpack-plugin\" as it is currently incompatible with Webpack v4.\n\n0.8.5 - Updated Webpack project for changes in version 4.\n\n0.8.1 - Added option for Parcel project creation.\n\n0.7.1 - Added missing dependency for Gulp project.\n\n0.7.0 - Revised dependency management so the latest packages are always installed, added Grunt, and added 'pixrem' to postcss.\n\n0.6.1 - Fixed error in gulpfile.js.\n\n0.6.0 - Modified add feature to find any directory name rather than only those in the Clarion Style Architecture.\n\n0.5.0 - Renamed 02_Themes to 02_Vendors.\n\n0.4.1 - Added link to documentation site.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbreak-stuff%2Fclarion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbreak-stuff%2Fclarion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbreak-stuff%2Fclarion/lists"}