Skip to content
Tyler Lemburg edited this page Mar 24, 2016 · 8 revisions

Differences between production and the current develop state: https://github.com/unl/wdntemplates/compare/master...develop

CSS Standards

  • ID & Class names should be prefixed with wdn-. For example: wdn-band.
  • ID & Class names use hyphens (-) between words. All lowercase.

Known CSS Validation Issues

  • The W3C CSS Validation Service does not properly handle unquoted data URIs (via)
  • The W3C CSS Validation Service does not properly parse calc expressions (via)
  • We use the non-standardized pseudo-element ::selection

LESS Standards

LESS Preprocessor

All custom developed styles should be done in LESS. CSS is generated through an automated build process.

Methodology

For style organization, we're attempting to adhere to the [SMACSS methodology] (https://smacss.com/book/).

File Organization

The following directories are in the /wdn/templates_4.0/LESS directory.

/_mixins

Variables and functions which are used in other sections of other files. These do not output CSS rules.

/base

HTML reset (normalize.less) and non-specific typography.

/layouts

Herein lies the majority of styles. All template wrapper files are here. In addition, all content region styles used for layout will go here.

/modules

Presentation (color, fonts, images, etc...) of items.

/states

Changes to presentation based on events (ex: hover, navigation states, logged in, etc...)