Framework Roadmap | Web Developer Network

6.2

2027?

Convert <body> tag into editable region
Update brand assets: colors, ornaments, patterns, backgrounds, etc.
App theme and UI library
Optional compact tables and form elements
Alternate page layouts (e.g., front, landing page, interior, text only)
Web Components
Third-party vendor plugins:
- Selectize
- ~~Autocomplete~~ (use jQuery UI for autocomplete instead)
- Chart.js
- D3

6.1.9

December 2026

6.1.8

November 2026

6.1.7

October 2026

Update Vite
Update footer list styles
Update nav-container-2.js
Remove height/width from object-fit styles
Add flexbox mixins/utilities
Update bare list styles
Modify styles for hiding page regions

6.1.6

September 2026

Update plugin-auto-loader-opt-out.js
Additional updates to hidden regions and terminal styles
Fix for <select> :focus bug in Firefox

6.1.5

August 2026

Fix NvolveU and Privacy Statement links

6.1.4

August 2026

Fix problem of login URL not being set
Add dark cream variables, mixins and utilities
Update hidden regions and terminal styles
Add "vendor" layer to CSS Cascade Layers
Update <dialog> styles

6.1.3

July 2026

Update University of Nebraska logo (remove "System") in footer.

6.1.2

July 2026

Add mixins/utilities for additional viewport lengths
“Cover Flow”-style slideshow/carousel
Dialog toggle buttons fix
Autoplay video method change
Collapsible fieldset added toggle button instance
Adjust table <caption> line-height and padding-bottom
Move 6.0 migration guide to wiki
Remove hard list of toggle buttons and replaced with querySelectorAll

6.1.1

June 2026

All component elements have id
Add flex-basis: 0 mixin/utility
Fix non-modal dialog scroll bar bug
Add position: relative back to dcf-bleed
Add min-width mixins/utilities
Nav menu bug fixes
Adjust IdM & search desktop spacing
Remove dimming of dark mode images
Update critical CSS

6.1

May 2026

Update call to action links (Visit / Apply / Give) and My UNL (login) panel
Update mobile toolbar design

6.0.11

April 2026

Add grid columns to slideshow deck
Add strip unit function
Convert sizing variables from strings to numbers
Fix broken dcf-d-none@print class and add to additional nav and footer regions
Fix dialog toggle button state
Add config for disable nav on desktop
Remove Snapchat and Bluesky links from “Herbie” footer
Fix Sass event component error

6.0.10

March 2026

Fix load stylesheets
Fix non-modal dialog double close
Fix toggle button and popups closing logic
Reduce popup arrow/point overlap with popup
Increase Skip Navigation z-index
Update keyboard navigation and focus related to the navigation menu dialog
Replace stagger animations Sass loop with sibling-index()

6.0.9

February 2026

Add options for collapsible field set in image cropper
Dispatch change event after validator error
Add logic to select the tab whose content contains anchor link
Show .dcf-txt-decor-hover text decoration on focus
Speed up autoloader
Fix mobile nav dialog closing unintentionally
Add analytics for tracking links
Update Employment link URL in footer

6.0.8

January 2026

Use dvh for dialogs, nav, search and IdM height
Update copyright year (2026) in footer
Add randomizer component
~~Temporarily disable~~ navigation open/close animation has been restored

6.0.7

December 2025

Add image cropper component
Fix mobile navigation menu Icon
Restore relative positioning to #dcf-main
Temporarily disable navigation open/close animation
Restore bare list component
Add file size validator component

6.0.6

November 2025

Bug fixes

6.0.5

October 2025

Add container queries to cards
Add left and right stripe clip-path mixins/utilities
Add Data Tables support
Update centered icon card styles
Bug fixes

6.0.4

September 2025

Bug fixes

6.0.3

September 2025

Smudging bug fix
Fix form help text color
Add dev environment variable for search URL

6.0.2

August 2025

Parallax utilities
Theme: UNL “Stripes”
Theme: UNL background “Shift”
View Transitions
Speculation rules
- Add .unl-prefetch class for prefetching page resources when you hover over the link
- Add .unl-prerender class for prerendering page when you hover over the link
Bug fixes

6.0.1

July 2025

Bug fixes

6.0

July 2025

Replace Grunt with Vite
Replace jQuery with vanilla JavaScript
Replace RequireJS with JavaScript Modules ~~and Web Components~~ (We're going to hold off on Web Components for now)
Use View Transition and Web Animations APIs
Redesign header and footer

5.3

October 2021

5.2

August 2020

5.1

March 2020

5.0

January 2019

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() ]
More modular, atomic, functional classes? Shallow cascade, reduce overrides. Examples:
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
- 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

Animation

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

Cancelled

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.

4.1

January 2016

~~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