TACC Core Styles

The shared styles for TACC WMA Workspace Portals & Websites

Known Clients

• Core CMS, the base CMS code for TACC WMA CMS Websites
• Core CMS Custom, the host for custom CMS assets
• Core Portal, the base Portal code for TACC WMA CMS Websites
• Core Components, the UI components for Core Portal and TUP UI
• TUP UI, the client code for TACC User Portal
• TACC Docs, the documentation for TACC
  • and, indirectly, DesignSafe User Guide
• Tapis Authenticator, the web server for Tapis v3 auth
• Hazmapper, a TACC application for geospatial data
• DesignSafe Portal, the DesignSafe-CI Portal code

Table of Contents

• External Project Usage
  • A. Load from a Project
  • B. Install into a Project
• Local Development Setup
• Testing
• Deployment
• Contributing
• Publishing
• Bootstrap

External Project Usage

A. Load from a Project

Note

This is likely the easier and simpler solution. Try this first.

See QUICKSTART.md.

B. Install into a Project

Install This Package

1. Install with any package manager e.g.:

   • npm install @tacc/core-styles
   • yarn add @tacc/core-styles

2. Import stylesheets of either type:

   • pre-compiled, from /dist
   • source files, from /src/lib/_imports

Build from Source

Via Your Environment's PostCSS

Please review the plugins expected.

Via Core-Styles API

JavaScript

require('core-styles').buildStylesheets

constbuildStylesheets=require('core-styles').buildStylesheets;buildStylesheets(// Parse CSS files from which directory (required)`path/to/your/css/src`,// Output CSS files to which directory (required)`path/to/put/css/output`,{// List of YAML config files (optional)// (The first file is merged on top of the base config.)// (Each successive file overwrites the file before it.)// SEE: https://github.com/postcss/postcss-load-config#postcssrccustomConfigs: [// The "base" config is `/.postcssrc.base.yml``path/to/custom/config/that/extends/base/.postcssrc.yml`,`path/to/custom/config/that/extends/above/.postcssrc.yml`,],// Print more info from build log (optional, default: false)verbose: true,// Print version of this software (optional, default: false)version: true,// Any value to help identify the build (optional, default: app version)buildId: process.env.npm_package_version+someUniqueId,});

CLI

core-styles

Usage: core-styles [options] [command]
Options:
-V, --version output the version number
-h, --help display helpforcommand
Commands:
build [options] build stylesheets with TACC standard process:
- "post-css" plugins
- custom input path
- custom output path
- custom configs
- prepend build id
help [command] display helpforcommand

core-styles build

Usage: core-styles build [options]
build stylesheets with TACC standard process:
- "post-css" plugins
- custom input path
- custom output path
- custom configs
- prepend build id
Options:
-i, --input <path> parse source at which path¹
-o, --output <path> output CSS files to which path¹
-v, --verbose print more info during build process
-c, --custom-configs <paths...> extend base config with YAML files²³
-b, --build-id <identifier> any value to identify the build (default: version of app)
-m, --base-mirror-dir <path>if input folder structure is mirrored, this path is not⁴
-h, --help display helpforcommand
Notes:
¹ Folder structure of "--input-dir" mirrored in"--output-dir" i.e.
given input
- "input_dir/x.css"
- "input_dir/sub_dir_a/y.css"
- "input_dir"
- "input_dir/**/*"
expect output
- "output_dir/x.css"
- "output_dir/sub_dir_a/y.css"
- "output_dir/..." (all files from input not in sub-directories)
- "output_dir/.../..." (all files from input as nested)
² The file formats are like ".postcssrc.yml" from
https://github.com/postcss/postcss-load-config#postcssrc
³ The first file is merged on top of the base config.
Each successive file overwrites the file before it.
⁴ Given '-i "a/b*" -o "x/" -m "a/"' output is "x/b/...".
Given '-i "a/b*" -o "x/" -m "a/b/"' output is "x/...".
Given '-i "a/b*" -o "x/" -m "not-a/"' output is "x/abs-path-to-input/...".

Local Development Setup

Prerequisites for Running

• Nodejs 20.x

Quick Start

0. (initially) Install dependencies:
   npm ci

1. (optional) Make changes to /src/lib files.

2. Build the styles*:
   npm run build:css

3. Build and preview the styles*:
   npm start

4. (to debug) Review output in respective /dist or /demo files.*

_{* Stylesheets are built from source files insrc/lib directory to compiled files indist directory.}

Preview After Development

1. Build stylesheets and build static demo:

   npm run build

2. Run the static demo:

   npx serve demo

   ^{Web page will live-reload on demo build, but not on change of source files.}

3. Open the web interface. The build command will output the URL (and may even open it for you).

Preview During Development

Run each of these commands in its own terminal.

1. Build stylesheets and re-build on change:

   npm run watch

2. Run the auto-refresh demo:

   npm run start

^{Web page will live-reload twice on change of source files. The second reload will show changes.}

Build Options

Regular CSS Build

npm run build:css

Custom Build ID

npm run build:css -- --build-id="..."

Testing

All testing is done manually.

Deployment

Auto-deploy occurs via workflow to https://tacc.github.io/core-styles.

Contributing

To contribute, first read How to Contribute.

Publishing

We manually release versions of Core-Styles. Read more.

Bootstrap

Core Styles had been an effort to replace Bootstrap. Core Styles is compatible with Bootstrap. Core Styles skins only some Bootstrap components. Learn more.