Welcome to Arches

Arches is the foundational design system employed by the American College of Cardiology (ACC). Leveraging advanced compiler techniques, Arches generates a multitude of variations that integrate with different frameworks and product brands. These variations are utilized across an array of products developed by the ACC.

In its basic form, Arches serves as a set of utility classes. When incorporated into a project with an existing style sheet, it can introduce new, non-destructive styling features. Additionally, Arches offers variants that seamlessly build on two popular frameworks currently in use at the College: Twitter Bootstrap and Zurb Foundation.

Utility Classes

Utility classes represent a notable shift from numerous previously established CSS principles. They offer an enhanced separation of responsibilities between HTML and CSS. The primary role of these classes is to control a singular style within CSS, which is a departure from traditional methods.

The introduction of utility classes yields two significant benefits. Firstly, they mitigate the potential for scope expansion in CSS, making it more manageable. Secondly, they provide enhanced flexibility when designing user interface components, especially those that are yet to be defined.

Even though utility classes bring changes to the design approach, the need for maintaining high-quality standards for HTML semantics remains unchanged. However, adhering strictly to a component design pattern becomes less critical at the HTML level due to the flexibility that utility classes provide.

Naming Convention

Arches does have a learning curve, but to reduce the curve the names follow a strict pattern. learn more

Brand Documentation

The brand documentation section provides explicit examples of style applications and predefined patterns employed within each property.

Documentation for Playgrounds

Playgrounds have been established for exploratory design work. These are typically either derived from major brands or integrated into some of our third-party products. Mostly, these are limited to pattern-specific work or additional stylesheets tailored to specific products.

| Playground | Description | There are some playgrounds setup for exploitative design work that are either off shoots of the major brands or are used in some of our third party products. Most of these are pattern only work with dependency based extra stylesheets that are product specific.

| Search Within Guidelines | This involves styling for content within Guidelines and testing systems for a separate add-on stylesheet for content returns. |

Color Codes

The American College of Cardiology employs specific colors to signify various objects and meanings across its product range. Below, you will find the official colors and their corresponding definitions.

Adding a New Brand

Arches is a complex front end solution so adding a new brand has a decent amount of files that need to be added. Currently all brands are built on the bootstrap framework and these instructions default all framework notation to bootstrap boot. All references to the new brand in code from these instructions will be refereed to brandName and should be substituted to the the new brand naming

Files need to be added to the codebase to support a new brand.

All the files except the Setup Brand File can be left blank. The base,components,recipes all use a centralized root file that points to a folder to keep the system clean and organized.

.
└── Src/
    └── scss/
        ├── base/
        │   └── __base.brandName.scss
        ├── components/
        │   ├── brandName/
        │   └── __base.brandName.scss
        ├── recipes/
        │   ├── brandName/
        │   │   └── _brandName.recipe-name.scss
        │   └── __recipes.brandName.scss
        └── setup/
            └── __brand.brandName.scss (Copy the __brand.temp.scss to pull in proper variables and modify from there. )

create markdown files.

Create the partial file so the home page of the new brand has proper introductions and instructions if needed.

File Labeling: markdown/partials/partial_[brandName]_[framework].md

.
└── markdown/
    └── partial/
        └── partial_brandName_boot.md

Adding a new Gulp Task

In the gulpfile.js you must duplicate the appropriate task and alter is brandName in the following code to match the new brand.

gulp.task( "build-brandName",
	gulp.series(
		function SCSS() {
			return constructFrameworkAndUtilityStyleSheet("brandName", "boot");
		},
		function CSS() {
			return runSass("brandName");
		},
		function CONCAT() {
			return concatCSS("brandName", "boot");
		},
		function Markdown() {
			return constructMarkdown("brandName", "boot");
		},
		"copy-to-dist",
		"copy-to-styleguide",
		function () {
			return run("npm run boot_brandName").exec();
		}
	)
);

Update the Default Gulp Task

Depending on the need you should add the new build-brandName task to the group building tasks default or default-depreciated. Use default depreciated for any brand that isn't 100% official or going to be used in production straight away.

Create a StyleGuide Config file

Duplicate an existing kss-config file and set it up. It is recommended you copy the kss-config_boot_acc.json & alter all path points in the document.

• the direct it to the new css document you are making
• alter the appropriate stylesheets for stylings
• adding in dependency javascript
• add an new entry into the site_nav and set its active to true.
• list of keys that need updating
  • "title"
  • "mask"
  • "destination"
  • "homepage"
  • "css"
  • "site_nav"

Create a new script entry in the package.json

create a new entry in the script area of the package json for gulp to be able to call the styleguide build command. a

"scripts":{
	"boot_brandName": "kss --config kss-config_boot_brandName.json",	
	}

Add Navigation to the new brand

This can be accomplished by either adding a new table row to the Brand Documenation area of the following markdown file. This will allow navigation from the home of the style site.

.
└── markdown/
    └── partial/
        └── partial_home_arches.md

If and only If you are making a new flagship brand should you add a new entry to all kss_config files so the nav item is available to all pages within the ARCHES documentation.