Web Services Blog

Spotlights in the Responsive Templates

Posted on by Carol J Usher

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

HTML
<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>

Single-link Version

Start with the full version and simply delete the headline div. Then point both a tags to the same URL.

HTML
<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>

Photo Caption

To add a caption to an image, start with the full version and simply delete the more div and the remaining a tag. More details can be found with the images documentation.

Note: this version will also work with any of the brand colors, though we suggest using gray.

HTML
<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.

Posted in Cascade Resources

Responsive Template Grid

Posted on by Carol J Usher

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.

Posted in Cascade Resources, Cascade Server How-To...

Adding an Icon to a Button in the Responsive Templates

Posted on by Carol J Usher

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.

HTML
<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>









			


	

		Posted in Cascade Resources, Cascade Server How-To...	






	

		
Buttons in Responsive Templates
			

				Posted on  by Carol J Usher			

			



	
	

		
Draw attention to a link by adding the class button.






HTML


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






Rendered HTML


A button








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.



			


	

		Posted in Cascade Resources, Cascade Server How-To...	






	

		
Block Grid for Responsive Templates
			

				Posted on  by Carol J Usher			

			



	
	

		
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.



			


	

		Posted in Cascade Resources, Cascade Server How-To...	






	

		
Accordions and Tabs
			

				Posted on  by Carol J Usher			

			



	
	

		
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.



			


	

		Posted in Cascade Resources, Cascade Server How-To...	










	

		
Customize your lists
			

				Posted on  by 			

			



	
	

		
You need to create an ordered or unordered list and you are tired of seeing the same old list characters like the ones below.


    

  • line one
    • 

  • line two
    • 

  • line three
    • 



    

  1. line one
    2. 

  2. line two
    3. 

  3. line three
    4. 



How can you customize your lists?


Apply list styles like these:




    

  • circle
    • 



    

  • square
    • 



    

  1. lower alpha character
    2. 



    

  1. upper alpha character
    2. 







    

  1. leading-zero
    2. 



    

  1. lower roman numeral
    2. 



    

  1. upper roman numeral
    2. 





by doing this:


<ul class=”circle”>

<li>circle</li>

</ul>


<ul class=”square”>

<li>square</li>

</ul>


<ol class=”lower-alpha”>

<li>lower alpha character</li>

</ol>


<ol class=”upper-alpha”>

<li>upper alpha character</li>

</ol>


<ol class=”decimal-leading-zero”>

<li>decimal leading zero</li>

</ol>


<ol class=”lower-roman”>

<li>lower roman numeral</li>

</ol>


<ol class=”upper-roman”>

<li>upper roman numeral</li>

</ol>



			


	

		Posted in Cascade Server How-To...Tagged , , 	






	

		
Create a reference asset
			

				Posted on  by 			

			



	
	

		
Suppose you have an asset in Cascade you want to display in the left navigation of more than one site. You can copy the asset over and over again into each of the folders for the site, but you don’t want to duplicate an asset multiple times. What do you do? Create a reference asset! A reference asset is a special asset in  Cascade that represents an existing asset in another location. This means a  single asset can appear to exist in multiple locations.  The asset will appear in the left navigation as if it had been copied to multiple folder but in actuality, it just links to the original asset.


To create the reference:


    

  1. Select the page you want to  create a Reference for from the asset tree.
    2. 

  2. Go to the Advanced menu and choose Reference. The Reference window is displayed.
    3. 

  3. Enter a system name for the reference. The system name should be different from any other asset in the same folder as the reference asset. The display name of the asset being referenced will be retained. You may change it after the reference has been created.
    4. 

  4. Navigate to the folder where the reference will be displayed. Submit the asset.
    5. 

  5. The Reference is now created!
    6. 



Notice the reference asset in the asset tree. Select the reference asset and the referenced page will be displayed.



			


	

		Posted in Cascade Server How-To...Tagged , ,