Ajax Bestiary » CSS

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.

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/

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

Announcing SilkSprite: A CSS Sprite Plugin for Blueprint

Don Albrecht — Thu, 08 Nov 2007 16:18:10 +0000

Today, I’m proud to announce the release of SilkSprite a CSS Sprite plugin for Blueprint based on the widely used Silk Icons.

Benefits

1000 icons compressed into 1 file
Entire Plugin is only 3 files
Easy to use

Usage

Place this directory inside blueprint/plugins
Add this line to “blueprint/screen.css”,
- @import ‘plugins/silksprite/sprite.css’;
Use the sprites by attaching classes ss_sprite & ss_(name of sprite) to an a, span or div element. You can use test.htm as a key to the names of sprites.
example:
```
 
```

Credit

Silk Sprite is Based on the Silk Icon Set by Mark James [famfamfam.com]
Compiled & Adapted for Blueprint by Don Albrecht [ajaxbestiary.com]

Check it out online here:

http://www.ajaxbestiary.com/Labs/SilkSprite/

Plugins, CSS Frameworks And How I Came to Drink The Koolaid

Don Albrecht — Wed, 07 Nov 2007 16:35:05 +0000

When I first started using CSS frameworks & standardized resets to streamline my web development, I adopted a process that I’m sure is familiar to many of you. I would first link to the frameworks CSS files and then link to a project specific stylesheet. The project specific stylesheet would build on the frameworks foundation to provide color & background data, special classes and all the other bits and bobs unique to the design.

For me, this system worked quite well. I gained the benefit of the frameworks without excessive overhead and while I was no longer coding my CSS from the ground up, the process was surprisingly smooth. When I first heard about plugins, I really didn’t see the point of adopting them. They seemed an arbitrary way to include functionality that really belonged in the project stylesheet. A recent project, however, completely changed my mind. I was working with a client on a site that required support for several different templates (holiday sale, investor relations, technical support, etc). While many of these sections employed radically different looks, they needed to be consistent in terms of typography, form elements, tooltips, etc. They also needed support for seasonal theming as much of their marketing was holiday & special event oriented.

Suddenly, the plugins systems made sense. I built a single plugin for all site wide styling and a second plugin to allow for seasonal color schemes (simply upload a different folder to the same location and you can change the colorscheme site wide). Once I realized the power of plugins for complex projects, the realm of uses has exploded for me.

Where I use CSS plugins:

Site specific typography & branding
Common form elements (error, required field, etc)
turn on and off debugging styles (great for troubleshooting)
My personal CSS widget toolkit ( pullquotes, notes, etc.)
Custom Grid (Instead of replacing grid.css in blueprint, I may deploy a new grid as a plugin during development)
CSS Sprites

Plugins are currently supported by Tripoli & Blueprint.

I’m curious who here has started working with plugins or some other formal, modular system for CSS.