HOWTO.md

Core Styles - How To

• Use All of Core Styles
• Use Some of Core Styles
• (Auxiliary) Core Styles in React
• (Internal) Style Guide

Use All of Core Styles

This method expects no other website theme is present. If you must build atop an exisitng theme, then Use Some of Core Styles.

Load stylesheets (as needed) in this order. The Core Styles "Base" is required. A Core-Styles' "Project" is recommended.¹

0. Foundation
1. Base
2. Project
3. Cosmetic

0. Foundation

Not necessary. (Also, we prefer you use Core-Styles without Bootstrap.)

If your project requires Bootstrap (e.g. Django CMS), then load Bootstrap 4 first. Compatibility not guaranteed beyond Bootstrap 4.

If you want your project to use a reset, normalize, or reboot, then load it first. Compatibility desired.² Please report any issues.³

1. Base

Load core-styles.base.css from a CDN e.g. JSDeliver.

• Either in HTML:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tacc/[email protected]/dist/core-styles.base.css" />

• Or in CSS:

  @import url("https://cdn.jsdelivr.net/npm/@tacc/[email protected]/dist/core-styles.base.css");

2. Project

Load any one of these relevant project-type CSS from a CDN e.g. JSDeliver:

stylesheet	purpose
core-styles.cms.css	marketing or branding sites
core-styles.docs.css	documentation sites
core-styles.portal.css	portals (i.e. web apps)

• Either in HTML:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tacc/[email protected]/dist/core-styles.______.css" />

  Replace ______ with cms or docs or portal.

• Or in CSS:

  @import url("https://cdn.jsdelivr.net/npm/@tacc/[email protected]/dist/core-styles.______.css");

  Replace ______ with cms or docs or portal.

3. Cosmetic

Load stylesheets from your project.

• Either in HTML:

  <link rel="stylesheet" href="/your/project/stylesheet.css" />

• Or in CSS:

  @import url("/your/project/stylesheet.css");

Use Some of Core Styles

• For a Portal Application
• For a CMS or Documentation Site

For a Portal Application

See https://github.com/TACC/tup-ui/blob/9402505/apps/tup-ui/src/styles/README.md#use-core-styles.

For a CMS or Documentation Site

This method is meant to add support for Core Styles patterns atop an existing theme. If you expect Core Styles to be your theme, then follow Use All of Core Styles instead.

To use only what you need of Core Styles:

1. Load Settings.*
2. Load stylesheets as necessary:
   • Load a Core Styles Pattern
   • Extend a Core Styles Pattern

_{* This lets Core Styles patterns access custom properties they assume exist.}

Load Settings

Load core-styles.settings.css from a CDN e.g. JSDeliver.

• Either in HTML:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tacc/[email protected]/dist/core-styles.settings.css" />

• Or in CSS:

  @import url("https://cdn.jsdelivr.net/npm/@tacc/[email protected]/dist/core-styles.settings.css");

Load a Core Styles Pattern

To use a pattern as is.

• Either in HTML:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tacc/[email protected]/dist/components/c-message.css" />

• Or in CSS:

  @import url("https://cdn.jsdelivr.net/npm/@tacc/[email protected]/dist/core-styles.settings.css");

Extend a Core Styles Pattern

To use a pattern but also change it to fit a unique requirement of your site.

• Either in HTML:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tacc/[email protected]/dist/components/c-message.css" />
  <style>
    .c-message--scope-section {
      margin-bottom: 1em;
    }
  </style>

• Or in CSS:

  @import url("https://cdn.jsdelivr.net/npm/@tacc/[email protected]/dist/core-styles.settings.css");
  
  .c-message--scope-section {
    margin-bottom: 1em;
  }

(Auxiliary) Core Styles in React

See how Core Styles can be used in React with CSS Modules.

(Internal) Style Guide

To author CSS like is done for Core Styles, follow TACC's CSS Style Guide.

Footnotes

1. Stylesheet load order and naming comes from MCSS. ↩

2. Core-Styles testing with a reset, normalize, or reboot has onyl been atop Bootstrap 4's reboot.scss. ↩

3. If you have access, report issues in JIRA "WP" Project. Otherwise, report issues in Github. ↩