Using DCF Classes to Develop for 5 in 4.1

If you're reading this, I know you're a go-getter.

You've already previewed your site in the 5.0 Framework and have adjusted any custom CSS so that your site will make a flawless transition on January 2, 2019. You've gone over your Webaudit report and nabbed that gold star. You're sitting back and wondering just what to occupy your time with during the next few days before eating some Thanksgiving turkey and the following weeks before a nice holiday slumber. 

What if I told you that you could start developing for the future... today?*

With just a single include to reference the aforementioned CSS, you can now dive into the full array of 5.0 classes and start building pages on the next-generation foundation of CSS Grid.

Instructions

UNLcms

In order to enable DCF classes in UNLcms, simply go to "Appearance" under administration and paste the following stylesheet reference within the Head HTML box of the UNLedu 4.1 tab and save the configuration.

<link rel="stylesheet" type="text/css" href="https://wdn.unl.edu/custom/shim.css">

That's It! You'll now be able to build pages using new DCF and UNL classes.

Non UNLcms

For those using distributed UNL Framework files, first you'll need to edit the <body> tag in your code to include the "unl" class. After that, you'll need to include the same following stylesheet reference within your html tag.

<link rel="stylesheet" type="text/css" href="https://wdn.unl.edu/custom/shim.css">

That's It! You'll now be able to build pages using new DCF and UNL classes.

Notes

  • When you include these new styles for use on your site, certain elements (headers, buttons, etc) within 4.1 will now appear as they will in 5.0. It is recommended that you do not start development using this technique until you've previewed your site in 5.0 and made sure that everything is displaying properly.
  • When implementing the "shim" CSS, the default page title on pages developed with DCF code will not be fully aligned at some screen widths (especially tablet and widescreen) due to the combination of the two frameworks. Once switched to 5.0, they will be aligned again.
  • If at some point in the past, you used a standalone "unl" class for scoping CSS on your site, there may be unintended consequences of including this new CSS. The 5.0 Framework is built upon a base level of the Digital Campus Framework, using the new "unl" class for custom styling scoped to the University of Nebraska-Lincoln. If you have a standalone "unl" class on your site, you will need to re-name that class before upgrading your site to the 5.0 framework.

Comments

raiken2's photo

It looks like the bold version of Gotham for headings won't load with the shim unless you also include a link to the new typography CSS:

<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/7717652/6968572/css/fonts.css">