Deprecated

Skill Level: 
Intermediate

In July 2022, button classes will be removed from the deprecated CSS. Please use the following suggestions for updating your buttons.

Buttons

  • .wdn-button → .dcf-btn + .dcf-btn-primary
  • .wdn-button-brand → .dcf-btn + .dcf-btn-primary
  • .wdn-button-triad → .dcf-btn + .dcf-btn-secondary
  • .wdn-button-complement → .dcf-btn + .dcf-btn-secondary
  • .wdn-button-energetic → .dcf-btn + .dcf-btn-secondary
  • .wdn-button-outline → .dcf-btn + .dcf-btn-inverse-secondary

Additionally, if you’re using .wdn-input-group-btn for input group buttons, be sure to update your markup to DCF input groups.

Bands

  • #maincontent → #dcf-main
  • .wdn-main → .dcf-main
  • .wdn-band → .dcf-bleed
  • .wdn-text-band → .dcf-w-max-lg
  • .wdn-inner-wrapper → .dcf-wrapper
  • .wdn-inner-padding-sm → .dcf-pt-8 + .dcf-pb-8
  • .wdn-inner-padding-lg → .dcf-pt-10 + .dcf-pb-10
  • .wdn-inner-padding-no-top → .dcf-pt-0
  • .wdn-inner-padding-no-bottom → .dcf-pb-0
  • .wdn-inner-padding-none → .dcf-pt-0 + .dcf-pb-0
  • .wdn-stretch → .dcf-bleed
  • .wdn-center → .dcf-txt-center
  • .wdn-scarlet-band → .unl-bg-scarlet
  • .wdn-light-complement-band → .unl-bg-light-gray
  • .wdn-light-triad-band → .unl-bg-lighter-gray
  • .wdn-light-neutral-band → .unl-bg-lightest-gray
  • .wdn-band-triad-seperator
  • .wdn-band-complement-seperator
  • .wdn-band-neutral-seperator

Base

  • .wdn-main → .dcf-main
  • #breadcrumbs → #dcf-breadcrumbs
  • .last-link
  • .selected
  • .storednav
  • .js
  • .flexslider
  • .slides

Columns

  • .wdn-two-flow-columns → .dcf-columns-2
  • .wdn-three-flow-columns → .dcf-columns-3

Display

  • template → .dcf-d-none
  • [hidden] → .dcf-d-none
  • .wdn-dropdown-widget-button → .dcf-d-none
  • .wdn-nav-toggle → .dcf-d-none
  • .wdn-share-options → .dcf-d-none
  • #wdn_idm_notice_container → .dcf-d-none
  • #wdn_search_form button → .dcf-d-none
  • #wdn_search_progress → .dcf-d-none
  • #wdn_search_frame → .dcf-d-none
  • #navigation li.empty → .dcf-d-none
  • #navigation .wdn-icon-menu → .dcf-d-none
  • #wdn_menu_toggle → .dcf-d-none
  • .wdn-menu-trigger label → .dcf-d-none
  • #footer → #dcf-footer
  • .wdn-icon-container
  • .wdn-footer-optional
  • .wdn-footer-local
  • .wdn-contact-info
  • .wdn-related-links
  • .wdn-footer-global
  • .wdn-footer-list
  • .wdn-footer-end
  • .wdn-footer-text
  • .wdn-wdn-qa
  • .wdn-copyright-phone
  • .wdn-footer-logo
  • #tips_wordmark
  • #nebraska-b1g-lockup
  • #footer_n_logo → #unl-footer-n
  • #b1g_wordmark → #unl-footer-global-b1g
  • #unl_wordmark → #unl-footer-global-wordmark

Forms

  • .wdn-std
  • .wdn-input-group → .dcf-input-group
  • .wdn-input-group-btn
  • .wdn-webform-opt-out
  • .required
  • .helper
  • .wdn-button → .dcf-btn
  • .wdn-button-triad
  • .wdn-button-complement
  • .wdn-button-brand → .dcf-btn + .dcf-btn-primary
  • .wdn-button-energetic
  • .wdn-button-outline → .dcf-btn + .dcf-btn-inverse-secondary

Grid

  • .wdn-grid-set → .dcf-grid
  • .wdn-col-* → .dcf-col-*
  • #header → #dcf-header
  • #wdn_header_top
  • #wdn_institution_title → #dcf-institution-title
  • #wdn_logo_lockup → .dcf-logo-lockup
  • #logo → #dcf-header-logo
  • #wdn_site_affiliation → #dcf-site-affiliation
  • #wdn_site_title → #dcf-site-title

Helpers

  • .centered
  • .clear → .dcf-clear-both
  • .clear-top → .dcf-mt-0
  • .hidden → .dcf-d-none
  • .wdn-fouc-fix → .dcf-invisible
  • .wdn-pull-left → .dcf-float-left
  • .wdn-pull-right → .dcf-float-right
  • .wdn-responsive-embed
  • .wdn-aspect16x9 → .dcf-ratio-16x9
  • .wdn-aspect3x4 → .dcf-ratio-4x3
  • .wdn-responsive-item → .dcf-ratio-child
  • .wdn-text-hidden → .dcf-sr-only

Hero

  • .wdn-hero → .dcf-hero
  • .wdn-hero-text-container
  • .locate-left
  • .locate-center
  • .locate-right
  • .wdn-hero-heading
  • .wdn-hero-initial-line
  • .wdn-hero-impact-line
  • .wdn-hero-video
  • .wdn-hero-picture

IdM

  • .wdn-resource-login-trigger → .dcf-idm
  • .nav-scrolling
  • #wdn_idm_notice_container
  • #wdn_idm_toggle_label
  • #wdn_idm_username
  • .wdn-idm-options

Images

  • .frame
  • .wdn-frame

Infographic

  • .number

Infographics (plural in /modules Less directory)

  • .stat
  • .stat-helper
  • .wdn-infographic
  • .wdn-infographic-*
  • .skipnav → .dcf-skipnav
  • #wdn_navigation_bar
  • #navigation → #dcf-navigation
  • .wdn-content-slide
  • .wdn-icon-menu
  • .empty-secondary
  • .wdn-nav-toggle
  • li.empty
  • .wdn-menu-trigger
  • .nav-scrolling
  • .nav_ready
  • .nav_collapsed
  • .nav_expanded
  • .nav_changing
  • .pause
  • .js
  • .wdn-menu-trigger
  • #wdn_menu_toggle

Noscript

  • #wdn_noscript → #dcf-noscript
  • #wdn_noscript_padding

Old Grid

  • .grid1 – .grid12
  • .first

Pagination

  • .wdn_pagination
  • .ellipsis
  • .selected

Promo Image

  • .wdn-promo-band
  • .wdn-promo-container
  • .wdn-promo-text
  • .wdn-inverse
  • .wdn-text-over-image

Quote

  • .wdn-quote → .dcf-blockquote
  • .wdn-quoter → .dcf-attribution
  • .quoter-context

Regions

  • .hide-wdn_institution_title → .dcf-d-none
  • .hide-wdn_identity_management → .dcf-d-none
  • .hide-wdn_search → .dcf-d-none
  • .hide-wdn_navigation_wrapper
  • .hide-breadcrumbs → .dcf-d-none
  • .hide-pagetitle → .dcf-sr-only
  • .hide-footer → .dcf-d-none
  • .hide-wdn_footer_related → .dcf-d-none
  • .hide-wdn_copyright → .dcf-d-none
  • .hide-wdn_footer_contact → .dcf-d-none
  • .hide-wdn_attribution → .dcf-d-none
  • .hide-wdn_logos → .dcf-d-none
  • .terminal

Resources

  • .wdn_randomizer
  • .show
  • .wdn-resource-label
  • .wdn-reource-app-trigger
  • .wdn-resource-label
  • #wdn_resources
  • #wdn_search_form → #dcf-search-form
  • #wdn_search_query → #dcf-search-query
  • #wdn_search → #dcf-search
  • .nav-scrolling
  • .wdn-icon-search
  • #wdn_search_progress
  • #wdn_search_frame
  • #wdn_search_toggle_label

Share

  • .wdn-share-this-page
  • .js
  • .nav-scrolling
  • .nav_ready
  • .wdn-dropdown-widget-button
  • .wdn-icon-share
  • .wdn-share-options

Tables

  • .wdn_responsive_table
  • .flush-left
  • table.primary, table.wdn_responsive_table.primary
  • table.cool, table.wdn_responsive_table.cool
  • table.soothing, table.wdn_responsive_table.soothing
  • table.neutral, table.wdn_responsive_table.neutral
  • table.energetic, table.wdn_responsive_table.energetic

Tabs

  • .wdn_tabs
  • li.selected
  • .wdn_tabs_content

Text

  • .wdn-brand
  • .wdn-sans-serif → .unl-font-sans
  • .wdn-list-reset → .dcf-list-bare
  • .wdn-heading
  • .wdn-impact
  • .wdn-brand-cap
  • .wdn-sans-caps → .unl-font-sans + .dcf-uppercase
  • .wdn-alt-header → .unl-font-sans + .dcf-uppercase
  • .wdn-list-header → .unl-font-sans + .dcf-uppercase
  • .wdn-subhead → .dcf-subhead
  • .wdn-intro-p → .dcf-txt-lg
  • p.small → .dcf-txt-xs
  • .wdn-icon-*

Twitter

  • .twitter-band
  • .tweet
  • .author

WDN UI

  • .wdn-dropdown-widget-button
  • .wdn-dropdown-widget-button-no-outline

Wrapper

  • #wdn_wrapper → .dcf-overflow-hidden
  • .wdn-input-driver → .dcf-sr-only

Zenbox

  • .zenbox
Usability Considerations: 

As of July 2021, Web Audit will flag pages that are still using these styles. As of January 2022, the presence of these styles will be factored into Web Audit site scores.

Since the October 2019 release of 5.0, the deprecated stylesheet is removed by default. To use deprecated (4.1) classes and CSS, include the following in your editable "head" section. (The example code is for the Fixed template, therefore remove "https://unlcms.unl.edu" for use with the Local template.)

<link rel="preload" href="https://unlcms.unl.edu/wdn/templates_5.3/css/deprecated.css?dep=$DEP_VERSION$" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="https://unlcms.unl.edu/wdn/templates_5.3/css/deprecated.css?dep=$DEP_VERSION$"></noscript>
Contributed By: 
IIM