Skip to main content
Skip to main content

Web Style Guidelines
and Resources

Strata - Version Three

Code

Package Downloads


Strata Three Files

Download Strata Three (928KB)

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

_/s3/
  ├── css/
  │   ├── extend/
  │   │   ├── strata-backgrounds-diamonds.min.css
  │   │   ├── strata-backgrounds-saw.min.css
  │   │   ├── strata-blocks.min.css
  │   │   ├── strata-features.min.css
  │   │   └── strata-flexslider.min.css
  │   ├── bootstrap.min.css (custom output)
  │   └── strata.min.css
  ├── img/
  │   ├── arrow/
  │   ├── bi/
  │   ├── colors/
  │   ├── fsu-seals/
  │   └── point/
  ├── js/
  │   ├── extend/
  │   │   ├── flexslider.min.js
  │   │   ├── jquery.easing.js
  │   │   ├── jquery.flexslider.min.js
  │   │   ├── modernizr.js
  │   │   └── strata-carousel.min.js
  │   ├── bootstrap.min.js
  │   └── strata.min.js
  ├── index-local.html
  └── index-remote.html

* Only significant files and directories are shown.

The files index-local.html and index-remote.html can be used for reference in building your own site. Please refer to the Personalization and Extending Strata Three section below for customizing your builds.

Note: Web fonts will only work on the fsu.edu domain.


Examples

Download Examples (41MB)

The examples package contains Strata Three plus code for designs found in the Examples section.

/examples/
 |── _/s3/
 |── examples/
 |   ├── alpha.html
 |   ├── bravo.html
 |   ├── charlie.html
 |   ├── delta.html
 |   ├── echo.html
 |   ├── foxtrot.html
 |   ├── golf.html
 |   ├── home-1.html
 |   ├── home-2.html
 |   ├── home-3.html
 |   ├── home-4.html
 |   ├── hotel.html
 |   ├── india.html
 |   ├── interior-1.html
 |   ├── interior-2.html
 |   ├── interior-3.html
 |   ├── interior-4.html
 |   ├── interior-5.html
 |   ├── interior-6.html
 |   ├── interior-7.html
 |   ├── interior-8.html
 |   ├── juliet.html
 |   └── kilo.html
 ├── images/
 |   └── examplees-assets/
 └── index.html

* Only significant files and directories are shown.

Usage, Extension and Personalization
of Strata Three

Minimal Usage

Basic usage requires the custom Bootstrap and Strata files (CSS in the head, JS before the closing HTML). You may further minify these or call them directly from fsu.edu/_/s3/.

/* Head */
<link href="//cloud.webtype.com/css/83d58b53-6c1e-4957-b3f5-ca921f831767.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/_/s3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/_/s3/css/strata.min.css">
<link rel="stylesheet" type="text/css" href="/_/s3/css/print.css" media="print">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

/* Footer */
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js?ver=20150709'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js?ver=20150709'></script>
<script type="text/javascript" src="/_/s3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/_/s3/js/strata.min.js"></script>

Extending Strata Three

Additional files are included for styling the features and sliders found in the Design Patterns section of this site. You may opt to use custom feature and slider code. Refer to the next section for recommended placement.

/* Head */
<link rel="stylesheet" type="text/css" href="/_/s3/css/extend/strata-flexslider.min.css">
<link rel="stylesheet" type="text/css" href="/_/s3/css/extend/strata-features.min.css">

/* Footer */
<script type="text/javascript" src="/_/s3/js/extend/jquery.flexslider.min.js"></script>
<script type="text/javascript" src="/_/s3/js/extend/jquery.easing.js"></script>
<script type="text/javascript" src="/_/s3/js/extend/modernizr.js"></script>
<script type="text/javascript" src="/_/s3/js/extend/flexslider.min.js"></script>
<script type="text/javascript" src="/_/s3/js/extend/strata-carousel.min.js"></script>

Backgrounds

Additional background are available by extension. Please refer to Code Library: Backgrounds for usage.

/* Head */
<link rel="stylesheet" type="text/css" href="/_/s3/css/extend/strata-backgrounds-rs.min.css">
<link rel="stylesheet" type="text/css" href="/_/s3/css/extend/strata-backgrounds-saw.min.css">

Image Blocks

Additional image block styles are available by extension. Please refer to Code Library: Blocks for usage.

/* Head */
<link rel="stylesheet" type="text/css" href="/_/s3/css/extend/strata-blocks.min.css">

Shapes

Block shape styles are available by extension. Please refer to Code Library: Shapes for usage.

/* Head */
<link rel="stylesheet" type="text/css" href="/_/s3/css/extend/strata-shapes.min.css">

Personalization: Title and Navigation Locations

The site title is duplicated in order to accomodate 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">
... navigation ...
</nav>

Site Navigation: #fsu-nav-primary
<div id="fsu-nav-primary" class="s3-c s3-scored s3-b-b0">
	<div class="navbar text-center" role="navigation">
		... navigation ...
	</div>
</div>

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

Personalization: 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> */
	}
}

Versions

Strata 3.1.8 (Release Date: June 20, 2017)

Updates

  • Interface: Faculty & Staff Directory link change in /_/s3/js/strata.min.js
  • Updated /_/s3/css/extend/strata-backgrounds-rs.min.css

Strata 3.1.7 (Release Date: March 13, 2017)

Updates

  • Interface: Updated Slider 2 - uses new flexslider-overlay class
  • Typography: Updated font sizes for mobile display

Strata 3.1.6 (Release Date: December 12, 2016)

Bug Fixes

  • Interface: Fixed dropdown submenu wrapping (overwriting Bootstrap's whitespace from no-wrap to normal)

Updates

  • Interface: Adjusted global navigation mobile view to be camel case

Strata 3.1.5 (Release Date: September 19, 2016)

Bug Fixes

  • Interface: Fixed mobile dropdown submenu
  • Interface: Fixed vertical navigation borders

Strata 3.1.4 (Release Date: July 7, 2016)

Updates

  • Code: Added jQuery easing and Modernizr JavaScript libraries (see Code/Personalization)
  • Guidelines: Added video information to Images
  • Interface: Added top and bottom specific margins (.s3-mt-x, .s3-mb-x)
  • Patterns: Added .s3-flex-f for unobtrusive slider arrows. Added .s3-flex-s for dark slider arrows
  • Strata: Updated easing, slideshowSpeed, and animationDuration values within /_/s3/extend/flexslider(.min).js

Strata 3.1.3 (Release Date: May 27, 2016)

Bug Fixes

  • Interface: Extended feature layout and styles - corrected issues with .row and .col-xs-12 in feature layouts
    (Lines 63-100 in /_/s3/css/extend/strata-features.css)
    All example files have been modified to correct features

Strata 3.1.2 (Release Date: May 12, 2016)

Updates

  • Strata: Mobile menu is more touch-friendly with larger touch area

Bug Fixes

  • Interface: Sub-navigation styles - corrected an issue where menus did not have the proper color styles applied

Deletions

  • Strata: Removal of s3-light classes (Unused)

Strata 3.1.1 (Release Date: May 5, 2016)

Updates

  • Interface: Padding adjustments to .headerSearchBox

Strata 3.1 (Release Date: May 2, 2016)

Updates

  • Header: Colors in #fsu-top to match #fsu-home
  • Header: Corrected #fsu-subhead to #fsu-subheading and based it upon font size
  • Header: Moved style controls from #fsu-masthead to #fsu-header
  • Interface: Box shadows added for .s3-bg-* strata
  • Interface: Button colors based upon strata color
  • Navigation: Moved pagination to strata-navigation.css
  • Navigation: Spacing change to .nav-social
  • Strata: Margin adjustmeents on .s3-left and .s3-right
  • Strata: Modified .s3-t and .s3-bg-t to show only on sizes sm and larger
  • Typography: Adjusted font weight on captions to accomodate poor font rendering in some platforms and browsers
  • Typography: Font size adjustments moved to strata-typography.css
  • Typography: Links and hover colors based upon strata color
  • Typography: Line-height from 1.333 to 1.777
  • Typography: Text shadow effects

Additions

  • Extension: Backgrounds
  • Extension: Flexslider and Carousel
  • Extension: Image Blocks
  • Images: Image expansion via .img-expand (.img-responsive maxes out at the images actual size)
  • Strata: .s3-quarter to match .s3-fourth
  • Strata: Transition of .25 seconds on a, li, .btn, and .s3-transition

Deletions

  • Removed class that should be placed into local styles: .box
  • Removed classes for strata using highlight and shadow colors