Code
Package Downloads: Version 3.4.3
Strata Three Files
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> */
}
}
Additional Elements
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