City of Tampa Pattern Library

Getting Started

These patterns are meant to provide simplicity and consistency across the City of Tampa's online assets. Simply include the TampaGov.net's primary CSS and JS files to use these patterns:

  • <link rel="stylesheet" href="http://tampagov.net/static/css/styles.min.css"> link to the city stylesheet
  • <script src="http://tampagov.net/static/js/bundle.min.js"></script> link
  • bundle.min.js Includes Bootstrap.js
  • jQuery is not included BUT IS REQUIRED
  • some patterns require icons which needs FontAwesome <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

Sections

This guide is split up into the following sections - Basics - Typography - Layout - Utilities - Forms - Navigation - Global

Templates

The following are some example template files that were created using these code snippets to quickly assemble a page based these patterns.

Pattern Library Generation

This Pattern Library is generated automatically in our Gulp.js workflow using Hologram which is a ruby gem that parses SASS comment blocks. Hologram block comments are in the SASS files and formatted in a combination of YAML and MarkDown.

Gulp Workflow

Gulp.js is our workflow automation tool that generates all the assets needed for the website. Gulp requires NPM and Ruby becasue it uses Compass the gulp workflow is written in standard Javascript so it is flexible and extremely customizable. The following outlines this sites Gulp workflow.

  • A build directory is cleaned, dev and prod versions of css/js will be created here
  • Compass runs and generates our css files from SASS
  • Gulp combines all CSS and runs it through cleanCSS
  • Gulp combines all JS files with vendor files such as jQuery
  • Gulp Minifies CSS and JS files for production, media queires are parsed and combined/grouped together for better performance
  • Gulp generates the pattern library via Hologram
  • Gulp copies new files to both the /static directory and the Drupal theme /COT2015 directory
  • (optional during development) Gulp then watches for changes to SASS or JS files and will rerun the process when files are modified.

SASS/CSS Architecture

  • CSS is compiled from SASS using Compass
  • Bootstrap v3.0.3 is used as a base, with all its major components available.
  • Bootstrap Sub-themeing how-to documentation.
  • 12 Column grid system from Bootstrap
  • Global variables are defined in _variables.scss
  • SASS patterns are broken up into modules in the sass/modules folder
  • Media quires are built mobile first
  • Along with the minified versions for production styles.min.css, there is also a non-minified version styles.css for debugging.

Bootstrap Javascript Components

These Bootstrap scripts are currently being loaded and along with jQuery v1.11.3 - Affix - Alert - Button - Carousel - Dropdown - Modal - Tooltip - Popover - Scrollspy - tab - transitions

Extra Resources


Change log

Version 1.8
  • Removed duplicate assets found in gulp build process
  • simplified gulp build workflow
  • removed duplicate jQuery, instead relying on Drupals jQuery
Version 1.7
  • Corrected overflow on calendar .view-filter .form-type-select to scroll vertically
Version 1.6
Version 1.5
  • Breakout and refactor of top navigation
  • Added Overlay pattern
  • Language Translation pattern
  • RRSSB adjustments
  • Refactored top navigation removing unused styles
Version 1.4
  • Emergency banner tweaks including spacing and removal of icons.
  • Broke out print css into new print.scss
  • Print CSS adjustments
    • Removed URLs from being printed next to links
    • Hide non-content elements (left menu, footers, social icons)
    • Improved look of custom elements: buttons, content-column
    • Adjusted: Font sizes, page paddings, hyperlinks
    • Hiding exposed view forms
    • Calendar tweaks
    • Mayors Page tweaks
    • Home Page tweaks
    • Landing Page tweaks
    • fixed default hidden elements such as accordions
Version 1.3
  • Fixed: Decreased font weight on view buttons and table headings to increase readability
  • Fixed: Slideshow arrows replaced with fontawesome icons
  • Fixed: Homepage AlertTampa icon and bottom social icons breakpoints
  • Adjusted: Top-link style to rounded icon
  • Added: Flickr Icon added to social media nav bar
  • Fixed: Pagination coloring
Version 1.2
  • Fixed: Green button font sizes to small on mobile
  • Updated: html for new header with alerttampa icon
  • Removed: Float left from .pane-node-title
  • Added: Text and background utility classes
  • Added: Danger and warning colors to Colors from style guideline
Version 1.1
  • Added: non-minified versions of .js and .css to static directory, should only be used for development/debug reasons
  • Added: Truncate text with css by adding .truncate class to elements.
  • Added: Wells
  • Added: Panels
  • Added: Utility class to Vertically Center elements via Flexbox
  • Added: Custom icon font-family for city specific icons
  • Moved: Footers/Headers into a new global category
  • Refactored: keyboard .kbd class
  • Refactored: button blocks to more universal
  • Refactored: pane menu to be simpler and more universal
  • Refactored: Top right search box to use search icon instead of image backgrounds
  • Fixed: input w/ icon case naming to start with lowercase
  • Fixed: Homepage search submit bug
Version 1.0
  • Created /pattern-library folder outside docroot and setup gulp.js workflows, removed sass from theme folder, only css from workflow is published to theme folder
  • Added: New pattern Input Fields with icons
  • Added: Slight button shadows to button blocks along with variablizing colors in sass
  • Added: Animation to left pane menu on hover for buttons
  • Added: Button and link underline of text on hover, for color blind users who cannot see color changes
  • Added: Link visited color indication
  • Added: Link click depression feedback for all links
  • Added: Hover effect scale animations for homepage buttons
  • Added: Hover effect scale and background animations for landing page buttons
  • Fixed: Gray/white buttons not displaying correctly
  • Fixed: Tabs styling fixed so they use brand colors
  • Fixed: Font for small buttons now defaults to OpenSans for increased readability
  • Fixed: Buttons for exposed views styled to match input heights and OpenSans font by default