Search Colorado.edu

JS Frameworks

Using the Styleguide with React or Vue

The styleguide can be used in modern JavaScript frameworks like React, Vue, and Angular. This documentation will cover how to integrate the it into Nuxt and Gatsby, however using it with other frameworks should have a similar approach.

Before you begin, add the fontawesome npm package . You will need to include the 'faBars' and 'faHome' icons. Also, you will need to downoad some CSS files. Place them where ever static files are served or with your other css.

Nuxt

Nuxt is a static site generator for Vue. To add the styleguide, you should edit the default.vue template or create a new one. Additionally, you will have to add the CSS files and CDN links in the nuxt.config.js file.

A few things have changed in the markup. First, Nuxt uses the 'nuxt-link' tag for relative paths. This means that the main menu will most likely have to be changed to use them. Also, the branding is able to have a few color choices. In order to cahnge them, you will need to add all the correct classes to the tags. If you just want a complete template, you can copy and paste the markup below into your default.vue file.

head:{
...
script:[
{ src: "https://cdn.colorado.edu/static/brand-assets/live/js/brand-bar.js" },
{ src: "https://cdn.colorado.edu/static/brand-assets/live/js/footer.js" }
],
link:[
{ rel: 'stylesheet', href: '/branding.css', body: true},
{ rel: 'stylesheet', href: '/ucb-styles.css', body: true},
{ rel: 'stylesheet', href: '/grid.css', body: true},
{ rel: 'stylesheet', href: 'https://cdn.colorado.edu/static/brand-assets/live/css/brand-bar.css', body: true}
]
...
}
view raw nuxt-config hosted with ❤ by GitHub
<template>
<div>
<!-- the search bar -->
<div class="background-white brand-bar brand-bar-black padding-vertical-small">
<div class="container">
<div class="ucb-brand-bar ucb-brand-bar-white">
<a href="https://www.colorado.edu" class="ucb-home-link"><img class="ucb-logo" src="https://cdn.colorado.edu/static/brand-assets/live/images/cu-boulder-logo-text-black.svg" alt="University of Colorado Boulder"></a>
<a class="ucb-search-link" href="https://www.colorado.edu/search">
<img class="ucb-search" alt="Search Colorado.edu" src="https://cdn.colorado.edu/static/brand-assets/live/images/search-black.svg">
</a>
</div>
</div>
</div>
<!-- the site title -->
<header class="ucb black" role="banner">
<div class="container">
<a href="/">Boulder Crowdfunding</a>
</div>
</header>
<!-- navigation -->
<div class="background-color-gray-dark">
<div class="container">
<nav role="navigation" class="ucb-navbar ucb-navbar-dark margin-bottom">
<label for="show-menu2" class="show-menu">
<font-awesome-icon aria-hidden="true" icon="bars"/>
<span class="element-invisible">Show Menu</span>
</label>
<input type="checkbox" id="show-menu2" role="button" aria-controls="site-menu2" aria-haspopup="true">
<ul id="site-menu2" aria-labelledby="show-menu2">
<li>
<nuxt-link to="/">
<font-awesome-icon aria-hidden="true" icon="home"/>
<span class="display-inline invisible-md invisible-lg">Home</span>
</nuxt-link>
</li>
<!-- Add the menu items here -->
<li> <nuxt-link to="/path"> Menu Item Name! </nuxt-link> </li>
</ul>
</nav>
</div>
</div>
<!-- body content -->
<div id="nuxt-body" class="container" >
<div class="row">
<nuxt/>
</div>
</div>
<!-- footer -->
<footer class="background-black padding-top padding-bottom">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<h4> Boulder Crowdfunding</h4>
<a href="https://www.colorado.edu/policies/campus-wide-crowdfundingcrowdsourcing"> Crowdfunding Policy </a>
</div>
<div class="col-log-4 col-md-4 col-sm-6 col-xs-12 offset-lg-4 offset-md-4">
<div class="ucb-footer">
<p>
<a href="https://www.colorado.edu"><img class="ucb-footer-be-boulder" src="https://cdn.colorado.edu/static/brand-assets/live/images/be-boulder-white.svg" alt="Be Boulder." style="max-width:240px; height:auto;"></a>
</p>
<p><a class="ucb-home-link" href="https://www.colorado.edu">University of Colorado Boulder</a></p>
<p>© Regents of the University of Colorado</p>
<p class="ucb-footer-links">
<a href="http://www.colorado.edu/about/privacy-statement">Privacy</a> • <a href="http://www.colorado.edu/about/legal-trademarks">Legal &amp; Trademarks</a> • <a href="http://www.colorado.edu/map">Campus Map</a>
</p>
</div>
</div>
</div>
</div>
</footer>
</div>
</template>
view raw template hosted with ❤ by GitHub

Gatsby

Gastby is a static site generator for React. Gatsby uses the 'Link' tag for relative links. You may have to change some of the links in the main menu to the 'Link' tag instead of the regular anchor tags. Gatsby also uses Layout components that wrap the page content. To add the CDNs properly, you have to copy the html.js component. Copy cp .cache/default-html.js src/html.js into your terminal from the project root. Then add the CDN links under the {props.headComponents} line. This will add the CDNs as a static asset to all of the pages.

//Add this under the props.headComponents
<script src="https://cdn.colorado.edu/static/brand-assets/live/js/brand-bar.js"></script>
<script src="https://cdn.colorado.edu/static/brand-assets/live/js/footer.js"></script>
<link rel="stylesheet" href='https://cdn.colorado.edu/static/brand-assets/live/css/brand-bar.css'></link>
view raw html-component hosted with ❤ by GitHub
import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql, Link } from "gatsby"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBars, faHome } from '@fortawesome/free-solid-svg-icons'
import "./layout.css"
// The stylesheets for he styleguide
import "../styles/branding.css"
import "../styles/grid.css"
import "../styles/ucb-styles.css"
const Layout = ({ children }) => {
const data = useStaticQuery(graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`)
return (
<React.Fragment>
{/* the search bar */}
<div className="background-white brand-bar brand-bar-black padding-vertical-small">
<div className="container">
<div className="ucb-brand-bar ucb-brand-bar-white">
<a href="https://www.colorado.edu" class="ucb-home-link">
<img class="ucb-logo" src="https://cdn.colorado.edu/static/brand-assets/live/images/cu-boulder-logo-text-black.svg" alt="University of Colorado Boulder"/>
</a>
<a className="ucb-search-link" href="https://www.colorado.edu/search">
<img class="ucb-search" alt="Search Colorado.edu" src="https://cdn.colorado.edu/static/brand-assets/live/images/search-black.svg"/>
</a>
</div>
</div>
</div>
{/* Header */}
<header class="ucb black" role="banner">
<div class="container">
<Link to="/">{data.site.siteMetadata.title}</Link>
</div>
</header>
{/* Main navigation */}
<div class="background-color-gray-dark">
<div class="container">
<nav role="navigation" class="ucb-navbar ucb-navbar-dark margin-bottom">
<label for="show-menu2" class="show-menu">
<FontAwesomeIcon aria-hidden="true" icon={faBars} />
<span class="element-invisible">Show Menu</span>
</label>
<input type="checkbox" id="show-menu2" role="button" aria-controls="site-menu2" aria-haspopup="true"/>
<ul id="site-menu2" aria-labelledby="show-menu2">
<li>
<Link to="/">
<FontAwesomeIcon aria-hidden="true" icon={faHome}/>
<span class="display-inline invisible-md invisible-lg">Home</span>
</Link>
</li>
<li> <Link to="/page-2"> Menu Item Name! </Link> </li>
</ul>
</nav>
</div>
</div>
{/* Body content */}
<div id="gatsby-body" class="container" >
<div class="row">
{children}
</div>
</div>
{/* Footer */}
<footer class="background-black padding-top padding-bottom">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<h4> Site Name </h4>
<a href="#"> A link! </a>
</div>
<div class="col-log-4 col-md-4 col-sm-6 col-xs-12 offset-lg-4 offset-md-4">
<div class="ucb-footer">
<p>
<a href="https://www.colorado.edu"><img class="ucb-footer-be-boulder" src="https://cdn.colorado.edu/static/brand-assets/live/images/be-boulder-white.svg" alt="Be Boulder." style={{maxWidth:240, height:'auto'}}/></a>
</p>
<p><a class="ucb-home-link" href="https://www.colorado.edu">University of Colorado Boulder</a></p>
<p>© Regents of the University of Colorado</p>
<p class="ucb-footer-links">
<a href="http://www.colorado.edu/about/privacy-statement">Privacy</a> • <a href="http://www.colorado.edu/about/legal-trademarks">Legal &amp; Trademarks</a> • <a href="http://www.colorado.edu/map">Campus Map</a>
</p>
</div>
</div>
</div>
</div>
</footer>
</React.Fragment>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout;
view raw layout-styleguide hosted with ❤ by GitHub

Extra

Moving forward, it would be nice to make an NPM package so that these components could be used easier.