Truss (in active development)

Truss is a component library for anyone building a UC Santa Cruz website.

Please note that the visual design of Truss components is dependent on the design choices in the UCSC 2022 WordPress theme, which is still in development. Consider Truss to be beta in both design and functionality.

Truss contains branded web components built with StencilJS. Truss components use the web components standard so they are cross-browser compatible.

Component status

In use today (status)

• trss-ucsc-header (beta)
• trss-ucsc-footer (beta)
• trss-logo (stable)

In development (status)

• trss-site-title (beta)
• trss-data-list (beta)
• trss-alert (beta)
• trss-breadcrumbs (pre-alpha)
• trss-card (pre-alpha)
• trss-carousel (pre-alpha)

Using Truss components

The simplest way to get started with Truss is to add the released CSS and Javascript files to the bottom of your webpage.

<!-- Script and style to include Truss components.  -->
<script type="module" src="https://unpkg.com/@ucsantacruz/truss@latest/dist/ucsc-trss/ucsc-trss.esm.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@ucsantacruz/truss@latest/dist/ucsc-trss/ucsc-trss.css">

After you've added the two files to your page, you can use any of the custom elements in Truss anywhere on your page. See the README file for each component for a list of attributes you can add to an element.

<trss-ucsc-header use-logo="true" search-action="/" search-query="s" style="--trss-content-width:80rem;"></trss-ucsc-header>