Code

Package Downloads: Version 3.4.3


Strata Three Files

Download Strata Three

Once downloaded and unzipped, you should find the Strata Three files within the following directory structure:

_/s3.4/
  ├── css/
  │   ├── bootstrap.min.css (custom output)
  │   ├── config.json
  │   ├── print.css
  │   ├── strata-extend.min.css
  │   └── strata.min.css
  ├── img/
  │   ├── arrow/
  │   ├── bi/
  │   ├── fsu-seals/
  │   ├── icons/
  │   └── point/
  ├── js/
  │   ├── bootstrap.min.js
  │   └── strata-extend.min.js
  │   └── strata.min.js
  └── index.html


WordPress Theme

Strata Three is available as a WordPress theme. Modify and extend the parent theme through the child theme, otherwise, future updates to the parent theme will overwrite all your hard work.

WordPress Theme
WordPress Child Theme
ACF Plugin for Strata Three

Usage of Strata Three

Usage

/* Head Styles */
<link rel="stylesheet" type="text/css" href="https://use.typekit.net/qwg1fji.css">
<link rel="stylesheet" type="text/css" href="/_/s3.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/_/s3.3/css/strata.min.css">
<link rel="stylesheet" type="text/css" href="/_/s3.3/css/strata-extend.min.css">
<link rel="stylesheet" type="text/css" href="/_/s3.3/css/print.css" media="print">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" media="all" />

/* Footer Scripts */
<script type='text/javascript' src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type='text/javascript' src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type='text/javascript' src="/_/s3.3/js/bootstrap.min.js"></script>
<script type='text/javascript' src="/_/s3.3/js/strata.min.js"></script>
<script type='text/javascript' src="/_/s3.3/js/strata-extend.min.js"></script>

Personalization

Title and Navigation Locations

The site title is duplicated in order to accommodate the fixed header while navigation is duplicated for better mobile and desktop usage.

Site Title: #fsu-top and #fsu-title; Site Navigation: nav.fsu-nav-global and #fsu-nav-primary

Site Title: #fsu-top
<div id="fsu-top" class="col-xs-7 col-sm-8 hidden small text-uppercase"><p><a href="https://fsu.edu">FSU</a> | <a href="/">Web Style Guidelines and Resources</a></p></div>


Site Title: #fsu-title
<h1 id="fsu-title"><a href="/">Web Style Guidelines and Resources</a></h1>

Site Navigation: nav.fsu-nav-global (first instance)
<nav class="fsu-nav-global" aria-labelledby="global-navigation">
... navigation ...
</nav>

Site Navigation: #fsu-nav-primary
<div id="fsu-nav-primary" class="s3-c s3-scored">
    <nav aria-label="Site Navigation" class="navbar">
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                ... navigation ...
            </ul>
        </div>
    </nav>
</div>

File Location

Recommended placement of custom code is within /_/local/. This style guide uses the following structure for its files:

_/local/
  ├── css/
  │   ├── strata-styleguide.css
  │   └── strata-styleguide.min.css
  └── js/
      ├── strata-styleguide.js
      └── strata-styleguide.min.js

Local resource calls are after Strata Three's calls:

/* Head */
<link rel="stylesheet" type="text/css" href="/_/local/css/strata-styleguide.min.css">

/* Footer */
<script type="text/javascript" src="/_/local/js/strata-styleguide.min.js"></script>

Fixed Header

This package includes code for a fixed header when you scroll past the header using a browser wider than 767px.
The default height of 164px (based on fsu.edu) may need to be adjusted to meet your site's needs.

body.add-fixed {margin-top:164px}

Find the height in px of your website's <header> and replace the number value (add this to your site specific css file.) You may need to adjust the margin-top value at each of the different breakpoints


body.add-fixed {margin-top:164px}
@media screen and (max-width:991px) and (min-width:768px) { /* sm */
	body.add-fixed {
		margin-top:231px; /* height of <header> */
	}
}
@media screen and (min-width:992px) { /* md -lg */
	body.add-fixed {
		margin-top:190px; /* height of <header> */
	}
}

Version Notes

Strata 3.3.9 (Release Date: October 23, 2020)

  • Accessibility: Added aria labels for navigation and search
  • Interface: Adjusted Strata spacing in relation to typography changes
  • Interface: Replaced Font Awesome with last version available without kit
  • Interface: Modified button line height and x-small button display
  • Interface: Modified float classes and added a full width option for mobile (xs) display
  • Typography: Replaced Benton Sans with Acumin Pro by Adobe
  • Typography: Adjusted font sizes and weights to accomodate Acumin Pro
  • Typography: Updated Adobe Font link script
  • Scripts: Updated automatic external link icon from to

Strata 3.3.8 (Release Date: June 26, 2020)

  • Interface: Adjustments to default table styles

Strata 3.3.7 (Release Date: June 19, 2020)

  • Interface: Minor corrections to thead styles
  • Interface: Minor corrections to navigation dropdown styles

Strata 3.3.6 (Release Date: June 2, 2020)

  • Accessibility: Replaced <i> with <span> when calling FontAwesome header icons
  • Footer: Corrected alt text typo
  • Scripts: replaced single quotes with double quotes

Strata 3.3.5 (Release Date: May 12, 2020)

  • Accessibility: Updated color contrast and hover/focus states for .nav-icons and .branded
  • Primary: Updated branded social media navigation

Strata 3.3.4 (Release Date: April 30, 2020)

  • Accessibility: Close buttons at the end of ulility bar's collapsable elements for tabbed navigation

Strata 3.3.3 (Unreleased: April 29, 2020)

  • Accessibility: CSS adjustement — focus state color corrections

Strata 3.3.2 (Release Date: April 23, 2020)

  • Accessiblility: Improved the Skip Link display for accessibility
  • Interface: CSS adjustments — button font, padding and marging adjustment
  • Strata: JS adjusments — edited rules for displaying Font Awesome icons automatically
  • WordPress: ACF update to version 5.8.9

Strata 3.3.1 (Release Date: March 22, 2020)

  • Strata: CSS adjustments — button font size

Strata 3.3 (Release Date: September 30, 2019)

  • Strata: CSS and JS adjustments to improve color contrast for improved accessibility
  • Images: Listing only preferred ratios
  • Interface: Additional jQuery to automatically add icons for emails and external links
  • Interface: Changed s3-nv to nav-vert and adjusted its code order
  • Interface: Added background borders to links within main and footer
  • Patterns: Removal of rattlesnake pattern
  • Strata: HTML adjustments in header and main and footer for improved accessibility
  • Strata: Color edits — removal of s3-n1s, s3-gt1k, s3-gt2k, and s3-gt3k; shift in s3-c to #ffffff
  • Strata: Consolidated extended features into one call each for CSS and JS
  • Typography: Changed Benton Sans font source from WebType to Adobe Fonts (TypeKit)
  • Typography: Refined headers and buttons to utilize Benton Sand Condensed
  • WordPress: ACF layout adjustments for more compact editing.
  • WordPress: Removal of Slider: Centered Content and Slider: Overlay