Style Grind » CSS

960 Grind System

Peter — Tue, 25 Mar 2008 02:43:32 +0000

A new css framework has hit the web and it looks really, really, well done. Like a few others, 960 is based on grids and prototyping your designs quickly and easily.

Compound Microformats

Peter — Wed, 19 Mar 2008 02:43:37 +0000

A great demo page showing off Compound Microformats, if your wondering how to implement Microformats into your site, this is a good starting place.

CSS Reset Updated

Peter — Wed, 05 Mar 2008 02:47:22 +0000

Eric Meyer has updated his reset style sheet, tweaking a few things and removing others.

“t really is the beginning of a baseline style sheet. (Or can be.) Things like boldfacing and italics are some of the most obvious textual effects readers will see, and to have reset styles that treat them inconsistently across browsers doesn’t make sense.”

Streamline your forms with widgets

Peter — Thu, 14 Feb 2008 02:59:47 +0000

“Advanced forms” are rarely that. A more fitting name would be “Overwhelming and confusing forms”. But with Jason Long’s clever approach to streamlining a screen full of checkboxes, you might just be able to once again look fondly on your forms.

Stay on :target

Peter — Fri, 01 Feb 2008 03:05:12 +0000

A lot of us know all the ins and outs of CSS2 and HTML4, and reading the same types of how-tos can get boring. What better way to fight that boredom than forget about the current practicality of CSS3 techniques and learn them anyway? Brian Suda does just that with this article on the immensely useful :target selector.

The ACID3 Test

Peter — Sat, 12 Jan 2008 03:17:03 +0000

Its out, test your browsers to see how compliant they will be against CSS3.

Diagnostic Styling

Peter — Wed, 02 Jan 2008 03:19:25 +0000

A great tip to diagnose problems on your website using CSS, very intuitive, but what else do you expect from Eric Meyer!

Maximum and Minimum Height and Width in Internet Explorer

Peter — Wed, 19 Dec 2007 03:40:52 +0000

The bane of many web developers is the lack of support for max/min heights and widths in IE. Well, there is finally a way to utilize this great CSS attribute.

“Behold the seventh wonder of the virtual world: max/min-height and max/min-width properties are possible in Internet Explorer! Indeed, by taking advantage of IE’s proprietary CSS attribute, expression, you too can whip IE widths and heights into desirable proportions. The CSS expression attribute enables JavaScript commands to be executed within Internet Explorer. JavaScript via CSS? Thanks, Microsoft!”

CSS for Accessibility

Peter — Fri, 14 Dec 2007 03:36:17 +0000

24 Ways has some CSS tips to make your site accessible to everyone:

“CSS is magical stuff. In the right hands, it can transform the plainest of (well-structured) documents into a visual feast. But it’s not all fur coat and nae knickers (as my granny used to say). Here are some simple ways you can use CSS to improve the usability and accessibility of your site.“

CSS Oval buttons

Peter — Mon, 03 Dec 2007 04:17:12 +0000

These buttons use the sliding doors technique of CSS, plus two sliced background images with “on” and “off” states, to create flexible oval shaped CSS buttons, similar to CSS Square Buttons. Each button can accommodate text of variable widths and supports a hover effect when the mouse rolls over it. The only limitation is the height of the button, which is fixed based on the background image’s height.

How to Size Text in CSS

Peter — Wed, 21 Nov 2007 04:19:26 +0000

A List Apart writes about the current solutions for controlling type in CSS:

“In this article, we will reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms.”

A CSS styled table version 2

Peter — Fri, 21 Sep 2007 03:36:39 +0000

Veerle updates her styling tables tutorial:

“In 2005 I wrote an article about styling a table with CSS. After receiving so many requests I finally decided to give in and write another tutorial. Seems like a popular topic and an interesting one to share some tricks on how you can nicely style them. This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS. “

Tripoli – a CSS standard for HTML rendering

Peter — Thu, 20 Sep 2007 03:32:23 +0000

Tripoli is the result of years of coding real-world CSS projects. When dealing with multiple projects, you find yourself repeating CSS rules again and again. Tripoli adds the CSS base you need to skip the typographic basics and get on with design customization while relying on a solid, cross-browser backend.

Dealing with CSS layouts can be a pain. Most of the frustration comes from inheritance and margin issues. To make things easier, Tripoli resets all browser defaults for layout and then re-builds them again for content typography.

XRAY

Peter — Wed, 19 Sep 2007 03:35:36 +0000

XRAY is a free cross browser tool that lets you see the box model in action for any element, letting you see beneath the skin of any web page.

Just click the XRAY button to instantly answer those vital questions: where is the top and left of this element? how big is each margin? how big is the padding? how wide and high is the content box?

CSS Cachebuster

Peter — Sun, 19 Aug 2007 09:54:00 +0000

I’m sure just about every web developer is familiar with client-side stylesheet caching. You know how it goes, you’re making changes to a stylesheet and checking them in your browser and then, all of a sudden, the updates you made don’t show up. When this happens, you either click refresh like a spastic monkey or clear your browser cache and the world returns to normal.

Ideally, adjusting the server’s cache settings. As a stopgap though, or for situations where I don’t have control over the server’s cache settings, I wrote a bookmarklet that reloads all the linked stylesheets with a query string of the current timestamp attached.