This section covers the basic structure of the website. It also covers areas that are that are universal across the site, such as the global header and footer. These things should not change (except when the site is redesigned) and should be included in the creation of any new templates.
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.
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
A wide gutter option is available for two-column rows. This is used frequently on interior pages.
Main content area
Sidebar
Main content area
Sidebar
Add the class .wide-gutters to any .row element to force wide gutters on columns inside that row.
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
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.
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.
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.
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.
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.
The default footer is colorized by theme, and contains contact information, social media, and a general statement about UTHSCSA health Science Center San Antonio.
Deeper within the website, there are several strategies for additional secondary navigation.
extend here: links to all secondary-nav modules
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.