Web Style Guide

Get details for managing and formatting content on the web using STC's college-wide website styles.

New in Fall 2023

Brand Colors

The brand color classes now include Tertiary and Accent!

All four brand classes can be applied to most elements and classes: headings, box, button, wide-button, grid, linklist, etc.

If any other elements need a branded background color, use {brand}-bg (e.g. primary-bg, secondary-bg, etc.) to avoid hard-coded inline styles whenever possible.

NOTE: The old color-specific classes are now deprecated and will be removed at a future date. Please update to only use the brand color classes.

Tabgroup

Similar to the Tabset, but much more flexible, with a modern look and an option for vertical tabs too.

Button Group

A set of buttons that can be useful as a navigation list or related links (see Law Enforcement). This can be generated by a Widget-Block to automatically use the linked page titles and also highlight the current page.

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.

Color options include primary, secondary, tertiary and accent.

Primary Color Heading

Secondary Color Heading

Tertiary Color Heading

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

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.

Unordered:

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

Ordered:

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

Link List:

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

Pancakes:

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

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

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>

Button Colors

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

Block Buttons

Buttons widths are normally determined by the text inside. But for a set of buttons, you may want a consistent width. Use the block_buttons class on the list parent and add a percentage width:

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

With Class:

Without Class:

Wide Button

Use the wide-button class for a larger button with generous padding. This type of button will always fill the width of the container.

Wide Button

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

Adding the slim class to a wide-button will reduce the padding:

Slim Wide Button

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

Image Button

Add the image-button class to a wide-button to create a combination image and button. The image is inserted inside the link, and the text is wrapped inside a span. The order of the image and span can be reversed if needed.

... Image Button

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

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

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

A table with class="grid plain":

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

A table will have all borders with class="grid border":

Table Heading Table Heading Table Heading
Table Data Table Data 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>

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: primary, secondary, tertiary and accent.

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

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.


Before:

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

After:

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

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>

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.

A Primary Box...

<div class="box primary">

A Secondary Box...

<div class="box secondary">

A Tertiary Box...

<div class="box tertiary">

An Accent Box...

<div class="box accent">

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

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.

Modal Samples

Show a div (hidden on this page):

Note: if your div is already visible on the page, fancybox will automatically hide it after closing. Add data-restore="true" to keep it visible on the page.

View Inline Div

Show an image:

View Image

Show another site/page (add data-type="iframe" to the trigger):

View Iframe

Show a single div from another page (add data-type="ajax" and data-filter="#div-id" to the trigger):

View Ajax Div


For more options, visit Fancybox.

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">
    <p>Sample modal box</p>
</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. 
  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 the HTML will automatically control the 3rd panel, regardless of where they appear on the page.

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

Default Panels

Panels are hidden when the page loads. Adding the  default class to a panel will make it appear open already when the page loads. This default class also works on panels inside Accordions and Tabsets too.

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>

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.

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>

Tabset

Creating a tabset requires stricter markup than the other trigger/panel groups.

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>

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.

Default Content 10

Content 11

Content 12

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

  • Use class="trigger active" for the active tab
  • Use class="panel default" to set the open panel
<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.

Default Content 13

Content 14

Content 15


Shareable & Linkable Panels

Users will often want to bookmark or share links that point to an open panel. Even if we add id="example" to the panel, the browser could only scroll there, but the panel would still be closed. To fix this, just add href="#example" to the trigger. This will allow the website framework to automatically "click" on the matching trigger when the page loads. The browser can now scroll to the right position, and the panel will be opened. The demo samples above include this optional feature.

Click Triggers

A Click-Trigger is a link that can do a virtual click on any trigger you choose. This will be necessary if you need a separate button or link that activates a panel, tab or accordion on that same page. A regular link can't open a panel, but using this class and href can do it. 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>

Demo: 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 you have any of the panels using class="default" to start in the open state, you also need to add the active class to the corresponding trigger.

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

Combination: Linklist + Pancakes + Toggle:

back to top