Example Site

`` and ```` elements for situations where there is no semantic value (such as wrapping elements to provide styling hooks). ------------------ Doctype and layout ------------------ All documents must be using the HTML5 doctype and the ```` element should have a ``"lang"`` attribute. The ```` should also at a minimum include ``"viewport"`` and ``"charset"`` meta tags. :: Example Site ----- Forms ----- Form fields must always include a ```` element with a ``"for"`` attribute matching the ``"id"`` on the input. This helps accessibility by focusing the input when the label is clicked, it also helps screen readers match labels to their respective inputs. :: email Each ```` should have an ``"id"`` that is unique to the page. It does not have to match the ``"name"`` attribute. Forms should take advantage of the new HTML5 input types where they make sense to do so, placeholder attributes should also be included where relevant. Including these can provided enhancements in browsers that support them such as tailored inputs and keyboards. ::

Phone

Homepage

Wufoo provides an `excellent reference`_ for these attributes. .. _excellent reference: http://wufoo.com/html5/ ------------------- Including meta data ------------------- Classes should ideally only be used as styling hooks. If you need to include additional data in the HTML document, for example to pass data to JavaScript, then the HTML5 ``data-`` attributes should be used. :: Download CSV These can then be accessed easily via jQuery using the ``.data()`` method. :: jQuery('.btn').data('format'); //=> "csv" // Get the contents of all data attributes. jQuery('.btn').data(); => {format: "csv"} One thing to note is that the JavaScript API for datasets will convert all attribute names into camelCase. So ``"data-file-format"`` will become ``fileFormat``. For example: :: Download CSV Will become: :: jQuery('.btn').data('fileFormat'); //=> "csv" jQuery('.btn').data(); => {fileFormat: "csv"} Ideally you should be using `CKAN's JavaScript module`_ format for defining how JavaScript is initiated and interacts with the DOM. .. _CKAN's JavaScript module: ./frontend/javascript-module-tutorial.html --------------------------- Targeting Internet Explorer --------------------------- Targeting lower versions of Internet Explorer (IE), those below version 9, should be handled by the stylesheets. Small fixes should be provided inline using the ``.ie`` specific class names. Larger fixes may require a separate stylesheet but try to avoid this if at all possible. Adding IE specific classes: :: .. note:: Only add lines for classes that are actually being used. These can then be used within the CSS: :: .clear:before, .clear:after { content: ""; display: table; } .clear:after { clear: both; } .ie7 .clear { zoom: 1; /* For IE 6/7 (trigger hasLayout) */ } ---- i18n ---- Don't include line breaks within ``

`` blocks. ie do this: ::

Blah foo blah

New paragraph, blah

And **not**: ::

Blah foo blah New paragraph, blah