Skip to main content

Chris Coyier

Founder, writer, designer, spam-deleter, email personality

Video

#88: Intro to Compass/Sass

Ask a bunch of designers what they wish CSS could do that it can’t now, and you’ll get a big list that reads much like the list of features for the Compass/Sass framework. If you are like me, you don’t have any trouble writing CSS, but the thought of being able to using things like variables, mixins, and nesting is rather enticing. I learned quite a bit in my first musings with Compass/Sass and answered a lot of my own … Read article “#88: Intro to Compass/Sass”

Article

CSS for Blockin’ Stuff

I am not a big proponent of ad blockers. Besides than the fact that this site has ads on it, I generally just don’t mind it. I am a big proponent of you doing whatever you want to on your computer to control what is displayed to you on your screen. If you want to use user stylesheets, ad blockers, flash blockers, or whatever else, more power to you. Here are some CSS projects intended for blockin’ stuff.… Read article “CSS for Blockin’ Stuff”

Article

Feature Table Design

I ran into the feature table design from Shopify over on Pattern Tap and I was like DAMN SHOPIFY, that is one sexy table. I was inspired to try and replicate it. First in Photoshop, then in HTML/CSS. Recreating cool stuff you find on the web is definitely an excercise I recommend (a few days after, I read this – couldn’t agree more). As these exercises typically do, it lead me down some interesting paths.

Here’s my knockoff:

View DemoRead article “Feature Table Design”

Article

Should you use a template?

I absolutely think that beginner web designers should use templates. And by templates, I mean something that you might buy off ThemeForest or other template selling service. Here are a few reasons why:

  • Tweaking = learning. Templates need to be changed/altered/tweaked. That’s the whole idea of a template. When a beginner designer does those things, they are learning how code works. Tweaking WordPress themes is exactly how I got into web design.
  • Quality. When the site is “done”, a beginner
Read article “Should you use a template?”
Video

#87: Moving Up with MAMP

Working locally with MAMP is awesome, but what about when you need to take that site live? Last time we got a version of WordPress installed locally, now we’ll take that local version and move it to a real live site. This entails moving files as well as moving the database, and changing a couple of values in that database.

Links from Video:

Read article “#87: Moving Up with MAMP”
Article

Photography and CSS

It sure seems like a heck of a lot of web designers are also photographers, doesn’t it? And by “photographer”, I mean they own a DSLR and heavily consider aesthetics when taking a picture. Why the overlap of interests? Well clearly web design often incorporates photographs. Maybe we like to have the equipment we need to take decent pictures for websites and it grows from there. Maybe it’s because photography is a lot like design. You have a canvas of … Read article “Photography and CSS”

Snippet

Basics of Google Font API

Link to CSS files

You essentially hotlink directly to CSS files on Google.com. Through URL parameters, you specificity which fonts you want, and what variations of those fonts.

<head>
  
   ...

   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans">
</head>
Idea: You can avoid an extra network request by opening that stylesheet and copy-and-pasting the @font-face stuff into your main stylesheet. But beware: Google does some User Agent sniffing stuff to sometimes serve different things to different devices as needed. You won’t benefit from that… Read article “Basics of Google Font API”
Article

Yay for HSLa

Huge sogging longbottoms? High strength low alloy steel? NOPE, we’re talking Hue Saturation Lightness (and alpha) and it’s a way of declaring color in CSS. It looks like this:

#some-element {
  background-color: hsla(170, 50%, 45%, 1);
}

It is similar to RGBa in that you declare three values determining the color and then a fourth value for its transparency level. You can read more about browser support below, but it’s basically any browser that supports rgba supports hsla too.… Read article “Yay for HSLa”