Articles by

Chris Coyier

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

Prefixr

Jeffrey Way has created an app which looks through your CSS and adds all the missing CSS3 vendor prefixes. It’s smart enough to do it right no matter which ones you’ve added or forgotten. Cooler, it has an API which …

(Updated on )

What Makes For a Semantic Class Name?

Semantics in HTML is always a hot topic. Some people strive for it at all times. Some people critisize a dogmatic adherence to it. Some people don’t know what the heck it is. …

(Updated on )

The Future of CSS Layouts

Direct Link

Peter Gasston shows us: columns, flexbox, grid, template, positioned floats, exclusions, and regions. This stuff is going to be a big deal in a couple of years and it will be very interesting to see which of these get popular …

Add class to links generated by next_posts_link and previous_posts_link

These two functions create anchor links, and you can customize a lot of it, but it’s impossible to add a class through just using their parameters alone. Gotta add a function to functions.php:

add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');

function posts_link_attributes() {
  
(Updated on )

Seriously, Just Make a Pen

The original title of this post was “Seriously, Just Make a JSFiddle”. It was written before I beame the co-founder of CodePen. It’s no secret or surprise that CodePen was inspired by apps like JSFiddle and JSBin. It’s my job

(Updated on )

Chosen

Direct Link

Super hot jQuery and Prototype plugin by the Harvest team that seriously improves the UI of <select> elements. …

CSSFrag

Direct Link

Shaun Inman with a Safari extension (and Firefox port) that impliments the (not real) fragment identifiers proposal. Essentially: same-page document links that don’t need the ID/hash-tag thing. Alternatively, you target with a CSS selector:…

3D Cube with One Element

Direct Link

Pseudo elements make the two other sides needed (you can only see three sides of a cube at once). I Love the idea of making shapes without loads of extra divs (obviously) and extra love the idea of …

Seamless Responsive Photo Grid

Let’s say you have a bunch of images you want to display, and the goal is to get them edge-to-edge on the browser window with no gaps. Just because you think that would be cool. They are of all different …

(Updated on )