Category: Cascade Resources

See sample Contact Us page here.

To have a map to your address, go to Google Maps.

Enter your street address in the search box, top-left of page. For example: 201 Sikes Hall, Clemson University, Clemson SC.

Click on the Menu Drop dropdown, choose “Share or Embed.”

Choose Embed Map.

Copy map URL: https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d6562.369538689062!2d-82.84129707279291!3d34.67528589506186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1s201+Sikes+Hall%2C+Clemson+University%2C+Clemson+SC!5e0!3m2!1sen!2sus!4v1492534935806

View Contact Us page in HTML.

Replace Google Map URL with the new code.

For assistance, contact ows@g.clemson.edu.

Note: RSS feeds are included using a shortcode. Shortcodes are available to help you quickly add more complex features to your pages. To add shortcodes, open the HTML source editor in Cascade and paste the shortcode where you’d like the element to appear within your layout.

The RSS shortcode is used to incorporate an RSS feed into the page. It can accept any valid RSS URL. To add a feed, simply wrap the RSS URL in the [rss][/rss] shortcode, as shown below.

Shortcode

[rss]http://newsstand.clemson.edu/feed/[/rss]

There are two attributes available to modify the appearance of your RSS feed.

• format – currently, the only alternative format supported is blocks, which shows a story with an image (where available) and the title in a block together
• num – specify the maximum number of stories shown

Shortcode

[rss num=10 format=blocks]http://newsstand.clemson.edu/feed/[/rss]

For more information, see Style Guide/RSS/News Feeds.

Note: Video embeds are done using a shortcode. Shortcodes are available to help you quickly add more complex features to your pages. To add shortcodes, open the HTML source editor in Cascade and paste the shortcode where you’d like the element to appear within your layout.

The video shortcode is used to embed videos from Youtube, Vimeo and ClemsonTV. To add a video, simply wrap the video’s URL in the shortcode. To obtain the URL of your video, navigate to the page where the video is located as if you were going to watch it, then copy the URL from the address bar.

Learn more about embedding videos at Style Guide/Videos.

Use spotlights to feature a bit of content on your page. The most comprehensive version includes both a link to a specific story (or event, program, etc.) as well as a link to the overall category or collection of stories (or events, programs, etc.). You can pare this down to feature just a single link or to work as a caption for a photo. All three versions are included below.

Note: choose any of the brand colors to customize a spotlight’s appearance.

Full Version

<div class="spotlight bowman"> 
    <a href="Individual URL">
        <img src="" alt="image alt text">
        <div class="headline">
            <strong>Short Headline</strong>
            <br>Person or Subject
        </div>
    </a>
    <div class="more">
        <a href="Collection URL">
            Name of <strong>collection</strong>
        </a>
    </div>                
</div>

<div class="spotlight regalia"> 
    <a href="Single URL">
        <img src="" alt="image alt text">
    </a>
    <div class="more">
        <a href="Single URL">
            Name of <strong>featured content</strong>
        </a>
    </div>                
</div>

<div class="spotlight gray"> 
    <img src="" alt="image alt text">
    <div class="headline">
        <strong>A Caption</strong>
        <br>For Your Photos
    </div>
</div>

See examples of spotlights at Style Guide/Spotlights.

Our template uses a 16-column version of the Foundation framework. More information on the Foundation grid can be found on Zurb’s website.

Start by adding a div element with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a columns class within that row. Specify the widths of each column with the small-#, medium-#, and large-# classes, with # ranging from 1-16.

The template is mobile-first, so larger screens will inherit small styles, but not the other way around. For example, a column with the class small-3 will still occupy 3 columns at the large screen size, even if the column had no additional classes. On the other hand, if a column has only a large-3 class, the element will expand to the full width of the row at smaller screen sizes, instead of occupying 3 columns. See the examples below for reference.

HTML

<div class="row">
    <div class="large-8 columns">...</div>
    <div class="large-8 columns">...</div>
</div>
<div class="row">
    <div class="large-8 small-12 columns">...</div>
    <div class="large-8 small-4 columns">...</div>
</div>
<div class="row">
    <div class="large-10 medium-6 small-5 columns">...</div>
    <div class="large-3 medium-4 small-5 columns">...</div>
    <div class="large-3 medium-6 small-6 columns">...</div>
</div>

Advanced Use

Grids can be nested indefinitely by simply including a new row inside an existing column. Nested columns will use the width of their parent column as their maximum-possible width.

HTML

<div class="row">
    <div class="small-12 columns">12
        <div class="row">
            <div class="small-12 columns">12 Nested
                <div class="row">
                    <div class="small-12 columns">12 Nested Again</div>
                    <div class="small-4 columns">4</div>
                </div>
            </div>
            <div class="small-4 columns">4</div>
        </div>
    </div>
    <div class="small-4 columns">4</div>
</div>

See examples and learn more at Style Guide/Grid.

Adding an Icon

In addition to the styling above, you can also pair your link with an icon to make your button more visual. See the full set of available icons and learn more about how to use them.

<a href="" class="button expand blueridge">
    <span class="icon-paw"></span>
    Expanded Button
</a>
<a href="" class="button bowman">
    <span class="icon-paw"></span>
    Regular Button
</a>

Draw attention to a link by adding the class button.

<a href="" class="button">A button</a>

Styling

There are a few classes available to modify the appearance of your button.

• expand – Makes the button stretch to the width of its container
• radius – Gives the button rounded corners
• color – Choose from any of the brand colors to customize the button

HTML

<a href="" class="button expand">This button is expanded</a>
<a href="" class="button radius">This button has rounded edges</a></p>
<a href="" class="button bowman">This is a bowman field button</a></p>
<a href="" class="button blueridge radius">This button is blue ridge and has rounded edges</a></p>

For more information see, Style Guide/Buttons.

Use the class small-block-grid-# on an unordered list to make a simple grid with # items in each row.

HTML

<ul class="small-block-grid-3">
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
</ul>

Advanced Use

Add size-specific classes to control how many items show on each row at different screen sizes. Sizes include: small-block-grid-#, medium-block-grid-# and large-block-grid-#

HTML

<ul class="large-block-grid-6 medium-block-grid-3 small-block-grid-2">
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
</ul>

For more information, see Style Guide/Block Grid.

Accordions and tabs are a great way to organize a lot of content on a single page. You can fill the content area with any sort of content, including a grid.

IMPORTANT: The key to accordion and tab functionality is that the content div has a unique id and that the navigation link is an anchor to that div, i.e. href="#id". Because of the unique IDs for the accordion sections, you can also create an anchor link to a specific dropdown section. For more information, contact ows@g.clemson.edu.

Accordions

HTML

<ul class="accordion" data-accordion>
    <li class="accordion-navigation">
        <a href="#panel1a">Accordion 1</a>
        <div id="panel1a" class="content active"><!--Your content goes here--></div>
    </li>
    <li class="accordion-navigation">
        <a href="#panel2a">Accordion 2</a>
        <div id="panel2a" class="content"><!--Your content goes here--></div>
    </li>
    <li class="accordion-navigation">
        <a href="#panel3a">Accordion 3</a>
        <div id="panel3a" class="content"><!--Your content goes here--></div>
    </li>
</ul>

Tabs

HTML

<ul class="tabs horizontal" data-tab>
    <li class="tab-title active"><a href="#panel11">Tab 1</a></li>
    <li class="tab-title"><a href="#panel12">Tab 2</a></li>
    <li class="tab-title"><a href="#panel13">Tab 3</a></li>
    <li class="tab-title"><a href="#panel14">Tab 4</a></li>
</ul>
<div class="tabs-content">
    <div class="content active" id="panel11"><!--Your content goes here--></div>
    <div class="content" id="panel12"><!--Your content goes here--></div>
    <div class="content" id="panel13"><!--Your content goes here--></div>
    <div class="content" id="panel14"><!--Your content goes here--></div>
</div>

For more information, see Style Guide/Accordions and Tabs.

General overview of Clemson’s version of Cascade.

http://media.clemson.edu/ows/cascade-brand09.pdf