Article Archives

A Guide to SVG Animations (SMIL)

Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it's features.

The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck out of them for the rest of us. Here she digs into SMIL (and friends), and animation syntax built right into SVG, and gives us this epic guide.

(more…)

Sponsored: Stack – Task Management for Dev Teams

Stack is a powerful new task management system for Devs and Designers. A simple and fully customizable tool that fits your workflow. Manage projects and communicate with your team hassle free and in real time.

I really like how Stack approaches this. It's exactly how I would have done it. There are projects - big buckets that tasks go into. Then each project has these columns that you can organize however you want. Each task is actually in a column. Could be different types of tasks or the state the task is in, whatever works. Then each task has it's own little world of people and conversation and todo's and stuff, if needed. So I might have a CSS-Tricks account, with a project for The Lodge, that has a column for Videos To Shoot, and each video is a task, and in the task I leave notes on what the plan is. Beautiful.

Free for 30 days, no credit card required to get started. Super simple pricing model after that ($5/month per user).

Intermediary Pages in a Site Hierarchy

I had a reader write in with an interesting question:

When one has multi-level navigation, do you think it crucial to have an actual page for the top-level item? For instance, About > Company, Founder, History.

There isn't really anything worth putting on the About page that wouldn't be on the three sub-pages. In the nav, should About just redirect to Company? Should there not be a Company page and its content be moved to About?

Any best practices you've found over the years?

(more…)

When users leave the search box empty…

The following is a guest post by Brin Wilson of WinningWP. Brin wrote to me wanting to do a little advertising for his site. I of course would happily accept that, but even better, since Brin is a tech writer anyway, why not write a guest post. That's always a win-win, and since he had a good idea anyway... take it away Brin!

If you're reading this, my guess is you're someone who cares about user experience. (more…)

The Most Common Questions Asked on ShopTalk

As I type this, Dave Rupert and I have recorded 137 episodes of ShopTalk. ShopTalk is primarily a question-and-answer style show. Dave's early idea was to have it be loosely modeled after the most popular NPR show of all time, Car Talk, which is mostly Q&A. We have guests, and we talk a bit about the guest so people have a sense of who they are, but it's not exactly an interview show.

We solicit people's questions on ShopTalk. Again as I type this, we're closing in on 2,000 questions people have sent in. I've read every single one of them and there are definitely some repeating themes. I think it's an interesting look at the vibe of the industry.

(more…)

The Game of Life

It's not really a "game" - but more like a set of rules by mathematician John Horton Conway. Imagine a grid of cells, like a spreadsheet or a <table></table>. Each cell is either alive or dead. "Rounds" pass one by one. In each round, there are rules on whether a live cell should continue to live or die, and if a dead cell should continue to be dead or become alive.

(more…)

Don’t use `picture` (most of the time)

Jason Grigsby:

Unless you're solving for art direction, you don't need to the element. In fact, you're likely doing your users a disservice by using the <picture> element.

I'd wager that the majority of "responsive images" use is serving appropriately sized images for the situation. The situation = the size the image will be displayed at, screen pixel density, and bandwidth. That's exactly what <img sizes="" srcset=""> is best at. It does magical stuff that the browser can optimize for, whereas <picture> will only be as efficient as the rules you've explicitly set up for it (in which you almost surely weren't verbose enough with maximize efficiency). Only use the actual picture element when you need to do something very explicit (e.g. an exact breakpoint you need to swap out a totally different image).

Build Web Layouts Easily with Susy

I've been coming around to the idea of using Susy (a Sass add-on for grids) lately. I like the idea of grids-on-demand, rather than a strict framework (no matter how simple). We even added support to CodePen. Last week I ran into Eric Suzanne, the creator of Susy, and I told him Zell Liew was working on a guest post for this site. He was "Oh, Zell! Yeah he's awesome, he's like the unofficial promoter and trainer for Susy." And so, here's Zell introducing us to Susy!

(more…)

The Bézier Game

A game to help you master the pen tool.

By Mark MacKay.

Early in my career I had a job where a good half of it was cutting detailed clipping paths on photos (using the Pen Tool in Photoshop). We had an in-house photography department that shot furniture and electronics and the like, and I had to cut outlines around everything so designers could easily isolate things as needed. I'm sure I did thousands of photos. I'm still not a super expert, but I value my Pen Tool skills and end up using them regularly.

Getting Started with CSS Shapes

I just watched Jen Simmons give a talk Modern Layouts: Getting Out Of Our Ruts and she had some great examples of how easy CSS shapes are to use, even with safe progressive enhancement. If you haven't heard of them, essentially it's a way to wrap content (typically text) around custom SVG-like paths.

As serendipity would have it, here's Razvan Caliman with a megapost on how it all works and how to use it with real examples.

Scroll-Then-Fix Content

A reader sent me in a GIF showing off a cool effect they saw on Google on mobile. (Presumably the homepage you see when you launch Chrome on Android?) There is a search input in the middle of the page that scrolls with the page, but as it's about to scroll off the page, it becomes affixed to the header. Let's cover that, because, you know...

It's a cool effect particularly if used to make UX better and not to affix some dumb intrusive ad. Here's the GIF I based the idea on. Little choppy, but the idea is there:

Two States

Like most good tricks, there isn't much to it. All we do is think of (and design for) the two different possible states:

  1. Search bar in its scrollable position
  2. Search bar in its fixed header position

We toggle between them simply by changing a class name. There is no trickery with having two search forms that reveal themselves in different scenarios. That's good, as we don't want to smurf around with keeping those in sync. Much easier to just move a single one around.

State One

(I'm going to use SCSS here because the nesting is nice for managing states.)

.top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 60px;
}

.search { /* Container just in case we want more than just the search input to come along */
  position: absolute;
  top: 155px;
  left: 20px;
  right: 20px;
  input {
    width: 265px;
    transition: width 0.2s;
    -webkit-appearance: none; /* Autoprefixer doesn't catch this */
  }
}

.top {
  height: 250px; /* Space in here for search */
  padding-top: 40px;
  position: relative;
}

State Two

Assuming we've put a class of "fix-search" on a parent element.

.top-header {
  ...
  .fix-search & {
    background: #eee;
  }
}

.search { /* Container just in case we want more than just the search input to come along */
  ...
  .fix-search & {
    position: fixed;
    top: 10px;
    input {
      width: 250px;
    }
  }
}

Switching States

The trick here is applying that class at just the right moment. In our little demo, we can just test for when that perfect moment would be and hard code that into some JavaScript watching for scrolling. jQuery style:

var wrap = $("#wrap");

wrap.on("scroll", function(e) {
    
  if (this.scrollTop > 147) {
    wrap.addClass("fix-search");
  } else {
    wrap.removeClass("fix-search");
  }
  
});

That's all it takes to switch between the two states we've set up. If the page has scrolled down 147 pixels or more, it will have that class applied. If not, it doesn't. Even if you go down and come back up the class will go away (because this little function gets called on every scroll event).

Demo

See the Pen Search Box in Content Moves to Fixed Header by Chris Coyier (@chriscoyier) on CodePen.

Debouncing

In the grand tradition of mentioning scroll debouncing whenever any demo binds an event to a scroll event: you should consider debouncing when binding functions to scroll events, because if you don't, it'll get called a zillion times and could be slow.

CSS

This is the kind of thing that would be sweet to do in CSS alone. No great solutions pop to mind just yet, but I'm continually amazed by crazy things people use CSS to do, so if something comes along I'll update this.

Perhaps someday we'll be able to do scroll position media queries?

Fixed Position Support

Note that this demo relies on fixed positioning, which has a sketchy history on mobile. While I'm tempted to say it has "pretty good" support these days, you should make the judgement yourself. Some reading:

This is just one (not particularly reusable) example

There are a lot of magic numbers in this demo. Anytime you are setting heights there should be some warning flags happening up in your brain. It doesn't mean never do it, it just means be warned. In this demo, if that centered image in the header changed height, it would look weird pretty much no matter what. This isn't the most flexible and forgiving of layouts as it is. Even if you fixed the header to look right after a change, the JavaScript has corresponding magic numbers for when to change state.

Perhaps some version of using waypoints (or the concept of it) could make a more bulletproof system.

A Look at SVG Light Source Filters

The following is a guest post by Joni Trythall. Joni recently finished a Pocket Guide to Writing SVG. I've been excited about SVG for a while now, working with it, learning about it, writing about it... but there is so much to know. It really is another whole universe of the web. So I reached out to Joni to see if she would like to write something for CSS-Tricks on SVG and she agreed! Here's Joni on lighting in SVG, something I know I knew nothing about before reading this.

(more…)

Sponsor: Hack Reactor – New Remote Beta Classes

With the success of their first online cohort, Hack Reactor is happy to announce two new Remote Beta classes. Aspiring engineers no longer need to relocate to San Francisco in order to attend their 12-week immersive JavaScript coding school. Take Hack Reactor’s program from home and gain the skills and confidence needed to build amazing products.

Remote Beta Classes begin October 27th & December 8th with recommended application deadlines of September 29th and November 10th, respectively. Apply today and take their exceptional Remote Beta program from wherever you are!

AMCSS

"Attribute Modules for CSS"

An idea by Glen Maddern for moving styling with attributes rather than classes. Not an entirely new concept, but it's interesting to give it a name and explain a system based around it. Thoughts:

  • It avoids namespacing. Using modifiers like "large" is often a tempting naming convention, but too generic for a class name on its own. "Large" would be fine as an attribute value e.g. am-Button="large"
  • Cleaner on the HTML side, messier on the CSS side.
  • Probably technically slower CSS selectors, but that has been shown over and over to make very little difference except in extreme situations.
  • It probably makes the most sense while building a framework or pattern library that features variations. It's OK that these parts of your site would use an approach like this and your day-to-day styling doesn't.
  • I like how it sounds like caveman talk. <i am-Ogg="you jane.">

Give Designers Tools To Get You What You Need

Let's say you're having a healthy back-and-forth between you (a front end developer) and a designer. All the best work comes through collaboration and iteration, right? I believe that. But I also believe there are time traps in there. If you feel you're wasting time by getting peppered with tiny design tweaks, there might be salvation in giving designers tools to do the tweaks and then give you exactly what you need.

Let's see some simple examples.

(more…)

Glitch Effect on Text / Images / SVG

Lucas Bebber's Glitch is a super cool effect. It's like you're looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space.

It's bonafide CSS trick if there ever was one! It took me a bit to figure out how it was working, so I thought I'd explain. Then I ended up making it work for other kinds of content as well as making it into a group of Sass @mixins to make working with it a bit easier.

(more…)

Sponsor: Frontend Masters – Expert Web Development Training

Frontend Masters produces quality video training by industry leaders like Kyle Simpson, Douglas Crockford and Estelle Weyl. I like how these courses are targeted at intermediate and advanced developers:

You've got the basics down and don't want to learn from teachers who just spoon feed you their google results - you want to learn from the masters! Here, you get experts as teachers - people who are actively shaping the industry

Upgrade your JavaScript, CSS and front-end skills with Frontend Masters courses. Check out the complete course list.

Centering in CSS: A Complete Guide

Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for.

So let's make it a decision tree and hopefully make it easier.

(more…)

Advantages to Native CSS Variables

I tend to think variables are best left to a preprocessing step, but there are some distinct things that having them directly in CSS can do:

  1. Daniel Imms:

    [they] can change at runtime, allowing the implementation of things like theming to be done more elegantly.

    i.e. change the value of a variable on a live, rendered web page and see the changes reflected everywhere that uses that variable.

  2. Peter Gasston:

    you can set the value through the setProperty() method on the style object

    Which makes #1 possible and opens up cool possibilities.

  3. They can be scoped to an element. So perhaps you could set variables representing color to theme a site, but override them at a component level to apply different themes in smaller places as needed.

Sponsored: Hack Reactor – The Original JavaScript Coding School

Hack Reactor is a 3-month immersive coding school focused on computer science fundamentals and JavaScript. With a twofold mission, Hack Reactor works to empower people and transform education through rapid-iteration teaching. Hack Reactor grads work at companies like Google, Adobe, OpenTable, Amazon, and numerous startups with a average starting salary of $105K and a 99% graduate hiring rate.

I personally know someone who went to a coding school and changed careers and changed their life, so I'm a believer. Apply today and gain the skills and confidence to build amazing products.

Design For Community, 13 Years Later

I had heard several people say Design for Community by Derek Powazek is a great book and was published well "before it's time." As someone who works on several sites that I very much think of as community sites, I picked it up and gave it a read. Published in 2001, the book is just over 13 years old now. Ancient history for a typical tech book. It is a tech book in that it talks about specific websites and specific technologies, and those things do feel ancient (the screenshots are hilarious). But as a design book (and kind of an anthropology book), it has aged quite gracefully.

Since I read the book with a highlighter marker in hand, I thought I'd share quotes from it and think about how the ideas from the book have come to pass all these years later.

(more…)

What do you do when your design pattern breaks down?

Say you have a module. Every site has modules, right?

<div class="module">
</div>

Perfect! We did it!

But now, a New Circumstance™ comes along. This module isn't going to work exactly as is. It's pretty close, but in this New Circumstance™ the module is going to need some extra bottom margin.

How do you handle that? Let's explore some ways.

Body class affects it

Are all the modules on a particular page or area of your site like this? Perhaps you can add a class to that page (or area):

<body class="books-page">

   ...

   <div class="module">
   </div>
.module {
  /* normal style */
}
body.books-page .module {
  /* variation styles */
}

You don't really need to tag qualify the .books-page, but I often do because it's no big deal in this circumstance and reminds me what's going on.

Sass is useful in these circumstances because the nesting kinda ties the room together.

.module {
  /* normal style */
  aside.books &  {
    /* variation style */
  }
}

Totally new class

Perhaps the new style is different enough that you are going to call it something different.

<div class="solitary-module">
</div>
.module {
  /* normal style */
}
.solitary-module {
  /* alternate style */
}

If the style are pretty similar, you could:

.module, .solitary-module {
  /* normal style */
}
.solitary-module {
  /* variation styles */
}

Which is exactly what @extend does in Sass:

.module {
  /* normal style */
}
.solitary-module {
  @extend .module; /* could be a %placeholder selector */
  /* variation style */
}

Double up classes

Perhaps you create an additional class, but that class isn't meant to work on it's own, it's just a variation.

<div class="module module-books">
</div>
.module {
  /* normal styles */
}
.module.module-books {
  /* variation styles */
  /* you don't HAVE to double up the classes here in the CSS, but it enforces the connection (while increasing specificity) */
}

Data-attribute variations

I don't think this is particularly common, but I kinda dig it.

<div class="module" data-variation="books">
</div>

Attributes are like classes (same specificity) but can have values.

.module {
  /* normal styles */
}
.module[data-variation="books"] {
  /* variation styles */
}

Reads pretty well.

Inline styles

Is this variation rare? Perhaps just an inline style will work.

<div class="module" style="margin-bottom: 40px;">
</div>

Typically frowned upon (not reusable), but if it's a one-off thing, it does the job.

Shame.css

You can always deal with it later with shame.css!

<div class="module chris-did-this">
</div>
/* I will totally deal with this later I promise */
.chris-did-this {
  /* variation styles */
}

How do you do it?

Sponsored: An RSS Reader for Developers

rssheap is a web-based reader for software developers. You subscribe to tags of interest (CSS, JavaScript, PHP, Ruby, etc.), and we find great articles for you to read. Articles are sorted by how many votes they have to ensure you always read high-quality content.

I think this is a clever idea. It's easier than a typical RSS reader because there is content there the second you sign up and you find things socially. It's also better than a typical news aggregator site in that you mark things as read and customize to your liking.

Try it out, it's free!

CSS Guidelines

> High-level advice and guidelines for writing sane, manageable, scalable CSS

Feels like a nice culmination of Harry Roberts work the last several years.

Starting CSS Animations Mid-Way

Say you have a @keyframe animation that animates an element all the way across the screen. From off the left edge to off the right edge. You apply it to multiple elements. But you don't want all the elements to start at the same exact position.

You can change the animation-delay so that they start at different times, but they will still all start at the same place.

Fortunately, there is a way.

(more…)

Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?

The following is a guest post by Philippe Bernard. Philippe has done research on what it takes to make a favicon (and all the related graphics and markup) such that you are covered with the best quality output everywhere. Spoiler alert: it's a lot of different graphics and markup. Also full disclosure: Philippe has built a tool to help with it he showcases in the article.

(more…)

Effortless Style

Some clever stuff in here regarding styling content that is just regular HTML (perhaps as produced from Markdown). No classes or attributes of any kind, no extra HTML, no JavaScript, no nothin'. Content like that is 1) easier for anyone to produce 2) going to last.

How To Add Page Transitions with CSS and smoothState.js

The following is a guest post by Miguel Ángel Pérez. Miguel has been working at Weblinc on ways to transition pages on websites more gracefully. On single-page applications, we have more opportunity for this since we aren't fighting the page reload. But traditional sites with page reloads, you can still be quite graceful with some help from CSS and JS. In this article Miguel focuses on setting up the CSS to do this and making it work with his plugin.

(more…)

Sponsor: New Creative Market Bundle! $39 for loads of design resources

Creative Market sells loads of design resources. From high quality stock photography and vector art, to print design and web templates, to really fancy stuff like Photoshop actions for getting awesome effects easily.

Once in a while, they put together a bundle of resources you can buy and then have access to download forever from your account. They are packed with all the great stuff I mentioned. Purchased individually, everything together would be quite expensive. But for this week only, the entire Big Bundle is priced at $39!

I love having stuff like this around. Often just poking through looking at everything I have is the creative spark I need to get started building something.

Swapping Out SVG Icons

Let's say you're using inline SVG and want to change the SVG icon that is displayed in an element on state change, like changing a class or on :hover/:focus. There are a number of ways you can approach that.

(more…)

Pure CSS parallax scrolling websites

Keith Clark explains the core concept behind parallax scrolling (e.g. different elements scroll at different rates) with just CSS. It's a devilishly clever (yet simple) combination of 3D transforms to push the element "away" from the screen, affecting it's scroll rate, while adjusting the scale so the element appears at it's original size.

Scott Kellum and Brenna O'Brien worked up a Sass @mixin for it a while back which makes it even easier.

Beginner Concepts: How CSS Selectors Work

Are you new to CSS? This article is for you! Perhaps the biggest key to understanding CSS is understanding selectors. Selectors are what allows you to target specific HTML elements and apply style to them. Let's not think about style right now though, let's just focus on the selecting.

(more…)

Sponsored: Improve website UX with Hotjar Insights

Hotjar Insights is a web app to help you understand your website visitors. It combines a lot of insight tools (that you might pay for separately) into one unified platform. Heatmaps that tell you where your users are clicking. Feedback forms. Exit polls. Surveys. Video recordings of users using your site. A platform for recruiting people to do user testing for you. Live chat integration. Funnel analysis. And of course, more :)

If you are a designer, UX specialist or into web marketing, this tool will allow you to improve the user experience (and conversion rate) of your site.

Get free early access to Hotjar Insights if you sign up before August 30th, 2014.

Clever Uses for Step Easing

The following is a guest post by Julian Shapiro. Julian has been working on Velocity.js recently, which he has written about here on CSS-Tricks before. Julian lives in a world of animation, so it's no surprise he's collected together some interesting examples of exotic animation techniques. Here he shares all about step easing, which you might not even be aware of. A type of animation transition that jumps from keyframe to keyframe in a set number of steps, rather than packing in as many keyframes as possible as animations normally do.

(more…)

JavaScript Event Madness! Capturing *all* events without interference

The following is a guest post by Matthias Christen and Florian Müller from Ghostlab. Ghostlab is cross-browser cross-device testing software for Mac and PC. One of the things I'm very impressed Ghostlab can do is sync the events from one browser to all the others. Scroll one page, the others you are testing scroll. Click somewhere on one page, that same click happens on the others. I asked them about how the heck it does that when there is so much that could interfere. Matthias and Florian explain:

(more…)

CSS Triggers

When you change a CSS properties value, the browser needs to react to your change. Some values change the layout of the page. For instance, a change in width requires the browser to update layout, then "paint" any pixels that have changed, then "composite" them together. That's a lot of work. Some CSS properties can be changed more inexpensively. For instance, a change in background-image doesn't require any layout changes, but does require paint and composite.

Paul Lewis did all the research on which properties do what. A good reference to help you think about what kind of changes you can make that are easy for the browser (thus fast) and what kind of changes are hard (thus slow).

RWD Bloat

Dave Rupert does an in-depth analysis of his own responsive site to figure out where he's at, identify places to improve, and evaluate the idea going around that responsive design is at fault for bloated websites.

Says Dave:

Expect RWD to add ~10%

Update: Update.

GitHub’s CSS

Mark Otto takes us on a tour of the CSS of GitHub.com. So great to read a straight-talking bit like this, warts and all.

This is 90% the same as we do things at CodePen. One major difference is that they combine all their CSS into two files and just serve them on all pages. I suppose that way once you've visited any page of GitHub.com, you've browser-cached all the CSS you'll ever need there. I have tended to go with a global.css for everywhere and a section.css, which leverages browser cache for the bulk of it while keeping the total CSS weight per-page down.

Guide to Responsive-Friendly CSS Columns

The following is a guest post by Katy Decorah (edited by Jason Morris). Katy was researching CSS columns and how they can work responsively, as there wasn't much information she could find out there on the subject. So, like a hero, she wrote it all up. Here's Katy:

With CSS columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas. A supported browser will make calculations to wrap and balance content into tidy columns. If you're already working with a fluid layout, the columns will reflow automatically. With the right combination of properties, CSS columns can be an interesting layout option that is responsive-friendly while degrading gracefully.

Where to declare columns

You can declare columns on any block level element. Columns can be applied to a single element or applied to multiple elements by targeting their parent.

In the image below, the left side depicts CSS column rules being applied to the second paragraph to transform just that content into columns. The right side depicts the rules being applied to a container element such as a <div></div> or <article></article> to transform the elements into a multi-column layout.

single and multi element columns

How to declare columns

There are three different ways to declare columns:

  1. Declare column-count.
  2. Declare column-width.
  3. Declare both (recommended).

Let's explore the different ways to declare columns.

1. Declare column-count

Use column-count to declare the number of columns.

article {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

Live Demo

See the Pen [2] CSS Columns, count-count by Katy DeCorah (@katydecorah) on CodePen.

The number of columns remains consistent even as the browser width changes as demonstrated in the gif below.

column count at narrow width

2. Declare column-width

Use column-width to declare the width of the columns.

The specified value is not an absolute value, but rather a minimum width. Given the column-width, the browser will decide how many columns of at least that width can fit in the space. The browser will also take into account the gutter, or gap between columns in this calculation (more on that later). Then the browser will expand the columns to evenly distribute to fill the width of the container.

For example, if you inspect the paragraph in the live demo below, you will find that the width of the column is actually greater than 150px, which is the set value of column-width.

article {
  -webkit-column-width: 150px;
     -moz-column-width: 150px;
          column-width: 150px;
}

Live Demo

See the Pen [3] CSS Columns by Katy DeCorah (@katydecorah) on CodePen.

Once the browser cannot fit at least two columns as wide as the column-width then no columns will appear and the layout will return to a single column layout.

The gif below demonstrates how the columns release as the browser width narrows. Unlike column-count this property is inherently responsive.

column width as the browser narrows

3. Declare both (recommended)

Use column-count and column-width together for the best control over CSS columns. You can declare each property or use the shorthand columns.

When both properties are declared, column-count is the maximum number of columns and column-width is the minimum width for those columns.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
}

/* or */

article {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
}

Live Demo

See the Pen [4] CSS Columns, columns by Katy DeCorah (@katydecorah) on CodePen.

The gif below demonstrates how using column-count and column-width together respond as the browser width narrows.

both properties as the browser narrows

Customizing columns

There are several properties to further customize CSS columns.

column-gap

To adjust the gutter, or the space between columns, declare column-gap.

For most browsers, the default for column-gap is 1em. You can declare a new value as long as it's greater than or equal to 0.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
}

Live Demo

See the Pen [5] CSS Columns, column-gap by Katy DeCorah (@katydecorah) on CodePen.

The browser will make necessary calculations to evenly space and balance the columns despite a larger gap.

The gif below demonstrates how the browser releases the columns and drops the gap when the browser width narrow.

column-gap drops when the browser width narrows

column-rule

To add a vertical line between each column, declare column-rule.

This property is the shorthand for column-rule-width, column-rule-style, column-rule-color. The shorthand follows the same styling pattern as border.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
  -webkit-column-rule: 1px dotted #ddd;
     -moz-column-rule: 1px dotted #ddd;
          column-rule: 1px dotted #ddd;
}

Live Demo

See the Pen [6] CSS Columns, column-rule by Katy DeCorah (@katydecorah) on CodePen.

Like column-gap, the vertical line will exit once the browser width is too narrow as demonstrated in the gif below.

column-rule drops as browser width narrows

column-span

To break the column flow temporarily, declare column-span on a child element. Currently, Firefox does not support this feature (but you can go vote for it on Bugzilla).

The image below contains a heading that indicates the start of a new chapter in the story, but it continues with column flow.

columns without a spanning element

To break the heading out of the column flow, add column-span: all to the element. This declaration will temporarily stop the column flow to allow the element to span the columns, but will restart the columns with the next element.

h3 { 
  -webkit-column-span: all; 
          column-span: all; 
}

Live Demo

See the Pen [7] CSS Columns, column-span by Katy DeCorah (@katydecorah) on CodePen.

column-fill

To change how the content fills the columns, declare column-fill. Currently, this property is only available in Firefox.

When height is added to a columned element, Firefox behaves differently than the other browsers. Firefox will automatically balance the content, while the other browser will fill the columns sequentially.

The image below demonstrates how Firefox behaves compared to the other browsers when height is added to a columned element.

difference between auto and balance

In Firefox, you can change this behavior by declaring column-fill: auto. This rule will make the columns fill sequentially, as shown in the live demo below.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -moz-column-fill: auto;
       column-fill: auto;
  height: 350px;
}

Live Demo

See the Pen [8] CSS Columns, column-fill by Katy DeCorah (@katydecorah) on CodePen.

Since a height must be declared for Firefox to enable column-fill, the height constraint breaks the fluid pattern. The content expands horizontally because it cannot flow vertically as demonstrated in the gif below. In this case, a media query could be added to manage the height (more on that later).

height restriction on column-fill

The other browsers don't support column-fill and will fill columns sequentially when a height is declared on a columned element. It's worth noting that when height is added to any columned element, regardless of browser or use of column-fill, the constraint will break the fluid pattern.

Limitations

Columns can be an elegant way to deliver content, so long as the content remains readable. A multi-column layout can become difficult to read when the content overflows horizontally or the columns become taller than the viewport.

Content overflows horizontally

As shown in the column-fill section, if height is added to a columned element, then the element will expand horizontally to fit the content. The overflow will break the layout and send users in a different direction.

Possible Solution: create a min-width media query to declare the height rule.

In the demo below, I narrowed the browser window to find when the columns began to overflow and wrote down that number. Next, I wrote a min-width media query using the value of when the columns overflow and moved the height rule to the media query.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -moz-column-fill: auto;
       column-fill: auto;
}
@media (min-width: 500px) {
  article {
    height: 350px;
  }
}

Live Demo

See the Pen [11] CSS Columns, column-fill height by Katy DeCorah (@katydecorah) on CodePen.

As demonstrated in the gif below, when the columns release the height rule is out of bounds and the columns flow vertically.

height on min-width

Columns become taller than the viewport

If your column height extends beyond the viewport then users will need to scroll to follow the column flow.

Possible Solution: create a min-height media query to activate the columns.

In the example below, the columns will only activate if the columned element has a min-height: 400px;. I came to this number by shrinking the browser width to the point just before the columns release. Next, I adjusted the height of the browser to find where the columns began to fall under the viewport. I used that number for the value of the min-height media query.

@media (min-height: 400px) {
  article {
    -webkit-columns: 2 350px;
       -moz-columns: 2 350px;
            columns: 2 350px;
  }
}

Live Demo

See the Pen [10] CSS Columns, vertical friendly by Katy DeCorah (@katydecorah) on CodePen.

The gif below demonstrates that the columned element must be at least 400px tall to display the content in columns.

column on min-height only

Support

CSS columns have decent support (IE10+) and still require prefixes on all properties. Find out more details about the multi-column properties on Can I Use....

Even if your favorite browser doesn't support multi-column layouts, keep in mind that they degrade gracefully into a single column layout. CSS columns are like the escalators of content delivery (as so eloquently put by Mitch Hedberg):

mitch hedberg

A multi-column layout cannot break, it can only become a single column layout.

Tower 2.0 is Here – To Make Git Easy!

Most people wouldn't call version control their hobby. But in the last few years, people have also become aware of how valuable it is. Nowadays, you won't find a top programmer, web developer, or web designer who doesn't use version control. In part because it helps you produce better results and makes collaboration easy. But also because it can save your life when things go wrong.

When we started out creating Tower in 2010, we had a goal clearly in mind: make Git, the best version control available, easier to use. Since then we've made this true for over 35,000 customers in companies like Apple, Google, Amazon, and Ebay.

(more…)

Responsive Images: Use Cases and Documented Code Snippets to Get You Started

Andreas Bovens put together this epic recipe list for <picture> / <img srcset>. There are four scenarios:

  • Do my image sizes change depending on my responsive design rules?
  • Do I want to optimize for high-dpi screens?
  • Do I want to serve images with different mime types to browsers that support them?
  • Do I want to serve different art depending on certain contextual factors?

Then Andreas shares what the code would look like for all of those plus any combination of them.

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag