Ajax Bestiary » CSS

Grids a la CANVAS

Dave Mahon — Thu, 29 Dec 2011 12:00:14 +0000

There are lots of grid libraries out there. Naturally, this means we need to reinvent the wheel. With HTML5, we have a fantastic new tool called the CANVAS tag which frees us from the limitations of CSS.

The canvas tag is beautifully documented and supported on most modern browsers. Further, aside from IE 6-8, the vast majority of the browsers support the element as it is defined, which means we don’t need wrapping libraries to deal with browser quirks.

Using all of these libraries as baselines, there are a few essential pieces of functionality:
We must be dimension agnostic. Whether our space is 480px or 2560px wide, it should work well
We must support any number of columns
We must support n-wide columns
We must support arbitrary gutter sizes
We must get results consistent with those other libraries

To that end, I present the grid() function. It returns an object with an array of offsets, as well as plenty of other information that facilitates writing still more content to the canvas (or advanced features like simulating sub-columns). It has no library dependencies, although it currently does not gracefully handle older browsers.

Basic usage is simple:

result = AB.grid(canvas, 16, 20);

This one line takes the canvas element specified in the first parameter and divides it into 16 columns separated by 20 pixel gutters. The function returns an object that looks like this:

{
   cols: 16,
   element: canvas#tutorial,
   gutter: 20,
   offsets: [0, 60, 120, ..., 900],
   width: 40
}

You can also pass arrays:

result = AB.grid(canvas, [1, 3, 1], 10);

This divides the element into a 20% panel on the left and right and 60% in the middle. Now our response looks like this:

{
   cols: 3,
   element: canvas#tutorial,
   gutter: 20,
   offsets: [0, 194, 756],
   width: 186
}

Let’s go changing the colors:

result = AB.grid(canvas, [1, 4], 10, { foreground: '#CCC', background: '#EEE' });

Need to pad the outer margins as well?

result = AB.grid(canvas, [1, 4], 10, { includeOuter: true });

Maybe we just want to simulate the arithmetic, without drawing anything?

result = AB.grid(canvas.width, [1, 4], 10);

This would also work:

result = AB.grid(canvas, [1, 4], 10, { overrideWidth: canvas.width });

Now you’re probably saying that this is all well and good, but why bother when we are already using a CSS layout library for the site in general? Aside from making it easier to construct graphs, we can also use this to generate perfectly sized images within the client.

The following three lines will create an image tag from a canvas and do it faster than the human eye can detect:

var img = document.createElement('img');
img.setAttribute('src', canvas.toDataURL());
document.getElementsByTagName('body')[0].appendChild(img);

You could almost as easily assign it as a background image (here I am finally employing jQuery):

$('body').css('background', 'url(' + canvas.toDataURL() + ')');

Note that you must wrap the image data in the strings url( and ) for this to work.

Check out the code on GitHub.

CSS and mobile device orientation

Dave Mahon — Mon, 19 Dec 2011 22:52:52 +0000

As frustrating as dealing with mobile device orientation can be for event handling, it’s very easy with CSS.

For example, it is entirely feasible to rotating the screen to display alternate content within your mobile web app.

Let’s create a small sample document.


  
    Visible Only in Landscape
  
  
    Visible Only in Portrait

Now let’s add the CSS rules:

@media only screen and (orientation: landscape) {
  .landscape {
    display: block;
  }

  .portrait {
    display: none;
  }
}
@media only screen and (orientation: portrait) {
  .landscape {
    display: none;
  }

  .portrait {
    display: block;
  }
}

It’s incredibly simple and you’ve now offloaded this handling to the browser. These selectors are currently supported on iOS and Android, so you can trust that it will work reliably.

Getting Started With Chrome Frame

Don Albrecht — Tue, 07 Jun 2011 02:47:24 +0000

As a follow up to my last post, I thought I’d put out an instruction on actually creating a Google Chrome retreat.

Step 1: Add a Chrome Frame header to your site.

Add this to the head of the Chrome Frame dependent pages:

http-equiv="X-UA-Compatible" content="chrome=1">.


If this isn’t practical, You can also configure your server to send an HTTP header of
X-UA-Compatible: chrome=1
I advise against this approach, however because server configs won’t be immediately available to other users on a site.  By its nature, a Chrome Frame retreat should be considered a reasonably unique event.  It’s good to clearly document this dependency for anyone else who may need to debug things later.  Once you’ve started to retreat, make sure you’re applying the header to every page of the site.  The two engines render things differently and you may create an inconsistent experience for your users if they are transitioning between Chrome Frame and Trident environments frequently.  In my experience, border-radius and drop shadow toggling on and off is a pretty strong “It’s Broken” signal for end users.
Step 2: Identify your Dependency Wall.

Identify the range of pages / screens in your web app that you can’t support in IE.
Identify the navigation routes to those pages.
Leverage the routes to find natural locations for gatekeepers.



Login Screens (the perfect location)
Tutorial Screens (A natural context fit for users)
An Advanced Mode (Similar to the “enriched mode” Microsoft uses for ActiveX requiring cloud apps).




If you’re lucky, this will be a screen somewhere beyond your conversion pipeline.


Create an interception event for IE users.  You can bake this into your app, but the easy way is with conditional comments.

Identify the Dom Nodes in your layout that must be presented to the user for them to progress.
…
Create a conditional comment to hide the nodes and prompt the user to install Chrome Frame.


Be careful of z-index.  The chrome install iframe doesn’t work well if IE is floating some other content node on top of the install button.
UN-INSTALL chrome frame once you’ve tested your retreat perimeter.  This is a big deal for ongoing development as you won’t be testing in IE otherwise.
Becareful about your conversion pipeline.  Your key selling points may be behind the perimeter, but the act of demanding Chrome Frame is a pretty severe barrier to forward movement.




 
 




Other Lessons Learned
Here’s a few lessons learned from deploying this.



A Great Pure CSS Timeline Implementation
Don Albrecht — Sun, 12 Jul 2009 11:21:38 +0000


Matt Bango has published a pretty awesome pure css timeline visualization.  Best part about it is that he’s documented it QUITE well.

A few key concepts:

The width of the nodes is pre-populated in the CSS
The display is based on a pair of UL’s one for the timeline elements and one for the intervals at the bottom.
Width is allowed to be specified in a style attribute on the individual nodes

There’s some pretty clear opportunities to automate the creation of this widget in javascript that I hope to circle back to some day.  In the mean time, you can check out the article and demo here:
http://mattbango.com/notebook/web-development/pure-css-timeline/





Eric Meyer’s Structured Timeline From A Table
Don Albrecht — Mon, 28 Jan 2008 11:39:05 +0000


Eric Meyer recently posted an interesting take on marking up and styling a timeline from static html.  In his case, a table was used to present a timeline featuring multiple points in a single swim lane.

Cool Trick
Working my way through his description of the code, I was most impressed by his creative use of title attributes in the CSS. Basically, by writing  CSS rules of the form:
#timeline p[title~="August"] {left: 62%;}
He uses the [title~="MonthName"] to determine where in terms of 1/12 of the year, the dot representing the event should be placed within the block representing the year.  This only requires the creation of 12 css rules for accurate placement. Since the title is standardized to be the date of the event, this allows him to take his queue for visual layout straight from the content being provided to the user.  Definitely a useful trick.
You can check out Eric Meyer’s Structured Timeline here:
http://meyerweb.com/eric/thoughts/2008/01/21/structured-timeline/
 





Blueprint Layout Tool 0.4 New URL, Significant Polish
Don Albrecht — Mon, 07 Jan 2008 14:33:33 +0000


 
  I’m pleased to announce a preview release of Blueprint Layout Tool 0.4.  This version marks the migration of BLT to its own site at http://www.blueprintlayouttool.com and a focus on dramatic improvements to the source view.  Unfortunately, the current development version only supports Firefox,  IE, Opera & Safari support will be coming soon.
Key Features:

Improvements to style and polish of the interface
Dramatic improvements to source view (Powered by CodePress & PHPTidy)

Generated Source is well formatted and polished
Generated Source is Syntax Highlighted
Generated Source is cleaned of most extraneous markup



Known Issues:

Source View does not work in Safari and Opera
Formatting is off in IE
Generated source contains several Mozilla specific tags that still need to be cleaned.

I would also like to take a few moments and draw your attention to Christian Montoya’s Blueprint Constructor application.  He takes a different approach to the interface and design of the Layout Tool and has created something quite useful and fun to use.  We will be working together to try and achieve similar conventions between our apps.
Check out Constructor at http://lab.christianmontoya.com/construct/
You can read about his design process on his blog at http://www.christianmontoya.com/2007/12/08/construct-01-alpha/





Introducing SilkSprite 2.0 Same Great Icons, 46% less Bandwidth
Don Albrecht — Mon, 17 Dec 2007 13:44:09 +0000


Today I’m pleased to announce the release of SilkSprite 2.0.  Everything about SilkSprite stays the same but the decompressed file size drops by an astounding 46%.
Key Improvements 

11% decrease in size for sprite.css
50% decrease in size for sprites.png

My special thanks go out to Andrew France for achieving such amazing compression of the png file.
You can find the new version here:
http://www.ajaxbestiary.com/Labs/SilkSprite/ 





Blueprint Layout Tool 0.3
Don Albrecht — Sun, 02 Dec 2007 23:43:39 +0000



I’ve made some progress and BLT in the last week and thought it has reached a good point to release for feedback.
New Features

Border Support
All columns can be resized by clicking on them (even nested columns)
All columns can be selected by clicking on them
New Properties Panel

Control Border & Last attributes
Change ID on any div


Improved sorting

Please post your comments below.

Get it online here:
http://www.ajaxbestiary.com/Labs/BLT2/ 
Known Issues:

Interface doesn’t work well on narrow screens
Occasional problems with sorts falling outside of the page
Output needs dramatic cleanup
Files need minified & optimized to improve download time & performance
Issues remain with formatting & .png rendering on IE.  I hope to address these ASAP.

This version has been tested in safari 3, FF 2 & IE 7.  Please test in other browsers if possible.





Slick CSS Based Menu From CSS Play
Don Albrecht — Mon, 26 Nov 2007 16:08:33 +0000



Stu Nicolls released this excellent CSS menu.  It’s javascript free and provides incredibly rich interaction for something solely CSS based.
Check it out here: http://www.cssplay.co.uk/menus/pro_drop6#nogo53 





Blueprint Layout Tool 0.2.1
Don Albrecht — Thu, 15 Nov 2007 05:30:49 +0000


I’ve posted a bug fix release to the Layout Tool.
Changes:

Dramatic improvements to selecting
Fixed script error for IE 7.

Known Issues:
There are still major issues with IE 7 and it doesn’t work well in IE 6 yet.  If anyone has a clue why the color of the div gets progressively darker in IE 7, I’d appreciate it.
You can testdrive the new version at:
http://www.ajaxbestiary.com/Labs/BLT2/index.htm