Web Style Guide

Here you'll find a collection of guides and tips for managing & formatting content on the web.

This design leverages the latest HTML 5 & CSS3 technologies. Some advanced visual features are only seen when using modern browsers (including Chrome, Firefox, Safari, and IE9 and above). Other legacy browsers (IE8 and older) will still work just fine for browsing the site.

The term responsive means that the site is designed to stretch and adapt to any screen size. This means that the site looks great on a full-size monitor on a desktop, all the way down to a tiny cell phone screen.

Of course this approach means that a little extra care is needed when arranging a page. Stick to the basics & follow the tips on this page, and the web design will take care of itself, automatically!

Contact the Web Team

Have a question about your area of the STC website? Click or call!

William Collins
Digital Services Manager
872-2592

Don-Dale Chiu
Web Specialist
872-2171

Andrew Mantle
Web Specialist
872-2125

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. If the text content is straightforward & easy to read, and separated into nice paragraphs, there will be no need to look for weird fonts or tacky 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.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Color Options

Headings may have a color class for an additional highlight, especially inside a div with the .box class. Color options include red, orange, green, olive, teal, blue and purple.

Blue Heading

Purple Heading

...

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

Adding graphics to a page certainly improves the visual appeal, but if we are careless they may also make things unpleasant for our visitors.

Be aware of image size!

The website system will automatically resize images to fit inside their area. This makes the website look great on large monitors, all the way down to tiny screens on cell phones. Even though it is very easy to drop in a full-size photo straight from the camera, don't do it! It will still fit nicely on the page, but will take very long to load.

When discussing size we refer to both possible meanings:

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

The filesize of an image refers to the storage space it fills. An image that is too large will make the page load slowly - and nobody likes to wait! The dimensions of an image affect the filesize: more pixels means longer waiting!

Resize the image first, then add it to the page

You'll need graphics software to resize the photo. The content area of a normal page is only 690 pixels across. If your image is any wider it's only wasting bandwidth. If the image is inside a column, it should be even smaller.

Lists

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

Use <ul class="plain"> for no bullets at all.

Use <ul class="linklist"> for a specialty list links. See Toggle Indicators for creating Link Lists with plus-minus indicators

Unordered List

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

Ordered List:

  1. List Item
  2. List Item
  3. List Item
<ol>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ol>

Plain List:

  • List Item
  • List Item
  • List Item
<ul class="plain">
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

Link List:

<ul class="linklist">
    <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 thing as the linked text. Example:

Use the .button class to make a link appear as a gray button. Add any of the color classes together with the button class to set the color: purple, green, yellow, blue, etc.

Buttons within a paragraph of text may interrupt the normal line spacing. Instead, a single button looks great in its own paragraph:

Sample Button

<p style="text-align:center"><a class="button purple" href="your-link.html">Sample Button</a></p>

Block Buttons

A list of buttons with even widths! Use the following code, and set the width as a percentage:

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

Wide Buttons

These specialty buttons have generous padding, and always fill the width of their container.

Only available in gray (default), red, orange, green, olive, teal, blue, and purple.

<a class="wide-button purple">

Wide Button

Wide Button

Use class="wide-button slim" for less padding:

Wide Button

Button Tips:

You can easily color an entire set of buttons by using class="color-b" on their container, e.g., "blue-b" or "yellow-b". You can still give individual buttons a color.

Button Button Button Button Button

Tables

Tables should be used 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.

Sample Table Caption

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data

A table with row striping: class="grid stripe"

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Any table that extends wider than its container will scroll side to side, allowing you to still view the entire contents. Below is a table with class="grid nowrap". This class prevents line wrapping inside the table cells.

A Longer Table Heading Table Heading Table Heading
Some Longer Table Data Some Longer Table Data Some Longer Table Data
Table Data Table Data Table Data

Since table widths are flexible, the contents are compressed when viewed on a smaller screen. Sometimes this creates too much wrapping inside narrow columns. To keep the table wider than the viewport, add class="grid wide". This forces the table to be double the screen width (but only for mobile-sized screens).

A Longer Table Heading Table Heading Table Heading
Some Longer Table Data Some Longer Table Data Some Longer Table Data
Table Data Table Data Table Data
<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>

A table with class="grid plain":

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

A table with class="grid hover":

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Table Tips:

Add a color class to a table .grid to get colored backgrounds on <th> headers,similar to the button color styles. If used along with the optional .hover class, then hover effects on rows also gain color tints. Available color classes: purple, green, red, teal, blue, orange and olive.

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. Below are additional considerations when working with responsive tables.

Images inside tables:

Using tables to arrange a set of images is quick & easy, but it also poses issues when dealing with a responsive site. To ensure proper scaling of images, use the .prop class. This will keep the images from expanding to fill the cell, and also prevent it from shrinking down to nothing on smaller screens.

For a single image in a table, add the class to the cell: <td class="prop"><img src="the-image.jpg" /></td>

For a table with several images, use the class on the table: <table class="grid prop">

Opt-Out:

There are rare occasions where this special treatment of tables might cause issues with non-standard embed codes. To keep a table untouched, you may opt out of this special treatment by adding the .omit class to the table element.


Before:

<iframe width="560" height="315"
    src="//www.youtube.com/embed/kA9XK7MMpS4?rel=0"
    frameborder="0" allowfullscreen>
</iframe>

After:

<div class="media-box">
    <iframe 
        src="//www.youtube.com/embed/kA9XK7MMpS4?rel=0" 
            frameborder="0" allowfullscreen> 
    </iframe> 
</div>

Arranging the Page

Templates

Templates control the layout of the page.

  • master.dwt: The main master template that controls the page appearance: header, footer, sidebar, etc.
  • landing.dwt: for 'Landing Pages'. This is an alternate layout that has no sidebar - only a full-width content area. Also includes an optional region for banners, sliders, etc.
  • full.dwt: for 'Full-Width Pages'. Similar to Landing, this layout has no sidebar, but does keep the Breadcrumbs. Use Landing for top-level entry pages, but use Full for pages where Breadcrumbs would give the user some context.

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 - columns within columns work perfectly well. Remember - the first column must always include class="first". After every set of columns, you must clear the float with <div class="clear"></div>.

When viewed on a smaller screen, columns will stack vertically: left to right, becomes top to bottom.

One-Half

This is a paragraph

One-Fourth

This is a paragraph

One-Fourth

This is a paragraph

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

For rare circumstances, you can force a set of columns to stay side-by-side, regardless of the screen width . Add the .stay class on each column, but use with caution, since this will make the columns squeeze down to fit even tiny phone screens.

Boxes

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

When using columns, do not add the box class directly on the column divs. First, setup the column divs, and then add a separate box div inside. See the example above.

Watch Out:

Please don't use the box class directly on a column - the extra padding from the box means that a column will become larger than the proper width.

See the section on Floats for other options when you don't need a full set of columns.

Note: Always use care when using color classes within a color class to avoid unpleasant combinations.

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

A normal div

A sample paragraph to demonstrate styling. A sample paragraph to demonstrate styling. A sample paragraph to demonstrate styling. A sample paragraph to demonstrate styling. A sample paragraph to demonstrate styling.

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
  • List Item
  • List Item
  • List Item

A 'slim' div

A sample paragraph to demonstrate styling. A sample paragraph to demonstrate styling. A sample paragraph to demonstrate styling. A sample paragraph to demonstrate styling. A sample paragraph to demonstrate styling.

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
  • List Item
  • List Item
  • List Item

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. The modal box may show content from any of the following:

  • a hidden div from that same page
  • a full-size photo
  • a YouTube video

The Setup:

Add the Fancybox CSS and JS, then a bit of jQuery in the document head. This will take all links with class="fancybox" and turn them into triggers.

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

The Trigger:

The link destination determines the content of the modal box:

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

The Target:

Using <div class="modal"> keeps it hidden until the trigger shows the box:

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

Hidden Panels, Accordions & Tabs

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

  1. The Trigger: add class="trigger" to any HTML element and it will become the activating element. Also add href="#section" to the trigger to allow users to bookmark/share links to a specific Panel/Accordion/Tab.
  2. The hidden Panel: add class="panel" to any HTML element

The 'closest' set of a trigger & panel will be paired together automatically. The pair does not have to be next to each other. For example, the 3rd trigger in your code will automatically control the 3rd panel region, regardless of where they appear on the page, even if there is extra markup around and between them.

Note: The following HTML samples do not have the be followed exactly. You may use the appropriate classes with any element!

Default Panels

Panels are hidden when the page is loaded. Use class="panel default" on any panel(s) to keep it open when the page loads. This works not just for regular Panels, but inside Accordions and Tabs too.

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.

Tabs

Creating a tabset requires stricter markup than the other trigger/panels groups. Wrap a set of triggers and panels inside an element with class="tabset" to create a set of Tabs. Instead of alternating between triggers and panels, wrap all the triggers inside class="tabs", and then the panels come after. The triggers should be <a class="trigger button"></a> to maintain the correct appearance.

Notice: Optional Enhancement

If you think users will want to bookmark or share links that point to an open Panel, it isn't enough to mark the Panel with id="section". The browser would scroll there, but the Panel would still be closed. To fix this, just add href="#section" to each Trigger. This will allow the website framework to automatically "click" on the right Trigger when the page loads. The browser will scroll to the right position, and the Panel will be opened. The samples below include this optional feature.

Independent Panels

Trigger 1

Default Content 1

Trigger 2

Hidden Content 2

Trigger 3

Hidden Content 3

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

Accordion

Trigger 4

Default Content 4

Trigger 5

Hidden Content 5

Trigger 6

Hidden Content 6

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

Tabs

Trigger 7 Trigger 8 Trigger 9

Content 7

Default Content 8

Content 9

Note: Be sure to setup the initial state of the tabset:

  • Use class="trigger button active" for the active tab
  • Use class="panel default" to set the open panel
<div class="tabset">
    <p class="tabs">
        <a class="trigger button" href="#trigger7">Trigger 7</a>
        <a class="trigger button active" href="#trigger8">Trigger 8</a>
        <a class="trigger button" href="#trigger9">Trigger 9</a>
    </p>
    <div id="trigger7" class="panel">
        <p>Content 7</p>
    </div>
    <div id="trigger8" class="panel default">
        <p>Default Content 8</p>
    </div>
    <div id="trigger9" class="panel">
        <p>Content 9</p>
    </div>
</div>

Click Triggers

Occasionally you may want a secondary button or link that activates a tab or accordion on the same page. A normal href can't do it, and you can't just add another trigger since it has to be paired with its own panel. Solution: a Click-Trigger will perform a virtual click on any element you choose. Click-Triggers can be anywhere on the page - HTML order doesn't matter.

Requirements:

  1. The target element must have an ID
  2. The Click Trigger needs class="click-trigger" and also a special data-click="___" attribute that matches the ID of the target element
  3. Some devices won't respond to the click event if the link is missing the href attribute. Include href="" just to be sure
...
<a class="trigger button" id="my_button">A Trigger</a>
...
<a href="" class="click-trigger" data-click="my_button">Click</a>

Example: Open the "Trigger 9" tab above: Click

Toggle Indicators

Add class="toggle" with a .linklist, .accordion, or on the container of a set of panels to get plus-minus pseudo-elements.

If any of the panels use class="default", you must also add the active class to the corresponding trigger

<ul class="linklist toggle">
    <li><a class="trigger active">Trigger 10</a>
    <div class="panel default">
        <p>Default Content 10</p>
    </div>
    </li>
    <li><a class="trigger">Trigger 11</a>
    <div class="panel">
        <p>Hidden Content 11</p>
    </div>
    </li>
    <li><a class="trigger">Trigger 12</a>
    <div class="panel">
        <p>Hidden Content 12</p>
    </div>
    </li>
</div>