Web Style Guide

Styling Web Content

Consistency is one major goal for the South Texas College website. Text content should be setup using the basic HTML elements outlined on this page. The website system is designed to automatically apply proper fonts, sizes and colors to the content. This approach allows you to focus on the text itself, instead of worrying about formatting styles. Once the text content is edited to be easy to read, and organized into headings and paragraphs, then you'll no longer feel the need to look for other fonts or custom colors to draw attention.

If it is necessary to draw attention to important information, consider the following options:

• Bold text - A short line of bold text can draw the eye
• Headings - choose an appropriate heading level for big, bold text
• Boxes - wrapping text inside a styled box will draw attention

Headings

Headings 1 through 6 are available to label and identify sections of content. The primary page heading should be h1, and ideally match the title of the HTML document. Subsequent headings should use H2, etc.

Regular Text

The majority of the text content will be regular paragraphs: <p>

Style the text as needed using <strong> for bold, and <em> for italics. Avoid underlining text for emphasis (web users are accustomed to identifying underlined, colored text as a link).

Images & Photos

The responsive styles will automatically shrink images to fit inside their area. But image  size can still have two different meanings:

1. the dimensions of the image (pixels)
2. the image filesize (kilobytes)

The image dimensions are simply the number of pixels. Generally, more pixels means larger filesizes. The filesize of an image refers to the storage space it fills. Large images slow down the time it takes for a page to load. 

Resize the image first, then add it to the page

The content area of a normal page is only 690 pixels across. If your image is wider it is likely slowing the load time. If the image is inside a column, it could be even smaller.

Lists

Use <ul> for bulleted lists, and <ol> for numbered lists.

Use linklist or linklist pancakes for specialty lists of links. See Toggle Indicators for creating lists with plus-minus indicators.

<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

<ol>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ol>

<ul class="linklist">
    <li><a>Link</a></li>
    <li><a>Link</a></li>
    <li><a>Link</a></li>
</ul>

<ul class="linklist pancakes">
    <li><a>Link</a></li>
    <li><a>Link</a></li>
    <li><a>Link</a></li>
</ul>

Tip: Occasionally a list is divided across columns. When viewed on a smaller screen the individual lists will stack on top of each other. However, the bottom margins on the ul or ol will create gaps in the stacked list. To eliminate the gap, add class="cont" to indicate that the list 'continues'.

Links & Buttons

For links and buttons, choose the linked text wisely. Avoid linking entire sentences or long phrases. Also, avoid meaningless labels on links/buttons - it is best to try to use the title/name of the destination as the linked text. Example:

• Avoid: Read this important document: DOWNLOAD
• Prefer: Read this IMPORTANT DOCUMENT
• Avoid: Visit our department home page: VISIT
• Prefer: Visit our DEPARTMENT HOME PAGE

Using web address as the linked text is usually not necessary. Always try to use the name/title of the destination instead.

• Avoid: Visit https://jagnet.southtexascollege.edu
• Prefer: Visit JagNet

Use the button class to make a link appear as a button. Add any of the brand classes together with the button class to set the color: primary, secondary, tertiary or accent.

Sample Button

<a class="button primary" href="your-link.html">Sample Button</a>

<ul class="plain block_buttons" style="width:75%">

<a class="wide-button primary">...</a>

<a class="wide-button slim primary">...</a>

<a class="primary wide-button image-button" href=""><img alt="..." src="..." /><span>Image Button</span></a>

Button Group

A set of joined buttons, with optional "OR" separators. The Button Group is generated by a Cascade Block-Widget, to automatically use page titles and highlight the currently active page. 

The styling is aware of its size, and will automatically stack below 500px widths.

<div class="buttongroup">
    <p class="buttons">
        <a class="current">Button Label</a>
        <span>OR</span>
        <a>Button Label</a>
        <span>OR</span>
        <a>Button label</a>
    </p>
</div>

Tables

Tables are intended for data (not for arranging the layout of a page). Always include a caption to label the table, similar to the alt-text of an image. If the table structure is complex, also describe the arrangement in the caption.

<table class="grid">
    <caption>Sample Table Caption</caption>
    <tr>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
    </tr>
    <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
    </tr>
    <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
    </tr>
</table>

Responsive Tables

All tables are given special consideration for use on smaller devices. When the page loads in the browser, a special <div class="table-resp"> wrapper is applied to every table. This allows the table to overflow horizontally off-screen, and lets the user drag back and forth to view the complete content.

There are rare occasions where this automatic treatment of tables might cause issues with third-party embedded content. To keep a table unaffected add the omit class to the table element.

<iframe width="560" height="315" 
    src="..." 
    title="YouTube video player" 
    frameborder="0" allow=" ... " allowfullscreen>
</iframe>

<div class="media-box">
    <iframe src="...?rel=0"
        title="STC Logo Reveal" 
        frameborder="0" allow=" ... " allowfullscreen>
    </iframe>
</div>

Arranging the Page

Columns

Columns come in a variety of widths, from one-half through one-fourth. Use any combination of columns to reach the full width of the area. Columns can be nested within other columns.

Two important rules:

• The first column must always include the   first class.
• After every set of columns, you must clear the float with <div class="clear"></div>.

When viewed on smaller screens, columns will stack vertically.

<div class="first one-half">
    <div class="box">
        <h3>One-Half</h3>
        <p>This is a paragraph</p>
    </div>
</div>
<div class="one-fourth">
    <div class="box">
        <h3>One-Fourth</h3>
        <p>This is a paragraph</p>
    </div>
</div>
<div class="one-fourth">
    <div class="box">
        <h3>One-Fourth</h3>
        <p>This is a paragraph</p>
    </div>
</div>
<div class="clear"></div>

If a set of columns should stay side-by-side, even on small screens, add the stay class to each column.

Boxes

The box class is a styled div, providing contrast/focus to the content.

When using columns, do not add the box class directly to the column div. Instead add a separate box div inside the column div.

Floats

Floating an element allows text to wrap around it. Use the lefty and righty classes on an image or div to easily arrange a floating element on the page.

Here is some filler text to demonstrate the text wrapping. Notice how this is different than the text in a set of columns. Here is some filler text to demonstrate the text wrapping. Notice how this is different than the text in a set of columns. Here is some filler text to demonstrate the text wrapping. Notice how this is different than the text in a set of columns.

Spacing:

Adding class="slim" to a div will condense the content. Here's what happens:

• the spacing is smaller before and after all headings & paragraphs
• the line spacing is smaller for paragraphs
• the spacing for table cells is smaller

Modal Boxes

A modal box is a 'pop-up' that only appears when a trigger is clicked. The page is dimmed while the box is displayed. Clicking the 'X' or the dimmed area will close the modal box.

<script language="javascript">
$(document).ready(function()
{
    $(".fancybox").fancybox();    //links of class fancybox are a trigger
});
</script>

<a href="#sample" class="fancybox button">Click Me</a>

<div class="modal" id="sample">
    <p>Sample modal box</p>
</div>

Collapsibles

Panels, Accordions and Tabs

These are several types of interactive units that show and hide content when a user clicks on something. This setup requires a pair of elements with special classes. Panels, Accordions, and Tabs all use these same basic classes:

1. The Trigger: use class="trigger" for the activating element.
2. The Panel: use class="panel" for the element with the associated content.

The triggers and panels are pared up automatically. The pair does not have to be next to each other. For example, the 3rd trigger in the HTML will automatically control the 3rd panel, regardless of where they appear on the page.

Setting the Default State of Panels: When a page loads all panels will be hidden automatically. If you want a panel to start already open, use the default class on the panel. And be sure to also add the active class to the corresponding trigger. This technique also works for Accordions and Tabs too.

Shareable & Linkable Panels: Users often want to share links that point to a specific part of a page. This address would look like page.html#example, which points to <element id="example">. To make sure that this behavior works for collapsibles, be sure to add a unique id="your-id" to each panel and the associated href="#your-id" to each trigger. And even if the target panel is hidden inside other collapsibles, the website framework will automatically open the necessary panels when the page loads.

The following HTML examples do not have the be followed exactly. You may use the appropriate classes with almost any element.

Regular Triggers/Panels

Clicking a trigger will open and close the associated panel. These are independent from other triggers/panels. Clicking a trigger only affects the associated panel, and nothing else.

<p><a class="trigger active" href="#trigger1">Trigger 1</a></p>
    <div id="trigger1" class="panel default">
        <p>Default Content 1</p>
    </div>
    <p><a class="trigger" href="#trigger2">Trigger 2</a></p>
    <div id="trigger2" class="panel">
        <p>Hidden Content 2</p>
    </div>
    <p><a class="trigger" href="#trigger3">Trigger 3</a></p>
    <div id="trigger3" class="panel">
        <p>Hidden Content 3</p>
</div>

Accordions

Wrap a set of triggers and panels inside an element with class="accordion" to create an Accordion. Only one panel is shown at a time; when an accordion panel is opened, any other open panel is closed automatically.

<div class="accordion">
    <p><a class="trigger active" href="#trigger4">Trigger 4</a></p>
    <div id="trigger4" class="panel default">
        <p>Default Content 4</p>
    </div>
    <p><a class="trigger" href="#trigger5">Trigger 5</a></p>
    <div id="trigger5" class="panel">
        <p>Hidden Content 5</p>
    </div>
    <p><a class="trigger" href="#trigger6">Trigger 6</a></p>
    <div id="trigger6" class="panel">
        <p>Hidden Content 6</p>
    </div>
</div>

Tabset

Creating a tabset requires a container that wraps around everything. Inside are two sections - the .tabs element for all triggers, followed by the associated panels.

<div class="tabset">
    <p class="tabs">
        <a class="trigger button active" href="#trigger7">Trigger 7</a>
        <a class="trigger button" href="#trigger8">Trigger 8</a>
        <a class="trigger button" href="#trigger9">Trigger 9</a>
    </p>
    <div id="trigger7" class="panel default">
        <p>Content 7</p>
    </div>
    <div id="trigger8" class="panel">
        <p>Default Content 8</p>
    </div>
    <div id="trigger9" class="panel">
        <p>Content 9</p>
    </div>
</div>

Tabgroup

Similar to a Tabset, but with a more modern layout and look. Note that a <ul> is required for the tabs, and the triggers do not use the button class the way Tabset triggers do.

The Tabgroup tabs will not wrap across multiple rows the way the Tabsets do. Instead, the tabs area will overflow and scroll horizontally as needed.

<div class="tabgroup">
    <ul class="tabs">
        <li><a class="trigger active" href="#trigger10">Trigger 10</a></li>
        <li><a class="trigger" href="#trigger11">Trigger 11</a></li>
        <li><a class="trigger" href="#trigger12">Trigger 12</a></li>
    </ul>
    <div id="trigger10" class="panel default">
        <p>Default Content 10</p>
    </div>
    <div id="trigger11" class="panel">
        <p>Content 11</p>
    </div>
    <div id="trigger12" class="panel">
        <p>Content 12</p>
    </div>
</div>

The Tabgroup can have a vertical layout with <div class="tabgroup vertical">. On smaller viewports there will not be enough space to show tabs and panels side-by-side, so a vertical Tabgroup will automatically revert to the default horizontal layout.

Click Triggers

<a class="trigger button" id="my_button">A Trigger</a>
...
<a href="" class="click-trigger" data-click="my_button">Click</a>

Toggle Indicators

Add the toggle class to a linklist to get plus-minus pseudo-elements. For accordions with linklist  styling (class="linklist accordion") the toggles are already included, and the class isn't required.

<ul class="linklist toggle">
    <li><a class="trigger active">Trigger 16</a>
    <div class="panel default">
        <p>Default Content 16</p>
    </div>
    </li>
    <li><a class="trigger">Trigger 17</a>
    <div class="panel">
        <p>Hidden Content 17</p>
    </div>
    </li>
    <li><a class="trigger">Trigger 18</a>
    <div class="panel">
        <p>Hidden Content 18</p>
    </div>
    </li>
</ul>

Options for combining classes: Linklist + Pancakes + Toggle:

• Trigger 19

  Hidden Content 19

• Trigger 20

  Hidden Content 20

• Trigger 21

  Hidden Content 21