Part of UT Health San Antonio

Universal Grid

Your starting point is a universal grid divided into 12 columns. By designing pages based on a single grid, we create a website which looks consistent and resizes easily between different devices such as laptops, tablets and smartphones.

col 1

col 2

col 3

col 4

col 5

col 6

col 7

col 8

col 9

col 10

col 11

col 12

Columns can be nested, centered, pushed/pulled to the left/right, and reordered for mobile. You can find out more about the grid's options by reading the Foundation 5 Grid Documentation.


Grid Layouts

Columns can also be further grouped. The universal grid allows for a wide range of different flexible layouts and templates. The Foundation 5 Grid Documentation provides more details about how to nest columns.

Here are two example column-defined page layouts:

Example Header Column

Example Hero Area Column. Sed convallis magna eu sem. Integer tempor. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Etiam commodo dui eget wisi.

Supporting Content 1

Supporting Content 2

Supporting Content 3

Example Footer Column

Example Header Column

Example Hero Area Column. In nisl.

Supporting Content 1

Supporting Content 2

Supporting Content 3

Example Sidebar Area Column. Phasellus rhoncus pellentesque

Example Footer Column

Wide Gutters

A wide gutter option is available for two-column rows. This is used frequently on interior pages.

8/4 Column Layout, Standard

Main content area

Sidebar

8/4 Column Layout, Wide Gutters

Main content area

Sidebar

Add the class .wide-gutters to any .row element to force wide gutters on columns inside that row.

Block Grid

The Foundation Block Grid is also used on some pages where evenly-spaced columns are needed regardless of column restraints. In the example below, each column's width is scaled based on how many columns the block grid has.

  • Block Grid col 1

  • Block Grid col 2

  • Block Grid col 3

  • Block Grid col 4

  • Block Grid col 5

  • Block Grid col 6


Headers

The navigation for UTHSCSA Health Science Center varies for different pages. There are three main header styles: Homepage, Top Level, and Default. The Our Stories microsite also has it's own unique top-of-page styles. Header styles are defined in clamp.scss, except for the Homepage header, which is extended from Top Level in home.scss.

Header - Homepage

Homepage Navigation lets users choose between Patient Care, Research, or Academics. As they scroll down the page, the navigation is sticky and scrolls with them.

Homepage header when the browser is at the top of the page
Homepage header after scrolling

Header - Landing Pages

On top-level landing pages, the navigation strips down to only the logo, title, UTHSCSA branding and search. This helps make a clear path to the interior pages.

Top Level Landing Page Header

Header - Default / Interior Pages

Once you dive into interior pages, the navigation changes again to show different landing pages within the division (Patient Care, Academics, or Research). A navbar becomes the main navigation, and utility items appear to the right. The Patient Care, Academics, and Research sections follow the same navigation structure and style, but with different auto-applied color themes.

Patient Care themed header
Academics themed header
Research themed header

Footers

Like the header regions of the site, the footer has different stages based on depth.

On the homepage, the footer is has a white background with contact information, social media, and policies. An orange section contains copyright and legal information, plus an additional link to the global About Us page.

The Top-level landing pages also use this footer structure and style, but may contain section-specific data such as addresses and contact information.

Footer for homepage and top-level landing pages

The default footer is colorized by theme, and contains contact information, social media, and a general statement about UTHSCSA health Science Center San Antonio.

Patient Care themed footer
Academics themed footer
Research themed footer

Secondary Navigation

Deeper within the website, there are several strategies for additional secondary navigation.

extend here: links to all secondary-nav modules

Sidebar Navigation

The sidebar is used as a method of navigation throughout interior pages. It can be used to filter a list such as the Dentist Directory, or house several callouts that take you to other pages through the site.