Skip to content

Latest commit

 

History

History
182 lines (116 loc) · 5.63 KB

HOWTO.md

File metadata and controls

182 lines (116 loc) · 5.63 KB
Raw

Core Styles - How To

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.1

  1. Foundation
  2. Base
  3. Project
  4. 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.2 Please report any issues.3

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/core-styles@2.25.3/dist/core-styles.base.css" />

  • Or in CSS:

    @import url("https://cdn.jsdelivr.net/npm/@tacc/core-styles@2.25.3/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/core-styles@2.25.3/dist/core-styles.______.css" />

    Replace ______ with cms or docs or portal.

  • Or in CSS:

    @import url("https://cdn.jsdelivr.net/npm/@tacc/core-styles@2.25.3/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

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:

* 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/core-styles@2.25.3/dist/core-styles.settings.css" />

  • Or in CSS:

    @import url("https://cdn.jsdelivr.net/npm/@tacc/core-styles@2.25.3/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/core-styles@2.25.3/dist/components/c-message.css" />

  • Or in CSS:

    @import url("https://cdn.jsdelivr.net/npm/@tacc/core-styles@2.25.3/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/core-styles@2.25.3/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/core-styles@2.25.3/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. ↩