Articles by
Chris Coyier

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

Aspect Ratio Boxes

I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes. This isn't particularly new stuff. I think the original credit goes as far back as 2009 and Thierry Koblentz's Intrinsic Ratios and maintained popularity even for other kinds of content with articles like Uncle Dave's Ol' Padded Box.

Let's go on a little journey through this concept, as there is plenty to talk about.

(more…)

Componentizing a Framework

I'm sure most of you understand how you work with a framework like Bootstrap, Foundation, or Materialize. You use their CSS and JavaScript. You also use their chunks of HTML, piecing together and applying classes as needed to do what you need to do.

You're on your own piecing the HTML together. That's good, because it's flexible. People use frameworks like this in all kinds of CMS's and backend systems. But what if you want to apply some structure to this, making actual components out of the components given to you in the framework?

(more…)

How Can I Make My Icon System Accessible?

Here's a question I got the other day?

Would you suggest icon fonts or inline SVGs for a complex single page application? And are there specific accessibility concerns for either? Accessibility is especially important for us because schools use our products. I ask because we are currently in the process of unifying and setting up an icon system.

(more…)

Floating Labels are Problematic

I feel like all these issues are handleable, but the damning issue is #3: they need space to move into. Labels can't go away and need to be readable at all times, so a floating label pattern doesn't actually save any space. You could have just put the labels where they float to to begin with. It's still a neat effect, but it doesn't buy you anything and may just cost you something.

(more…)

Browserslist is a Good Idea

As front-end developers, we're well aware that different browsers (and versions) support different web platform features. We make choices based on the support of those features balanced with what analytics tell us about what browsers our users use. For example, if our Google Analytics tell us only 0.01% of users are left on IE 9, perhaps we'll decide it's OK to start using Flexbox and .classList.

(more…)

Full Page Background Video Styles

Making a full page background video is slightly trickier than a full page background image. Over on the Media Temple blog, I take a look at how that's done, but then also what the design patterns are once you've done it. You likely need text over top the video, so do you center it? Do you let the page scroll and cover the video? Do you get fancy and fade out the header as you scroll?

A Unified Styling Language

This article by Mark Dalgleish will go down as one of the most important front-end development articles of 2017.

It's about the hot topic that is "CSS in JavaScript". Mark walks us through how that's actually not a simple and singular idea, but a continuum of concepts and implementations. There are lots of projects that all approach it in different ways. It's likely that the best ways are the projects that actually generate real CSS. These things are a far cry from "inline styles".

Regular ol' CSS isn't going anywhere, but these CSS in JS ideas aren't either. There is some serious benefits to them for a lot of projects. Scoped styles preventing styling mistakes. Performance gains through critical styles. Only shipping the minimum amount of styles needed. Stylesheets that nobody is afraid of and don't become the proverbial "append only" stylesheets. Not to mention that if you are going to be styling in a JavaScript environment, you get the possibility of dynamic styles and porting those styles to other platforms and such.

What is the Future of Front End Web Development?

I was asked to do a little session on this the other day. I'd say I'm underqualified to answer the question, as is any single person. If you really needed hard answers to this question, you'd probably look to aggregate data of survey results from lots of developers.

I am a little qualified though. Aside from running this site which requires me to think about front end development every day and exposes me to lots of conversations about front end development, I am an active developer myself. I work on CodePen, which is quite a hive of front end developers. I also talk about it every week on ShopTalk Show with a wide variety of guests, and I get to travel all around going to conferences largely focused on front end development.

So let me take a stab at it.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag