Skip to content

QUICKSTART.md

Latest commit

 

History

History
49 lines (33 loc) · 1.62 KB

QUICKSTART.md

File metadata and controls

49 lines (33 loc) · 1.62 KB

Quick Start

Core-Styles is reusable CSS used by TACC and TACC User Portal.

Basic Usage

If you must use Bootstrap, load Core-Styles' Bootstrap after it:

@import url("https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css") layer(foundation);
@import url("https://cdn.jsdelivr.net/npm/@tacc/core-styles@v2/dist/core-styles.bootstrap4.css") layer(foundation);

If you are styling a static website, add:

@import url("https://cdn.jsdelivr.net/npm/@tacc/core-styles@v2/dist/core-styles.base.css") layer(base);
@import url("https://cdn.jsdelivr.net/npm/@tacc/core-styles@v2/dist/core-styles.cms.css") layer(base);

If you are styling a dynamic web application, add:

@import url("https://cdn.jsdelivr.net/npm/@tacc/core-styles@v2/dist/core-styles.base.css") layer(base);
@import url("https://cdn.jsdelivr.net/npm/@tacc/core-styles@v2/dist/core-styles.portal.css") layer(base);

If you only want custom properties (colors, size, spacing, etc.), then only load:

@import url("https://cdn.jsdelivr.net/npm/@tacc/core-styles@v2/dist/core-styles.settings.css") layer(base);

Tip

For UI patterns and demos, see https://cep.tacc.utexas.edu/static/ui/.

Note

For a more-detailed walkthrough and options, see HOWTO.md.

Important

Core-Styles can co-exist with Bootstrap 4.

Advanced Usage

Install into a project via Node.