CSS Guidelines in QBO 3

posted Oct 13, 2011, 11:32 AM by Eric Patrick   [ updated Aug 24, 2012, 6:12 AM ]

Background

Before diving into the rest of this post, review the following background material:
  • {less}: dynamic style sheets using variables, nested rules and functions; this makes .css far more code-maintainable than raw .css
  • Bootstrap: structured layouts and neat .css based UI tricks from the folks @twitter
  • Bootstrap for Mootools: behaviors to wrap the Bootstrap functionality
  • CSS selectors: understand the power of CSS selectors
For speedy websites, follow Aaron Newton's approach:
  • Whenever you can solve the problem with HTML, do it. 
  • Whenever you can solve it with HTML + CSS, do it. 
  • When you can't, there's JavaScript.

CSS and Less in QBO 3

Normally, all .css in QBO 3 will be rendered by calling Theme.ashx/Css. This will render in a single call all .css file configuration for the application, instructing the browser to cache the file for 24 hours. When rendering .less files, Theme.ashx will dynamically parse the .less file

Notes:
  • All style sheets should be placed in the root/Styles folder
    • each project deploys to the root
    • so qbo.ApplicationWeb/Styles deploys to /Styles
    • so qbo.DebtWeb/Styles deploys to /Styles
    • don't reuse style sheet names unless you intend to override an existing stylesheet
  • Each module should include a module class name in the outermost XSLT outermost tag
    • e.g. Valuation.Home.xslt includes <div class="container-fluid valuation">
    • e.g. Debt.Home.xslt includes <div class="container-fluid debt">
  • .less file must have Properties > Build Action marked as 'Content' to publish correctly

CSS and IE

IE 8 and later actually have excellent support for W3C standards. However, you need to tell IE to use a standards compliant mode. This basically means either:
  • Setting a DOCTYPE declaration at the beginning of HTML pages:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  • using a meta http-equiv tag:
    <meta http-equiv="X-UA-Compatible" content="IE=9" >
In order to leverage standards as much as possible, the <!DOCTYPE HTML> shall be used. This is accomplished in XSLT as follows:

<xsl:output method="html" indent="yes" doctype-system="html"/>

See:

Configuration

QBO 3 renders all css found in the website's Styles folder by calling Theme.ashx/Css. This handler processes files as follows:
  • Each file referred to in Config/Css.config will be emitted in the order it appears in Css.config
  • Each file in the /Scripts folder that does not exist in the Css.config file will be emitted in alphabetical order
  • If the Css.config file has minify="true", *.min.css will be emitted instead of *.css (assuming the .min version exists)
  • .less files will be parsed with the .less processor
The Css.config file allows you to control the order in which .css files are emitted. For example, the qbo3.less depends on the existence of the Bootstrap-related .less file. If you have .css files that nothing else depends on, you do not need to include them in the Css.config file.

If you are seeing odd css behavior, check your /Styles folder to see if there are unintended files there.

The Css.config file is referred to in web.config as follows:

web.config:

<!-- Group all QBO custom handler together for easy readability -->
<sectionGroup name="qbo" type="System.Configuration.ConfigurationSectionGroup, System.Configuration, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" >
...
<!-- this is to read the QBO 3 css configuration file -->
<section name="Css" type="qbo.Application.Configuration.StyleSheetConfiguration, qbo.Application"/>
...
<!-- this is so IIS can serve up .less files directly; this is optional but convenient -->
<section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler,dotless.Core" />
</sectionGroup>
...
<qbo>
...
<!-- the QBO 3 css configuration file contains all .css and .less files to render for a site. -->
<Css configSource="config\Css.config"/>
...
</qbo>
...
<system.webServer>
...
<handlers>
<!-- .less handler to serve up .less files directly; optional but convenient -->
<add name="less" type="dotless.Core.LessCssHttpHandler,dotless.Core" path="*.less" verb="*"/>
</handlers>
</system.webServer>

A same css.config is:

css.config:

<Css UseMinified="false">
<StyleSheets>
<StyleSheet Name="qbo3.css" Path="qbo3.css"/>
<StyleSheet Name="test.css" Path="test.css" IsLess="true"/>
</StyleSheets>
</Css>

Notes:

CSS Selectors

The combination of standard CSS selectors and the MooTools Slick pseudo-selectors enables very concise javascript to select HTML elements. Below are some examples.

// Get a list of checked PersonID checkboxes from a Search panel
document.id('Search').getElements('input[name=PersonID]:checked')
 
Comments