Style Guide

Foundation Shortcodes: http://themes.required.ch/docs/shortcodes/


Font Awesome Icons: http://fortawesome.github.io/Font-Awesome/icons/

Font Awesome Cheat Sheet: http://fortawesome.github.io/Font-Awesome/cheatsheet/

 Font Awesome Icon
 Font Awesome Icon
 Font Awesome Icon


Alert

[alert class=”alert-box.success” close=”no”] Content goes in here. [/alert] // no close button [alert timeout=10000] [/alert] // timeout of 10s


data-dropdown=”contentDrop”

Content goes in here.


Blockquote

A leader’s first work, her most important and enduring work, is her interior work.

Dr. Sanford Shugart, President of Valencia College


Button

Can be applied using a shortcode or from the WYSIWYG “Style” drop-down menu. Use class to control size small, default or large. Two options for button color; default button color = red; “tertiary” button = gray

Clearing

[clearing]


Code

<code> </code>


Columns

one-half

one-half

one-third

one-third

one-third

one-third

two-thirds

two-thirds

one-third

one-fourth

one-fourth

one-fourth

one-fourth


Google Analytics – Event Tracking

Add to a href and edit parameters to reflect REGION, ACTION, and PAGE. onclick=”_gaq.push([‘_trackEvent’, ‘ACTION PALETTE‘, ‘CONTACT AN ADVISOR BACHELORS‘, ‘REQUEST INFORMATION BACHELOR OF SCIENCE DEGREES | FUTURE STUDENTS | VALENCIA COLLEGE‘]);”


Inline list

[inline-list]

  • Link 1
  • Link 2
  • Link 3

[/inline-list]


Display Shortcode Without Rendering

The trick is to double-up on the brackets. Here is a screenshot of the back-end:

Screen Shot 2014-08-20 at 5.15.00 PM


Here I’ve added brackets on the outside of the row. It displays without rendering:

[row] [one-half][panel]one-half[/panel] [/one-half] [one-half][panel]one-half[/panel] [/one-half] [/row]

No brackets below, it renders as it should:

one-half

one-half


Dropdown

class=”link”

Content goes in here.

Dropdown

class=”content”

Content goes in here.


Feed

Variables

Three Feed Types: IMPORTANT: Using just the feed type as a shortcode will return ALL courses or events. Preview:  c2k-upcoming-courses-preview Course Details:  c2k-upcoming-courses Events:  events Feed courses from a master course: program=”Master Course Title” Control number of courses to display: max=”4″ Exclude courses from a master course category from a feed: exclude=”Master Course Title”


Courses

Preview List from C2K (Continuity)

List courses from a Master Course parent category (program); control the number of courses displayed. [c2k-upcoming-courses-preview program=”Languages” max=”4″]


Course Details List from C2K (Continuity)

List courses from a Master Course parent category [c2k-courses program=”Landscape Horticulture Technology” max=”4″]



Float

vitae magazine
vitae magazine


Hover-box




Arts Event

The East Campus Performing Arts Center hosts dance, theater and music events throughout the year.


Performing Arts Center




International reception


International Event

International Student Services provides immigration, employment and cultural workshops for international students.



College Night

College fairs bring universities from around the country to recruit our international students for transfer.


College Night



Hide for Mobile

DIV class=”hide-for-small”
Valencia College - Degree and Certificate Options

Horizontal Rule – Shortcode

[hr]



Horizontal Rule – HTML

[code]


[/code]





Section-container

type=”tabs”

Title 1

Content goes in here. Use the class “active” to show an open tab. Remove “active” to show a closed tab.

Title 2

Content goes in here.

Title 3

Content goes in here. Use the class “active” to show an open tab. Remove “active” to show a closed tab.

type=”accordion”

Accordion Title 1

Content goes in here. Use the class “active” to show an open tab. Remove “active” to show a closed tab.

Accordion Title 2

Content goes in here. Use the class “active” to show an open tab. Remove “active” to show a closed tab.

Accordion Title 3

Content goes in here. Use the class “active” to show an open tab. Remove “active” to show a closed tab.

type=”vertical-tabs”

Zurb v4.3.2

Accordion Title 1

Content goes in here. Use the class “active” to show an open tab. Remove “active” to show a closed tab.

Accordion Title 2

Different content goes in here. Use the class “active” to show an open tab. Remove “active” to show a closed tab.

Accordion Title 3

Different content goes in here. Use the class “active” to show an open tab. Remove “active” to show a closed tab.

type=”horizontal-nav”

Zurb v4.3.2

Accordion Title 1

Content goes in here. Use the class “active” to show an open tab. Remove “active” to show a closed tab.

Accordion Title 2

Different content goes in here. Use the class “active” to show an open tab. Remove “active” to show a closed tab.

Accordion Title 3

Different content goes in here. Use the class “active” to show an open tab. Remove “active” to show a closed tab.

Reveal type=”modal”

[reveal link=”Link text” linkclass=”button radius alert”] … [=reveal link=”Link text” linkclass=”button radius secondary”] … [=/reveal] [/reveal]
[reveal type=”modal”] Content goes in here. Button [/reveal]

Video Modal

Click to play video. Add text here… or not


Modals using snippet

Modal in a modal… Example Modal w/Video…

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...

×

This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.

×

This modal has video

×

Embed – Google Map iframe

Control height with height=”XXXpx”


Embed – YouTube Video iframe

Control height with height=”XXXpx”



Flex Video

Flex Video [flex-video][/flex-video]


Tooltip

[tooltip position=”top” title=”What goes in the tip”]Text that has a tip[/tooltip]


Orbit

[orbit]


Menus