UCSC CGL Style Guide

Features

Demo

Website

View demo of website pages (for example, "Analysis Core" or "About").

App

View demo of app pages (for example, "File Browser" or "Action Service").

Source Code

Source code is located at https://github.com/clevercanary/ucsc-cgl-style-guide.

Design Principles

Material Design

The UCSC CGL website and web application design is based on Google's Material Design guidelines.

Usage

Required Files

CSS

A single CSS file containing all website and app-related styles is required. Add the following to the <head> of your document:

<link rel="stylesheet" href="https://clevercanary.github.io/ucsc-cgl-style-guide/styles/styles.css">

Icons

Material Design icons are required for displaying the hamburger toggle and menu close icons (extra small and small devices only). Add the following to the <head> of your document:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

JavaScript

A single JS file is required for toggling the hamburger menu (extra small and small devices only). The hamburger is implemented in vanilla JavaScript and has no third-party dependencies. Add the following to the bottom of the <body> of your document:

<script type="text/javascript" src="https://clevercanary.github.io/ucsc-cgl-style-guide/scripts/cgl-hamburger.component.js"></script>

Components

Website Layout

To maintain readability on large devices (that is, devices wider than 960px), content on website pages can be "snapped" at a maximum width of 960px. Apply the snap-960 CSS class to any block-level elements that should be snapped.

...
<main class="layout-column layout-padding flex">
    <section class="snap-960">
        Snapped content goes here.
    </section>
    ....
</main>
...

The header and footer on a website layout maintain a fluid layout and bleed to the full width of the device.

App Layout

To maximize "real estate", the app layout maintains a fluid layout and bleeds to the full width of the device.

Responsive Flex-Based Grid

Media Breakpoints

Device Size Pixels Extra Small width < 600px Small 600px <= width < 960px Medium 960px <= width < 1280px Large 1280px <= width < 1920px Extra Large width >= 1920px

Grid

The grid is implemented using flexbox.

The simplest grid can be implemented with the following:

<div class="layout-row"> <!-- Display children elements inline (that is, in a single, horizontal line) -->
    <div class="flex"> <!-- "flex" class translates to "flex: 1" -->
        33%
    </div>
    <div class="flex">
        33%
    </div>
    <div class="flex">
        33%
    </div>
</div>

View demo.

You can also specify children to align vertically in a column.

<div class="layout-column"> <!-- Display children elements as block element (that is, in a single column) -->
    <div class="flex">
        100%
    </div>
    <div class="flex">
        100%
    </div>
    <div class="flex">
        100%
    </div>
</div>

View demo.

Add the following suffixes to modify flow direction according to device size.

Device Size Selector Extra Small layout-xs Greater Than Extra Small layout-gt-xs Small layout-sm Greater Than Small layout-gt-sm Medium layout-md Greater Than Medium layout-gt-md Large layout-lg Greater Than Large layout-gt-lg Extra Large layout-xl

<div class="layout-column layout-gt-xs-row">
    <div class="flex-15 flex-gt-sm-50">
        stacked on extra small, inline on greater than extra small devices
    </div>
    <div class="flex-20">
        stacked on extra small, inline on greater than extra small devices
    </div>
    <div class="flex-65">
        stacked on extra small, inline on greater than extra small devices
    </div>
</div>

View demo.

Grid proportions can be specified in increments of 5, as follows:

<div class="layout-row">
    <div class="flex-15">
        15%
    </div>
    <div class="flex-20">
        20%
    </div>
    <div class="flex-65">
        65%
    </div>
</div>

View demo.

Add the following suffixes to modify grid proportions according to device size.

Device Size Selector Extra Small flex-xs Greater Than Extra Small flex-gt-xs Small flex-sm Greater Than Small flex-gt-sm Medium flex-md Greater Than Medium flex-gt-md Large flex-lg Greater Than Large flex-gt-lg Extra Large flex-xl

<div class="layout-row">
    <div class="flex-15 flex-gt-sm-50">
        15% on extra small and small devices, 50% on greater than medium devices
    </div>
    <div class="flex-20">
        20%
    </div>
    <div class="flex-65">
        65% on extra small and small devices, 30% on greater than medium devices
    </div>
</div>

View demo.

You can easily add responsive padding to any container using the .layout-padding class.

<div class="layout-row layout-padding">
    <div class="flex">
        33%
    </div>
    <div class="flex">
        33%
    </div>
    <div class="flex">
        33%
    </div>
</div>

View demo.

Additional Features and Support

The layout implementation is super power and there are additional features not documented above, including responsive ordering of children elements. Please contact mim@clevercanary.com if you have any questions.

Color Scheme

The color scheme is a combination of CGL-specific colors, with a fallback to Google's Material Design Color Spec.

Primary

#1A535C
#4CC9C0
#FF6B6B
#FFA560

Secondary

#4CC9C0
#5C83D0
#FFE66D
#F7FFF7

CSS Reset

In an attempt to keep reset effective but un-opnionated, reset rules have been picked from a combination of three sources:

Favicon

Favicons are located in the /images/favicon folder. To include a favicon on your document, add the following to the <head> of your document:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://clevercanary.github.io/ucsc-cgl-style-guide/images/favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://clevercanary.github.io/ucsc-cgl-style-guide/images/favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://clevercanary.github.io/ucsc-cgl-style-guide/images/favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://clevercanary.github.io/ucsc-cgl-style-guide/images/favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://clevercanary.github.io/ucsc-cgl-style-guide/images/favicon/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://clevercanary.github.io/ucsc-cgl-style-guide/images/favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://clevercanary.github.io/ucsc-cgl-style-guide/images/favicon/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://clevercanary.github.io/ucsc-cgl-style-guide/images/favicon/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="https://clevercanary.github.io/ucsc-cgl-style-guide/images/favicon/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="https://clevercanary.github.io/ucsc-cgl-style-guide/images/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="https://clevercanary.github.io/ucsc-cgl-style-guide/images/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="https://clevercanary.github.io/ucsc-cgl-style-guide/images/favicon/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="https://clevercanary.github.io/ucsc-cgl-style-guide/images/favicon/favicon-128.png" sizes="128x128" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Favicons were generated at Favic-O-Meter and according to favicon-cheat-sheet.

Responsive Toolbar

The main CGL toolbar is based on Google's Material Design Toolbar Spec and is implemented with two custom elements: md-toolbar and md-toolbar-row. The HTML 5 semantic header element is optional.

<header> <!-- HTML 5 semantic element -->
    <md-toolbar> <!-- Material Design-based toolbar -->
        <md-toolbar-row> <!-- Required for correct alignment of child elements -->
            <img src="https://clevercanary.github.io/ucsc-cgl-style-guide/images/logos/ucsc-gi/logo-ucsc-gi@1x.png" srcset="https://clevercanary.github.io/ucsc-cgl-style-guide/images/logos/ucsc-gi/logo-ucsc-gi@2x.png 2x, https://clevercanary.github.io/ucsc-cgl-style-guide/images/logos/ucsc-gi/logo-ucsc-gi@3x.png 3x"> <!-- Use srcset to specify responsive images -->
        </md-toolbar-row>
    </md-toolbar>
</header>

The CGL nav is implemented with two custom elements: cc-toolbar-nav and cc-toolbar-nav-item. Add the following to include the nav in the main toolbar of your document:

<header>
    <md-toolbar>
        <md-toolbar-row>
            <img src="https://clevercanary.github.io/ucsc-cgl-style-guide/images/logos/ucsc-gi/logo-ucsc-gi@1x.png" srcset="https://clevercanary.github.io/ucsc-cgl-style-guide/images/logos/ucsc-gi/logo-ucsc-gi@2x.png 2x, https://clevercanary.github.io/ucsc-cgl-style-guide/images/logos/ucsc-gi/logo-ucsc-gi@3x.png 3x">

            <!-- Nav start -->
            <cc-toolbar-nav>
                <cc-toolbar-nav-item>
                    <a href="#">Analysis Core</a>
                </cc-toolbar-nav-item>
                <cc-toolbar-nav-item>
                    <a href="#">File Browser</a>
                </cc-toolbar-nav-item>
                <cc-toolbar-nav-item>
                    <a href="#">Action Service</a>
                </cc-toolbar-nav-item>
                <cc-toolbar-nav-item>
                    <a href="#">Wiki</a>
                </cc-toolbar-nav-item>
                <cc-toolbar-nav-item>
                    <a href="#">About</a>
                </cc-toolbar-nav-item>
            </cc-toolbar-nav>
            <!-- Nav end -->

        </md-toolbar-row>
    </md-toolbar>
</header>

To highlight the nav item for the current path, add the active class to the appropriate cc-toolbar-nav-item element.

<cc-toolbar-nav>
    <cc-toolbar-nav-item class="active"> <!-- Highlight "Analysis Core" as the currently active path -->
        <a href="#">Analysis Core</a>
    </cc-toolbar-nav-item>
    <cc-toolbar-nav-item>
        <a href="#">File Browser</a>
    </cc-toolbar-nav-item>
    ...
</cc-toolbar-nav>

Hamburger

The CGL nav can be hidden under a hamburger on devices smaller than 960px by adding open and close toggles to the main CGL toolbar.

<header>
    <md-toolbar>
        <md-toolbar-row>
            <img src="https://clevercanary.github.io/ucsc-cgl-style-guide/images/logos/ucsc-gi/logo-ucsc-gi@1x.png" srcset="https://clevercanary.github.io/ucsc-cgl-style-guide/images/logos/ucsc-gi/logo-ucsc-gi@2x.png 2x, https://clevercanary.github.io/ucsc-cgl-style-guide/images/logos/ucsc-gi/logo-ucsc-gi@3x.png 3x">

            <!-- Hamburger start -->
            <button md-icon-button menu-open>
                <span class="md-button-wrapper">
                    <md-icon role="img" class="material-icons">menu</md-icon>
                </span>
            </button>
            <button md-icon-button menu-close>
                <span class="md-button-wrapper">
                    <md-icon role="img" class="material-icons">close</md-icon>
                </span>
            </button>
            <!-- Hamburger end -->

            <cc-toolbar-nav>
                ...
            </cc-toolbar-nav>
        </md-toolbar-row>
    </md-toolbar>
</header>

Responsive Subheader

The CGL subheader is based on Google's Material Design Toolbar Spec and is implemented with two custom elements: md-toolbar and md-toolbar-row.

<md-toolbar class="subheader"> <!-- Material Design-based toolbar, note "subheader" CSS class -->
    <md-toolbar-row> <!-- Required for correct alignment of child elements -->
        <span class="md-title">Subheader Title</span>
    </md-toolbar-row>
</md-toolbar>

Responsive Footer

The CGL footer has a stacked layout on devices smaller than 960px, and an inline layout on devices larger than 960px. The footer is implemented with a combination of two custom elements: cgl-footer-nav and cgl-footer-nav-item. The HTML 5 semantic footer element is not optional.

<footer>
    <div class="cgl-links layout-column layout-gt-sm-row layout-padding">

        <!-- Top row, left-hand links on small + devices -->
        <cgl-footer-nav class="layout-column layout-gt-sm-row">
            <cgl-footer-nav-item>
                <a href="#">UCSC</a>
            </cgl-footer-nav-item>
            <cgl-footer-nav-item>
                <a href="#">UCSC Genomics Institute</a>
            </cgl-footer-nav-item>
            <cgl-footer-nav-item>
                <a href="#">UCSC Computational Genomics Laboratory</a>
            </cgl-footer-nav-item>
        </cgl-footer-nav>

        <!-- Top row, right-hand links on small + devices -->
        <cgl-footer-nav class="layout-column layout-gt-sm-row">
            <cgl-footer-nav-item>
                <a href="#">Email</a>
            </cgl-footer-nav-item>
            <cgl-footer-nav-item>
                <a href="#">Facebook</a>
            </cgl-footer-nav-item>
            <cgl-footer-nav-item>
                <a href="#">Twitter</a>
            </cgl-footer-nav-item>
        </cgl-footer-nav>

    </div>

    <!-- Copyright row -->
    <div class="cgl-disclaimer layout-column layout-gt-sm-row">
        <span>Copyright © 2016, The Regents of the University of California, Santa Cruz.</span> <span>All Rights Reserved. Apache-2.0 licence.</span>
    </div>

</footer>

Typography

Typography is based on Google's Material Design Typography Spec.

The Roboto font is used for all components. @TODO revisit - explicitly add Roboto include?

Heading Styles

The following styles should be used in conjuction with heading elements to preserve semantic structures.

Selector Output .md-display-4
Light 112px
 .md-display-3
Regular 56px
 .md-display-2
Regular 45px
 .md-display-1
Regular 34px
 .md-headline
Regular 24px
 .md-title
Medium 20px
 .md-subhead
Regular 16px

Body Styles

Selector Output .md-body-1

Regular 14px

 .md-body-2

Medium 14px

 .md-caption

Regular 12px

Button

Buttons are based on Google's Material Design Button Spec. Currently only "raised buttons" have been implemented.

Both the md-raised-button attribute and the cgl-turquoise CSS class must be added to any button definition.

<button md-raised-button class="cgl-turquoise">
    Quisque Tempusbr
</button>

Data Table

Data tables are based on Google's Material Design Data Table Spec and is implemented with the following custom elements: cgl-data-table-container, cgl-data-table, cgl-data-table-row and cgl-data-table-cell.

A data table is responsive down to extra small devices (that is, responsive down to 600px). For extra small devices, a data table has a minimum width of 600px and a horizontal scroll is enabled to view the overflow.

The first cgl-data-table-row is automatically styled as the header row.

<cgl-data-table-container> <!-- Required for hiding overflow and enabling scroll on extra small devices -->
    <cgl-data-table>

        <!-- Header row start -->
        <cgl-data-table-row>
            <cgl-data-table-cell>
                Header 0
            </cgl-data-table-cell>
            <cgl-data-table-cell>
                    Header 1
            </cgl-data-table-cell>
            <cgl-data-table-cell>
                Header 2
            </cgl-data-table-cell>
        </cgl-data-table-row>
        <!-- Header row end -->

        <cgl-data-table-row>
            <cgl-data-table-cell>
                Row 0, Value 0
            </cgl-data-table-cell>
            <cgl-data-table-cell>
                Row 0, Value 1
            </cgl-data-table-cell>
            <cgl-data-table-cell>
                Row 0, Value 2
            </cgl-data-table-cell>
        </cgl-data-table-row>
        <cgl-data-table-row>
            <cgl-data-table-cell>
                Row 1, Value 0
            </cgl-data-table-cell>
            <cgl-data-table-cell>
                Row 1, Value 1
            </cgl-data-table-cell>
            <cgl-data-table-cell>
                Row 1, Value 2
            </cgl-data-table-cell>
        </cgl-data-table-row>
    </cgl-data-table>
</cgl-data-table-container>

Text Overflow

If you have a verbose data set, add the verbose class to the cgl-data-table element. This allows each cell to expand to the size of its content.

<cgl-data-table-container>
    <cgl-data-table class="verbose">

        <!-- Header row start -->
        <cgl-data-table-row>
            <cgl-data-table-cell>
                Header 0
            </cgl-data-table-cell>
            <cgl-data-table-cell>
                    Header 1
            </cgl-data-table-cell>
            <cgl-data-table-cell>
                Header 2
            </cgl-data-table-cell>
        </cgl-data-table-row>
        <!-- Header row end -->

        <cgl-data-table-row>
            <cgl-data-table-cell>
                Row 0, Value 0
            </cgl-data-table-cell>
            <cgl-data-table-cell>
                Row 0, Value 1
            </cgl-data-table-cell>
            <cgl-data-table-cell>
                Row 0, Value 2
            </cgl-data-table-cell>
        </cgl-data-table-row>
        <cgl-data-table-row>
            <cgl-data-table-cell>
                Row 1, Value 0
            </cgl-data-table-cell>
            <cgl-data-table-cell>
                Row 1, Value 1
            </cgl-data-table-cell>
            <cgl-data-table-cell>
                Row 1, Value 2
            </cgl-data-table-cell>
        </cgl-data-table-row>
    </cgl-data-table>
</cgl-data-table-container>

Browser Support

Supported browsers are IE 10+, and last two versions of evergreen browsers (Safari, Chrome, Firefox).

Support

Please contact mim@clevercanary.com to report defects or if you have any implementation questions.