Front End

CSS will follow the WordPress CSS best practices https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/. Some extracts are listed below:

WordPress CSS Coding Standards

Structure:

  • Use tabs, not spaces, to indent each property.
  • Add two blank lines between sections and one blank line between blocks in a section.
  • Each selector should be on its own line, ending in either a comma or an opening curly brace. Property-value pairs should be on their own line, with one tab of indentation and an ending semicolon. The closing brace should be flush left, using the same level of indentation as the opening selector.

Selectors:

  • Similar to the WordPress Coding Standards for file names, use lowercase and separate words with hyphens when naming selectors. Avoid camelcase and underscores.
  • Use human readable selectors that describe what element(s) they style.
  • Attribute selectors should use double quotes around values
  • Refrain from using over-qualified selectors, div.container can simply be stated as .container

Properties:

  • Properties should be followed by a colon and a space.
  • All properties and values should be lowercase, except for font names and vendor-specific properties.
  • Use hex code for colors, or rgba() if opacity is needed. Avoid RGB format and uppercase, and shorten values when possible: #fff instead of #FFFFFF.
  • Use shorthand (except when overriding styles) for background, border, font, list-style, margin, and padding values as much as possible. (For a shorthand reference, see CSS Shorthand.)

Values:

  • Space before the value, after the colon
  • Do not pad parentheses with spaces
  • Always end in a semicolon
  • Use double quotes rather than single quotes, and only when needed, such as when a font name has a space.
  • 0 values should not have units unless necessary, such as with transition-duration.
  • Line height should also be unit-less, unless necessary to be defined as a specific pixel value. This is more than just a style convention, but is worth mentioning here. More information:http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
  • Use a leading zero for decimal values, including in rgba().
  • Multiple comma-separated values for one property should be separated by either a space or a newline, including within rgba(). Newlines should be used for lengthier multi-part values such as those for shorthand properties like box-shadow and text-shadow. Each subsequent value after the first should then be on a new line, indented to the same level as the selector and then spaced over to left-align with the previous value.

Media Queries:

  • It is generally advisable to keep media queries grouped by media at the bottom of the stylesheet or in separate files.
  • Rule sets for media queries should be indented one level in.

Comments:

  • Comment, and comment liberally. If there are concerns about file size, utilize minified files and the SCRIPT_DEBUG constant. Long comments should manually break the line length at 80 characters.
  • A table of contents should be utilized for longer stylesheets, especially those that are highly sectioned. Using an index number (1.0, 1.1, 2.0, etc.) aids in searching and jumping to a location.

Browsers Supported:

If an issue is found on one of these supported browsers, we will look into. We support the latest version of:

  • Google Chrome
  • Firefox
  • Safari
  • Microsoft IE
  • Microsoft Edge
  • Safari for iOS

Follow Bootstrap Responsive Breakpoints:

Designs will be set on a 12 grid system with columns as discussed below.

Gutter width = 30px (15px on each side of a column)

  • Extra small ( <768px ) (Mobile)
    • Provide Creative for a Mobile layout
    • Should be a 1 column layout
    • 12 column Grid
    • No container, gutter still remains for 15px on each side
    • Column width Auto
      • Example of Grid for this Layout. We set the mobile grid at 640px… There is no container for devices under 768. The grid will re-size based on the device size. We used 640px because we thought it was a good mobile example.
  • Small devices  (≥768px) (Mobile/Tablet)
    • Note: Creative should be based on a Mobile layout. Note* we will not need a Mobile creative layout for this break point if you’re providing one for the <768 Extra Small breakpoint(above^). We will use the same layout that you provide in the <768px break point for this break point(Small).
    • Should be a 1 column layout (same as Extra small above)
    • Column width 62px
    • Container width 750px
  • Medium devices Desktops (≥992px)
    • Note: Creative should be based on the Large Device Desktop layout(below). Note* we will not need a Medium device layout for this break point if you’re providing one for the >1200px breakpoint(below). We will use the same layout that you provide in the 1200px break point for this break point.
    • Should follow a 12 column layout
    • Column width 81px
    • Container width 970px
  • Large devices Desktops (≥1200px)
    • Should follow a 12 column layout
    • Column width 97px
    • Container width 1170px

All front end code should be W3C compliant.