Framework Roadmap

• Items planned for 6.0 will accumulate here.

• Items planned for 5.4 will accumulate here.

• Dark mode
• New components: datepicker, card-as-link, notices, toggle button and popup
• Use GSAP for animations
• Update analytics from Universal Analytics to GA4
• Change footer background color from scarlet to gray
• New background patterns
• Improve print styles
• Add SVG icon to indicate external links

• Button style updates
• New monospace font stack
• Add dark mode toggle bookmarklet CSS
• Add Google Tag Manager code
• Add daily cache bust for client chat
• Update IdM styles to match CTA popovers
• Update UNL Alert styles
• Add scroll animations

• Liberator font added
• New secondary colors
• New slideshow feature

Schedule

• Apr: UX Design Subcommittee meeting to review design progress
• May: Barkley feedback in mid–late May
• June: Framework Alpha 1, CMS Theme Preview
• July: Framework Alpha 2, CMS Site Demo
• Aug: Framework Beta 1, CMS Development Ready, Apps
• Sep: Framework Beta 2, CMS Feedback + Features
• Oct: Framework 5.0 Release Candidate 1, CMS Feedback + Features
• Nov: Framework 5.0, CMS Production Ready
• Dec: Sites and Apps Ready
• Jan: Go-live Tuesday, Jan 2, 2019, 3 p.m. (remember: 1/2 @ 3)

General

• Move from Less to Sass for CSS pre-processing
• Move from Grunt and RequireJS to Webpack for running tasks, module loading, and build processes.
• Implement better, more comprehensive, "living" style guide. Examples:
  • Harvard Law Review Style Library
  • BBC Global Experience Language
  • FutureLearn Pattern Library
  • Lightning Design System by Salesforce
  • Design Language System by Airbnb
  • Design Language System by GE
  • Polaris by Shopify
• Visually unify state-based styles
  • Modal states = pop-ups = dropdowns = mega-menu
  • Notices = alerts
• Reduce redundant styles
  • Make better use of '.wdn-text-hidden' instead of 'text-hidden()' parametric mixin
• More resolution-independent visual assets
  • CSS
    • Subtle gradients? Angled to match Nebraska 'N'?
    • Clipped, angled bands?
  • Vectors
    • Seamlessly tiled backgrounds
    • Dynamic SVG injection? https://github.com/iconic/SVGInjector
• Device and input agnostic references
  • Adapting to Input
    • 'narrow,' 'wide,' 'short,' 'tall' instead of 'mobile,' tablet' or 'desktop'
    • 'select' instead of 'click' or 'tap'
• Refactoring CSS Without Losing Your Mind
• Slightly less ‘flat’ design?

Accessibility

• Header widget popups
• A11Y Style Guide for reference

Layout

• Flexbox and CSS Grid layouts [CSS Grid ready in time for 5.0? Yes, ready in March 2017, progressive enhancement with @supports() ]
  • Better, Simpler Grid Systems
  • Don’t Overthink It (Flexbox) Grids
  • Flexbox Grid Finesse
  • Flexbox Grid
• More modular, atomic, functional classes? Shallow cascade, reduce overrides. Examples:
  • https://tachyons.io/
  • https://basscss.com/
  • https://jxnblk.com/gravitons/
  • Primer
• Update breakpoints to complement modular scale
  • Apply breakpoints at the limits of a design, not a device.
• Header improvements
  • Visually distinct from main content, even for sites and apps without navigation bar
  • Better navigation layout for sites without menu icon (only 6 across)
    • Eric mentioned something like this as a possibility (or inspiration) for navigation: https://www.theguardian.com/us
  • Breadcrumbs & navigation
    • Sticky only on scroll up?
    • ESPN's navigation has an interesting interaction when you scroll. The section navigation moves up and overlaps the primary navigation.
    • …or, locate at bottom for mobile?
• Footer improvements
  • Local and global side-by-side at large browser widths?

Typography

• Add typography classes to separate presentation from structure
• Update modular scale
  • Mathematical Web Typography
  • The 8 pt Grid and Typographic Scales, shared by Keith Shelley
• Improved font sizing
  • Fluid-based instead of only mobile and desktop font-sizes
    • BUT! https://mobile.twitter.com/SaraSoueidan/status/749695520143093760
    • That Fluid Type Stuff Again
    • Flexible type with :root
    • Examples
    • Between the Lines (linear interpolation)
    • CSS Poly Fluid Sizing using calc(), vw, breakpoints and linear equations
  • More modular:
    • Font Size Idea: px at the Root, rem for Components, em for Text Elements
  • Max-width on paragraphs, possibly more or all elements?
  • Molten leading
    • Molten Leading in CSS
    • The Math of CSS locks
    • Javascript version, but would prefer to use CSS
• The Equilateral Triangle of a Perfect Paragraph

Color

• Use HSL values: Color in UI Design: A (Practical) Framework
• Background color = white; cream as accent color?
• Building Themes with CSS4 Color Features
• Dark mode for nighttime? Realistic?
  • Make use of PostCSS High Contrast Plugin?

Images

• Standardized, proportional image containers (in addition to videos)
  • Aspect ratios:
    • 1×1
    • 4×3
    • 16×9
  • Use object-fit with fallback
• Subtle placeholder background image on all images in case image is slow to load or fails to load altogether
  • Photo icon?
• Lazy load images?
  • An Alternate Method for Progressive, Hidden Loading of Images
  • Who Needs AMP? How to Lazy Load Responsive Images Quick and Easy with Layzr.js

Iconography

• Convert UI icons to data-URIs and/or animated SVGs
  • Accessible SVGs
  • Align SVG Icons to Text and Say Goodbye to Font Icons
  • Do you know where your icons are?

Animation

• Designing Interface Animation
• Communicating Animation
• Animation in Design Systems
• Experience Design Essentials: Animated Microinteractions In Mobile Apps
• Upgrading CSS Animation With Motion Curves
• Page transitions?
  • Improving User Flow Through Page Transitions

Performance

• Improve site performance
  • Slow Pages Damage How Users Perceive Your Content, Design, and Navigation
  • Rapid Response – performance techniques for Responsive Web Design
  • FaCSSt—CSS & Performance
  • Google's 60^5 rule for all web pages in all browsers:
    • <60k HTML
    • <60k JS
    • <60k CSS
    • 60fps animations
    • <0.60sec latency
• Reduce jank
  • Use transform and opacity for state changes: https://slides.com/ehayman/deck-1#/7
  • Implement will-change
  • Smooth as Butter: Achieving 60 FPS Animations with CSS3
• Improve use of <picture> element and additional <img> formats
  • WebP for smaller images: Mobile ISP image recompression
  • JPEG XR for IE/Edge: Web Site Optimization With Browser-Specific Image Formats
  • Lazy load? BPG? Immaculate Imagery with Lazy Pictures & BPG
  • Adept for JPGs to alter compression level for homogenous vs heterogeneous areas
  • Ideal JPG quality with cjpeg-dssim
• Critical CSS to branch inline "above-the-fold" styles
  • Authoring Critical Above-the-Fold CSS
  • https://github.com/filamentgroup/grunt-criticalcss
  • https://github.com/filamentgroup/loadCSS
  • Optimizing Critical-Path Performance With Express Server And Handlebars
• Reconsider how web fonts are used
  • Needs large number of glyphs
  • Limit character sets for certain fonts (e.g. all uppercase for secondary sans serif?)
  • Retain optional extended font set plugins
  • Self-host web fonts?
    • Typefaces: NPM packages for Open Source typefaces

Elements

• text
  • strong
  • emphasis
  • underline
  • highlighted
  • state: selected
• mark (highlighted text)
• section
• article
• header
• footer
• aside
• heading
  • primary
    • h1: page title
    • h2
    • h3
    • h4
    • h5
    • h6
  • secondary
    • overline
    • subhead
• paragraph
  • primary
    • standard
    • deck/tease/intro
      • https://harvardlawreview.org/style-guide/
    • :first-letter (drop cap)
    • :first-line
• small
• superscript
• subscript
• strike
• time
• address
• q (inline quote)
• blockquote
  • cite
  • citation
  • use with figure https://developers.whatwg.org/grouping-content.html#the-blockquote-element
• list — better spacing between list items
  • ordered
    • alphabetical vs numeric
  • unordered
  • definition
  • nested lists
  • list reset
• pre/code, considerations
  • code highlighting
  • syntax highlighting
  • label code language?
• kbd
• anchor
  • states: link, active, visited, hover
  • link as button
    • Anchors vs. Buttons
• picture
  • WebP format
• image
• figure
  • figcaption
• form, considerations, Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions
  • fieldset
  • label
    • Unlabelled search fields
  • input type
    • =text
    • =submit
  • textarea
  • option
    • optgroup
    • select
  • radio
  • checkbox
    • "The new controls are … the same height as our text fields, which improves the vertical rhythm on form pages and allows for better horizontal alignment of form fields."
  • range
  • button as button
  • states: :required, :valid, :invalid, :placeholder, :placeholder-shown
    • Form Validation UX in HTML and CSS
    • Inline validation in forms — designing the experience
• progress
  • progress bar
  • loading indicator
• video
  • Mediahub to inherit framework styles for A/V UI
• audio
  • Mediahub to inherit framework styles for A/V UI
• table
  • fully responsive for wide content
  • striped
  • bordered
  • hover
  • sortable
  • varying sizes: comfortable, cozy, compact
• aside
  • sidebar
• address?
• sibling elements
• foreign languages
  • :lang
• selectors: https://thenewcode.com/1121/Beautiful-and-Unique-Snowflakes-Using-the-only-of-type-Selector
  • :empty
  • :first-child
  • :last-child
  • :only-child
  • :first-of-type
  • :last-of-type
  • :nth-of-type
  • :only-of-type
• structured data
  • Schema.org
  • in JSON-LD format

Modules

• cards
• photo
  • photo credit
  • caption
• call to action
  • located at end of (every?) page
• pagination
• tabs
• navigation/menus
  • in-page (tertiary) navigation
  • overflow (try reduce use of)
• tooltip
• footnote
• modal, considerations
  • colorbox/lightbox (plugin)
  • dropdown
  • notice
  • UNLalert (visually consistent with notice?)
    • Use :empty?
  • video player in modal
  • no-JS fallback
• iframe/embed
  • maps (JS to handle scrolling vs. zooming – e.g. https://innovate.unl.edu/directions)
• carousel
  • Ten Requirements For Making Home Page Carousels Work For End Users (If Needed)
• accordion
• charts
  • sparklines?
• band
  • Subtle CSS gradient backgrounds
  • One-color, semi-transparent SVG background patterns that can be applied to above gradient bands

4.2 has been cancelled in favor of waiting to deploy markup changes to version 5.0. Items assigned to 4.2 have been redistributed to 4.1 or 5.0.

• Improve promo text sizing at narrow browser widths #1017
• Remove rem/px fallback function #1040
• Em-based media queries #1040
  • The EMs have it: Proportional Media Queries FTW!
  • Optimizing for Large-Scale Displays
• Print style sheet updates
  • Nebraska 'N' missing
  • Move inline URLs to footnotes
• Improve responsive table layout
• Tertiary navigation style
• Icon for external links
• Load webfont CSS with JavaScript
• Progress element styling
• Improve search results styling (filters should appear more like links or buttons)
• Replace translateZ hack with will-change
• Add deprecated CSS file