home »
zui »
page

zui: html / xhtml / html5 / css / css3

My best practices, thoughts, tips, and rantings for using, optimizing, and simplifying html (hypertext markup language) and CSS (cascading stylesheets) in all their flavors but mostly what I am focused on at the moment.

HTML5/CSS3

While the HTML5/CSS3 standards have not been finalized there is more than enough support for much of the spec by A-grade devices/useragents. In conjunction with popular projects such as HTML5 BoilerPlate, Normalize.css, modernizr.js, and CSS3pie there is no reason to not be embracing and pushing these technologies forward in every project.

Using the four projects mentioned above as the cornerstones for my boilerplate, I add in a CSS Zen Garden style markup structure enabling the base layout of 99% designs without touching the base structural markup (well mostly ;).

XHTML/CSS

With HTML5 there is no reason to further consider XHTML and strictly CSS 2.1 design/development patterns. However, for reference on projects done prior to 2011 this information remains. Unfortunately I haven’t found time or pressing need to migrate this info to the current version of the site.

Articles and ranting about html and css

zui_HTML5_Badge_512_v0.1

zui HTML5/CSS3 boilerplate: structure

Where the HTML5 BoilerPlate and Normalize.css projects leave off zui boilerplate defines a specific markup structure for optimal semantics in order to maximize consistency, speed up development, and ensure stable progressive techniques are implemented without risk and minimal hassle. | read on »
Technically accurate and annoying, Chrome doesn't find the unicode character if it doesn't exist in the fonts you've chosen

Google Chrome won’t render unicode characters

While attempting to use a groovy "star glyph" I discovered that Google Chrome was not rendering some extended unicode characters while all the other browsers I test were. Turns out Chrome isn't being helpful with extended Unicode characters but there is an easy fix for your site and your browser. | read on »
backwardscompatibility

Backwards compatibility in web development is silly!

Fed up with ten year old draft specs and DO NOT TRY THIS AT HOME warnings from other web professionals I make a perhaps infallible argument for why you should be using all the latest browser technologies (and every browser version older than a month and the people who use them can go to hell). | read on »
css3-no-vendor-specific-prefixes

No more CSS3 browser vendor specific prefixes (please)

As of today all the major browsers (mostly) support the pure straight css3 declarations for the following css3 features. And because I have gone a little bit out of my way to make my current site completely html5 without any unnecessary (or annoying) javascript hacks or unpleasant backwards compatibility concerns I have elected to forego all browser vendor prefixes for these "experimental" features. | read on »

Everything below here is out of date and silly ;)

MARKUP/CSS


N.B. This is seriously out of date and needs updated with
all the HTML5 Boilerplat awesomeness and new zui HTML5 semantic base markup/css.

To see what is going on see the
Kitchen Sink HTML5 Base WordPress plugin introduction
or just head on over to github and grab the project
, read the wiki/documenation for Kitchen Sink HTML5 Base
, or review the phpDocumentor reference documentation.

Base markup and css I use for every web-based project unless directed otherwise.
Updated with every project and new standards. Consistency is rapid development.
Developed from the best of the internet along with
scragz (Jason Mouratides http://scragz.com/).

 

Concept and Structure
  • Clear ALL browser styles
  • Set vertical rhythm for html elements
  • Reset ALL remaining html elements for the current design
  • Use a simple and standardized set of layout containers
    • html
      • head
      • body
        • #doc (document wrapper)#doc.layout(s)
          • #hd (header/masthead)
          • #pg (page content wrapper)
            • #bd (body content)
            • #sb (sidebar)
          • #ft (footer)
  • The rest is dicated by the project.
How to use

By resetting html elements for the design and using proper semantics
the need for complex and excessive layout structures and one-off appearance styling is minimized regardless of the project.

There is some minor documentation in the sidebar on the test demo page below.
Until there is more just contact me.

XHTML/CSS v0.3

Version 0.3 of ZUI XHTML/CSS is currently maintained as part of the Kitchen Sink WordPress theme while some updates are made. For examples and explanation of the ZUI XHTML/CSS markup methodology please see Previous Versions (XHTML/CSS v0.2) below for a complete overview. Changes in version 0.3 are minor and the demo from version 0.2 is perfectly adequate to understand usage/functionality.

Review previous versions

XHTML/CSS v0.2

NOTE: This has not been updated recently and the most recent stuff can be found in the Kitchen Sink theme style.css for the time being.

XHTML/CSS v0.1

XHTML/SCSS (Sass)

Coming soon. Never happened. Hopefully will get some Sass with some HTML5 in the future though.

HTML5/CSS

Researching.