Socket
Socket
Sign inDemoInstall

@tacc/core-styles

Package Overview
Dependencies
241
Maintainers
1
Versions
83
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @tacc/core-styles

CSS source and processor for TACC Core-CMS and Core-Portal.


Version published
Weekly downloads
762
increased by3.39%
Maintainers
1
Created
Weekly downloads
 

Changelog

Source

[2.25.3] - 2024-03-15: Rebuild s-app-card as c-app-card

Fixed

  • feat: des-2697 add c-app-card, improve s-cap-card (#318)

Full Changelog: https://github.com/TACC/Core-Styles/compare/v2.25.2...v2.25.3

Readme

Source

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 Portal, the base Portal code for TACC WMA CMS Websites
  • TUP UI, the client code for TACC User Portal
  • TACC Docs, the documentation for TACC
  • Tapis Authenticator, the web server for Tapis v3 auth
  • Hazmapper, a TACC application for geospatial data

Table of Contents

External Project Usage

A. Load from a Project

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

See HOWTO.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
const buildStylesheets = 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#postcssrc
    customConfigs: [
      // 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 help for command

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 help for command
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 help for command

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 15.x

Quick Start

  1. (initially) Install dependencies:
    npm ci

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

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

  4. Build and preview the styles*:
    npm start

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

* Stylesheets are built from source files in src/lib directory to compiled files in dist 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

Production Deployment

The Core Styles are not independently deployed.

Currently, the demo is served by Core CMS (since v3.9.0).

Later, the demo may be deployed indpendently and core-styles.….css served from a CDN.

Contributing

To contribute, first read How to Contirbute.

Bootstrap

Core Styles was an effort to replace Bootstrap. Core Styles is compatible with Bootstrap. Learn more.

FAQs

Last updated on 15 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc