CSS

CSS

Font sizing with rem - Snook.ca

Submitted by Benjamin Melançon on November 8, 2011 - 7:37pm

Link Title and URL:

What do we do for browsers that don't support rem units? We can specify the fall-back using px, if you don't mind users of older versions of Internet Explorer still being unable to resize the text (well, there's still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units.

html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */

Add new comment

CSS Lint

Submitted by Benjamin Melançon on June 18, 2011 - 10:57pm

Link Title and URL:

CSS Lint

via Jacine.

CSS LINT

Will hurt your feelings*

(And help you code better)

Doin' the lint thang... Loading

CSS lint found 0 errors and 12 warnings. How can you fix it? See the details below.
Restart
Your CSS goes here. The more, the better. Linting works best when we see the big picture, so give us everything you've got.

Add new comment

Measure CSS rendering time

Submitted by Benjamin Melançon on May 25, 2011 - 5:03pm

The Net in Firebug can do this.

Enable it, reload the page, and click on the CSS subtab.

There are two values you can look as the render completion times, the thin red and thin blue lines, compared to the end of the loading of actual files. DOMContentLoaded is the vertical blue line and load is represented by the vertical red line.

You can see the exact values by hovering over any request. (See screenshot.)

File:

measuring-css-rendering-time.png

Add new comment

Understanding the Elements of Responsive Web Design

Submitted by Benjamin Melançon on March 30, 2011 - 8:07am

Link Title and URL:

Understanding the Elements of Responsive Web Design

Key Features of a Responsive Web Design

In order for a web design to be considered "responsive," it needs to have three key features. Web designer/developer Ethan Marcotte %u2014 the author who conceptualized responsive web design %u2014 describes these features as:

* The site must be built with a flexible grid foundation. * Images that are incorporated into the design must be flexible themselves. * Different views must be enabled in different contexts via media queries.

Add new comment

CSS Typography: The Basics

Submitted by Benjamin Melançon on March 12, 2011 - 5:10pm

http://sixrevisions.com/css/css-typography-01

Add new comment

JQuery Masonry - David DeSandro

Submitted by Benjamin Melançon on February 23, 2011 - 7:23am

Link Title and URL:

JQuery Masonry - David DeSandro

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Add new comment

CSS and JavaScript aggregation in Drupal 7

Submitted by Benjamin Melançon on January 27, 2011 - 6:18pm

stefan:h ave you noticed that javascript and css aggregation does not work as expected on dgd7.org.
17:28 mlncn: how do you expect it to work? they changed it in D7, mostly for the better
17:28 stefan-agaric: there's 3 css and 2 js that seems to be created by it.
17:28 mlncn: there's more files, but they aren't recreated as often
17:28 stefan-agaric: what's the point?
17:29 mlncn: or rather, i should say, there's more files per page but fewer files when browsing around the site
17:29 stefan-agaric: we only need one.

Add new comment

Bringing Modern CSS to Internet Explorer

Submitted by Benjamin Melançon on November 10, 2010 - 9:37am

http://selectivizr.com/

CSS3 selectors for IE

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

http://css3pie.com