Tag Archives: css

The 1140px Fluid CSS Grid System

Dec 24, 2010 by Matt | Posted in Design No Comments

A new CSS grid framework has been gaining attention in the blogosphere lately. A 12-column fluid framework with a preferred width of 1140px. The developer picked that width because it fits nicely on a 1280 pixel wide monitor. The framework’s most notable strength, though, is that it’s “fluid all the way down to a mobile version.” Resizing the viewport causes the grid to adapt to the new size, finally collapsing everything into a single column for mobile devices.

Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.

It looks like a good framework for sites where a fluid layout is acceptable. Its usage is fairly simple, and a PSD of the grid is available for laying out your design.

The 1140px Fluid CSS Grid System [CSSGrid.net]

Optimize a Website for iPhone Using Only CSS

Nov 19, 2010 by Matt | Posted in Design 4 Comments

Lots of websites now have mobile versions that optimize their designs for speed and ease-of-use on the iPhone, reducing scripts and designing for the device’s smaller screen. They usually use some sort of browser detection script that loads a different template on the mobile device.

Sahil Lavingia, creator of the Dayta app, has a quick tutorial on how to optimize your website for iPhone in 10 minutes…using only CSS.

I haven’t had a chance to try it out for myself, but it looks fairly simple.

Remove Default Textarea Scrollbars in Internet Explorer

Jul 26, 2010 by Matt | Posted in Design One Comment

Have you ever noticed that Internet Explorer, with its great wisdom and intelligence, likes to add a useless scrollbar to the side of every HTML textarea? Most browsers add one when it is needed, but IE adds it in right away.

There’s an easy CSS fix though:

textarea {
   overflow: auto;
}

CSS Selector Efficiency

Jun 14, 2010 by Matt | Posted in Coding No Comments

Here’s a fun (and slightly puzzling) fact: CSS selectors are parsed from right-to-left instead of from left-to-right when the browser renders a page. This means that when you have a selector like .navigation a { color: red; }, the browser first searches for a elements and then narrows its search to the ones with a class of navigation.

This strikes me as particularly inefficient. Considering CSS selectors usually have the most specific criteria on the left, and then subsets more to the right. I don’t know why things are done in this manner, but it seems that they are…

What sorts of CSS selectors are more efficient than others? Chris Coyier of CSS Tricks has some answers.

Fortunately, computers run fast enough that you shouldn’t really have to worry about it too much. It’s nice to shame some minuscule amounts of time off of the rendering, but you’ll see a much more drastic speed increase by minifying and compressing your CSS and scripts.

Efficiently Rendering CSS [CSS-Tricks]

Google Font API

May 20, 2010 by Matt | Posted in Design No Comments

Google is taking on projects like sIFR and Cufón with their new Google Font API. A simple line of JavaScript lets you load a font family from their directory of open source fonts, allowing you to safely reference it within your CSS.

Here is an example:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cardo">
<style type="text/css">
body {
font-family: 'Cardo', serif;
font-size: 24px;
}
</style>

It’s simple, and it looks like it works cross-browser pretty much. Hopefully we’ll be seeing more supported fonts in the future. And please, don’t abuse Lobster until it becomes the next Comic Sans.

Custom Post CSS Styles in WordPress

Feb 22, 2010 by Matt | Posted in WordPress One Comment

I’ve always thought it was a neat idea to be able to apply custom CSS stylings to different posts on a blog, allowing you to make subtle tweaks to the overall design on a case-by-case basis. A post about an upcoming movie could have a large poster as the page’s background image, the colors could be changed to match, etc..

Digging into WordPress has a post with two methods that achieve just that effect. One adds a meta box to your Write Post screen, where you can input CSS that will be echoed out on single post pages. The other allows you to drop a numerically-named CSS file into your theme folder, which is called upon when appropriate.

Custom CSS Per Post [Digging into WordPress]

CSS3 Rounded Corners

Jan 14, 2010 by Matt | Posted in Design 2 Comments

Want to round the corners of an element without messing around with images and tricky CSS? You can do it with pure CSS, but, of course, it won’t work in Internet Explorer. (Or Opera, for that matter.) Fortunately, the effect devolves gracefully.

As an example, to round the corners of a button by 6px:

#myButton {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

The first property is for Firefox and other Mozilla browsers, the second is for WebKit browsers like Safari and Chrome, and the third is for future browsers that actually support the official property that will be part of the CSS3 standard. (IE9, oddly enough, is rumored to eventually support this.)

Need to round just one corner?

-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;
border-top-left-radius: 6px;

The CSS3 “Super-Awesome Button”

Dec 10, 2009 by Matt | Posted in Design No Comments

Tired of messing around with image files to create tasteful (and expandable) button graphics? Why don’t you just use some CSS3 techniques to build them on the fly? Smashing Magazine’s Pushing Your Buttons With Practical CSS3 describes how to use box-shadow, text-shadow, and border-radius to create buttons out of pure CSS. Then they take things a little further with some animated WebKit glow effects.

Oh, and the article also shows how to create the custom buttons that Google uses for WebKit browsers.

Smashing Magazine's CSS3 Buttons

What would be do without Smashing Magazine? :)

CSS white-space Property

Nov 17, 2009 by Matt | Posted in Design No Comments

Here’s an interesting and little-mentioned CSS property: white-space. With it you can prevent an element’s contents from line wrapping, create pre text, even pre text that wraps when necessary.

The syntax is like this:

#mydiv {
white-space: nowrap;
}

The above example is fairly self-exaplanatory; it prevents the text inside the #mydiv div from wrapping. If #mydiv had a fixed width, the text would spill out of the container. However, there are practical uses for this behavior. Have you ever wanted to have an inline element (perhaps a span containing the category a blog post is assigned to) automatically move down to the next line instead of appearing across two if it were too big? Give the element nowrap.

The other major value for white-space is pre, which forces the text to appear as it was entered, leaving spaces, carriage returns and tabs intact. The counterpart is pre-wrap, which works the same way, except it will wrap the text if the containing element is too narrow. So if you use code samples in <pre> elements on a regular basis, but want to keep long lines from spilling out of their containers and creating horizontal scrollbars on your page, you can just use this:

 pre {
 white-space: pre-wrap;
 }

Now your preformatted text will wrap down if the line is just too long.

Learning CSS Sprites

Nov 6, 2009 by Matt | Posted in Design, Featured 9 Comments

What exactly is a sprite? It’s a CSS technique that can make your website load faster. Instead of having a dozen images that are included on every page of the site (one for your logo, one for an RSS button, a few fore social media links, etc.) you combine them all into one big image. You can then use CSS to display just the portion you need in any given spot.

How does this improve loading times? The major bottleneck in the loading of a web page today isn’t download speeds so much as concurrent downloads. A web browser will only download two files at once from a web server. After the HTML is downloaded, the browser has to grab CSS, JavaScripts, and images from your server. You might have a lot of those secondary files, and only two will be loaded at once. If you combine your template’s images into one big file, they all get downloaded at once, instead of two at a time. Also, you may shave off a few kilobytes of file size in some cases, but that’s not as important.

Now how does this trickery work? Let’s use Apple.com as an example. They keep their header navigation in a sprite that looks like this:

Apple navigation header sprite

As you can see, the buttons are laid out in a row, with their alternate states underneath them. A sprite starts out as something just like that: an image full of little images. The real trick is making it spritely.

Continue reading →