CSS Shapes 101

CSS-Tricks

CSS Shapes 101

A how-to with a bunch of classy examples by Sara Soueidan.

Direct Link to Article — Permalink

---

CSS Shapes 101 is a post from CSS-Tricks

more info...

Dealing with Content Images in Email

CSS-Tricks

Dealing with Content Images in Email

Let's say you're using an RSS-to-Email service. They're pretty useful. Plenty of people like subscribing to content via email. You have a CMS that generates RSS from the content you create. An RSS-to-Email service can watch for new entries, format those new entries into an email, and send them out to a list of subscribers. MailChimp and Campaign Monitor both offer this service and I'm sure they aren't the only ones.

But how do you handle images within those email-generating entries? It can be a little tricky actually, because the HTML for images that works on the website might not be so great in email.

Here's an example. You write a blog post, and the content of that blog post spits out like this:

<p>Blah blah blah. Blog post about ponies. Here's a cool and hip pony:</p>

<img src="http://cdn.ponies.what/pony.jpg" width="1200" height="800">

<p>Isn't that the best pony of all?</p>

Notice the width and height attributes. That's not entirely uncommon. WordPress automatically adds them by default if you use the Media Uploader thingy.

Even if you remove them, that pony.jpg file is still 1200x800px big, and will render that way. That's no big deal, layout-wise, on the web, because we have CSS there. We can do the classic

article img {
  max-width: 100%;
  height: auto;
}

to ensure the image doesn't break the bounds of the container it is in, or stretch it wider than appropriate. The fact that the image is that size is reasonable. That would be a @2x version of a content image in a 600px wide column, which is what is needed sometimes to make a raster image look nice and sharp.

We might even employ a responsive images technique, utilizing both JavaScript and CSS. Also a smart and reasonable thing you might want to do.

But we don't have either CSS or JavaScript available to us in emails. So that 1200x800px image is going to render at 1200x800px in an email layout. That's bad. Even on desktop, that's obnoxiously wide and hurts the ability to comfortably read the email as it can cause horizontal scrolling.

I used to use FeedBurner to provide email subscriptions on this site, and this is the kind of thing people would get.

Horizontally scrolling emails. My favorite.

It's not a problem isolated to FeedBurner. I switched to MailChimp for this service more recently. It's not their "fault", but huge images break their email layouts as well. Here's a classic example where you click "Display images below" in Gmail to reveal images and by doing so you kinda break the layout:

So we're going to need to fix this at the HTML level.

Altering the HTML

We're going to need to:

1. If the <img> has width/height attributes, remove them


2. Add a new width attribute with a friendly value

So these:

<img src="image.jpg" width="1200" height="800">

<img src="image.png" alt="image">

Become:

<img src="image.jpg" width="320">

<img src="image.png" width="320" alt="image">

Simple enough of a plan, but how do you actually do it?

One way is to put Email-friendly with attributes on the <img> in the content to begin with, and allow the image to be bigger with CSS on your site if needed.

Another way is to create a special feed that parses the content and alters the attributes on the <img>s as needed. I'm a fan of this way, because then it gives you a place to make other special alterations intended for email-only.

Solving in WordPress

Russell Heimlich helped me with this in this forum thread. Thanks Russell!

You'll need a create a new RSS feed in WordPress just for this. Fortunately WordPress makes this easy with add_feed(). For your functions.php file, or a custom plugin:

function css_tricks_custom_feeds() {
  add_feed('email', 'get_me_the_email_feed_template');
}
add_action('init', 'css_tricks_custom_feeds');

The email string creates a new feed with the slug email, so there is now a new feed URL at:

http://css-tricks.com/feed/email/

The get_me_the_email_feed_template string references a callback function:

function get_me_the_email_feed_template() {
  add_filter('the_content_feed', 'css_tricks_super_awesome_feed_image_magic');
  include(ABSPATH . '/wp-includes/feed-rss2.php' );
}

Which references a filter function. This filter function does the magic of altering the HTML in a post.

function css_tricks_super_awesome_feed_image_magic($content) {
  // Weirdness we need to add to strip the doctype with later.
  $content = '<div>' . $content . '</div>';
  $doc = new DOMDocument();
  $doc->LoadHTML($content);
  $images = $doc->getElementsByTagName('img');
  foreach ($images as $image) {
    $image->removeAttribute('height');
    $image->setAttribute('width', '320');
  }
  // Strip weird DOCTYPE that DOMDocument() adds in
  $content = substr($doc->saveXML($doc->getElementsByTagName('div')->item(0)), 5, -6);
  return $content;
}

This really did feel magical to me. I had no idea PHP had the native ability to query a chunk of HTML like it was the DOM and adjust attributes and stuff, like JavaScript can. But it does. Shows what I know.

Note that if the image you are inserting into the RSS entry is via something like the_post_thumbnail (the "featured image") feature in WordPress, you're already doing something special to get that into the feed, so you'd use the_post_thumbnail('medium'); instead of the_post_thumbnail('large'); or whatever.

Use the new feed

Now that this new feed exists, you can point the RSS-to-email service at it. For CSS-Tricks, I'm using MailChimp and it slurps in that feed:

MailChimp also does it's best, via media queries in the email, to make the template small screen friendly:

And it works!

I should say, it works in mobile email clients that support media queries. Which does not support GMail apps on iOS or Android, which is unfortunate.

Mobile first?

Given how often email is read on small screen devices, it's tempting to make the email template a good width for small screens, and only stretch it for large screens. If you go with a wide fixed width, even if you adjust with a media query, non supporting browsers will have a bad time:

I spoke a bit with Fabio Carneiro, the master of emails for MailChimp, who has some ideas about mobile-first emails that will work with apps that don't support media queries.

I'll update this when we can get that going. I'd also like to try setting width="100%" on images so that they just fit the container rather than the width="320" thing I'm doing now. I was just kinda afraid the 100% would still stretch the container where 320 for sure won't. Needs more testing.

I've had some luck with a <table> based design where there is no fixed width, but only max and min...

<!-- main content-wrapping table -->
<table style="min-width: 320px; max-width: 600px;">

</table>

But I can't 100% vouch for that yet.

---

Dealing with Content Images in Email is a post from CSS-Tricks

more info...

Incomplete List of Mistakes in the Design of CSS

CSS-Tricks

Incomplete List of Mistakes in the Design of CSS

Interesting to see what the CSS sausagemakers consider failures of CSS.

I think the box-sizing choice has probably caused the most confusion and extra code over the years. Thankfully it's fixable.

Direct Link to Article — Permalink

---

Incomplete List of Mistakes in the Design of CSS is a post from CSS-Tricks

more info...

Inline SVG vs Icon Fonts [CAGEMATCH]

CSS-Tricks

Inline SVG vs Icon Fonts [CAGEMATCH]

If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are using inline SVG and using icon fonts.

Let's compare.

Icons are Vector

There are big advantages to vector icons: resizable up and down without losing quality, extra sharp on retina displays, and small file size among them.

Icon Font	Inline SVG
Browsers consider it text, so the icons are anti-aliased as such. Can lead to icons not being as sharp as you might expect.	Straight up vector

In a recent personal example, while converting some icons from fonts to SVG on CodePen, some of the font icons were noticeably less sharp than the ones I converted over.

CSS Control

Icon Font	Inline SVG
You can control the size (via font-size), color, shadows, rotation, etc. via CSS.	You have all the same CSS control as with a font, but better, because you can 1) control individual parts of a multi-part icon and 2) use SVG-specific CSS like stroke properties.

The big win for inline SVG here is probably multi-color icons.

Positioning

Icon Font	Inline SVG
It can be frustrating to position a font icon. The icons are inserted via pseudo element, and it depends on line-height, vertical-align, letter-spacing, word-spacing, how the font glyph is designed (does it naturally have space around it? does it have kerning information?). Then the pseudo elements display type affects if those properties have an effect or not.	SVG just is the size that it is.

See how the pseudo element box isn't quite where the glyph actually is.

The SVG box is the size of the SVG.

Weird Failures

Icon Font

Inline SVG

An icon font might fail because 1) it's being loaded cross-domain without the proper CORS headers and Firefox doesn't like that 2) for any reason, the font file fails to load (network hiccup, server failure, etc) 3) There is some weird Chrome bug that dumps the @font-face and shows a fallback font instead 4) Surprising browser doesn't support @font-face. Font failures are pretty common for a variety of reasons.

Inline SVG is right in the document. If the browser supports it, it displays it.

Semantics

Icon Font	Inline SVG
To use responsibly, you're injecting the icon via a pseudo element on an (empty) <span>. Either bad or no semantics, depending on how you feel about that kind of thing.	Icons are little images. The semantics of <svg> says "I'm an image." Seems better to me.

Accessibility

Icon Font	Inline SVG
You have to be quite careful with icon fonts to make sure you do it in an accessible way. You should basically do everything in this article. You're always fighting to make sure that the icon itself isn't read (but something else is) and that hard-to-detect fail states are handled.	I'm no expert, but research suggests using the proper combination of elements and attributes (<title>, <desc>, and aria-labelledby) you can convey good information across the browser specturm. Plus no weird fail states.

Ease of Use

Icon Font	Inline SVG
Using a pre-created icon font was never particularly responsible (too many unused icons). Creating your own icon font was never overly comfortable. I think the best were Pictos Server (limited to Pictos icons) and IcoMoon (free login to save projects). Fontello has an API I didn't see it used to make a good build tool.	The inline SVG system is easier because you can do it all by hand if needed. Or use a tool like IcoMoon (exports either way). Or use a build tool.

Browser Support

Icon Font	Inline SVG
Very deep. Even IE 6.	Decent, but problems are IE 8- and Android 2.3-. Fallbacks doable but not wonderful.

Winner

It all comes down to browser support. If you can go IE 9+ / Android 3+, inline SVG is better at pretty much everything than icon fonts. If you need the deeper browser support, I feel like an inline SVG fallback would be too big of a pain to be worth it (maintaining a PNG copy, inserting an additional element to display PNG version, hiding SVG element... it's weighty).

---

Inline SVG vs Icon Fonts [CAGEMATCH] is a post from CSS-Tricks

more info...

Picturefill 2

CSS-Tricks

Picturefill 2

This is important because:

1. Picturefill was a great solution already, and this brings it into the future encouraging the use of the future proper syntax.


2. You not only can use <picture> but <img srcset> too, which is a close cousin and useful when swapping sources with media queries alone would suck.

Direct Link to Article — Permalink

---

Picturefill 2 is a post from CSS-Tricks

more info...

Handling z-index

CSS-Tricks

Handling z-index

Managing z-index across large sites can be a pain in the butt. CSS is hard to test, so it's notoriously easy to make a change that ends up, for instance, hiding some important UI under who-knows-where.

If you use a CSS preprocessor, maybe we can handle it in a special way.

An Idea From Game Programming

Vertical stacking order is not only a problem for web design, it's a major issue for game developers too. They work in even more dynamic environments where it is vitally important which things appear on top of others.

That "A" better appear on top of the modal, which needs to appear above any characters, which need to appear above the background layer...

In a brief conversation with Ryan Campbell, who is digging into the world of games, he says the way it's normally handled is a enum (kind of like a named array of constants) variable which then you reference as needed.

Here's an example of some code he might use:

typedef enum : uint8_t {
  WorldLayerGround             = 100,
  WorldLayerBelowCharacter     = 200,
  WorldLayerAboveCharacter     = 400,
  WorldLayerTop                = 800,
  WorldLayerCount              = 1600
} WorldLayer;

That is defined in a file dedicated to declaring constants for the game to use. Notice how:

1. They are all declared together


2. There is space left between the numbers

It's fairly common to see people number in the hundreds with z-index in web design too. The idea being that you could slip something in between later if need be, which you couldn't if you did 1, 2, 3, etc, because z-index doesn't support decimals. But rarely do you see z-index declared in a group like that. Seems like a smart idea to me!

Grouping

The idea is that all the code that controls vertical stacking is in one place. You could just put all that stuff together.

.modal {
  z-index: 9000;
}
.overlay {
  z-index: 8000;
}
.header {
  z-index: 7000;
}

But I'm not a huge fan of that. I don't like duplicating selectors throughout stylesheets just for organization. Just a personal preference. When I find where a class is defined, everything that that class does is there.

Perhaps we can do the same thing but just with the values...

A stock photography metaphor!

A z-index Partial

Perhaps the single most useful feature of preprocessors is the ability to do includes. Smush multiple files together into one output file. That means you can organize your CSS however makes sense to you, which almost surely means breaking down into small, modular bits.

Maybe you already have a variables.styl or constants.less or something. You could get even more modular and have a file just for managing z-index. In SCSS, the typical naming convention for files only meant to be included start with an underscore, so we'd make a _zindex.scss.

In that file, you'd declare variables that contain all the z-index values you use throughout the site.

$zindexModal   : 9000;
$zindexOverlay : 8000;
$zindexHeader  : 7000;

Then in your global set of includes for other SCSS files, you always have this available:

@import "zindex";

And use them as needed:

.header {
   z-index: $zindexHeader;
}

The idea would be go absolutely whole-hog on this. Do not declare z-index anywhere without making a variable for it and placing it within the stack in the _zindex.scss file.

Maps might be cleaner

Same idea, but using a Sass map instead of individual global variables:

$zindex: (
  modal     : 9000, 
  overlay   : 8000,
  dropdown  : 7000,
  header    : 6000,
  footer    : 5000
);

.header {
  z-index: map-get($zindex, header);
}

---

I think I'll be converting sites over to this system. I don't see any downside and plenty of upsides.

---

Handling z-index is a post from CSS-Tricks

more info...

Improve the payment experience with animations

CSS-Tricks

Improve the payment experience with animations

Nice stuff by Michaël Villar. Tasteful, subtle, informative animations is a trend I can be behind.

Reminds me of the nice stuff Val Head has been teaching, Hakim El Hattab's experiments, Codrops examples, Pasquale D’Silva's thinking, Effeckt.css...

Direct Link to Article — Permalink

---

Improve the payment experience with animations is a post from CSS-Tricks

more info...

12 Little-Known CSS Facts

CSS-Tricks

12 Little-Known CSS Facts

Sometimes these types of articles are cheezy and filled with fairly obvious stuff, but not when Louis Lazaris does them. All of these are pretty non-obvious.

Direct Link to Article — Permalink

---

12 Little-Known CSS Facts is a post from CSS-Tricks

more info...

Animating SVG with CSS

CSS-Tricks

Animating SVG with CSS

There isn't just one way to animate SVG. There is the <animate> tag that goes right into the SVG code. There are libraries that help with it like Snap.svg or SVG.js. We're going to look at another way: using inline SVG (SVG code right inside HTML) and animating the parts right through CSS.

I played with this personally recently as my Alma mater Wufoo was looking to freshen up the advertising graphic we're running here. My latest design around here uses SVG quite a bit and I thought this would be another perfect opportunity to use it some more.

The finished product is pretty simple. Here's it is:

See the Pen Wufoo SVG Ad by Chris Coyier (@chriscoyier) on CodePen.

Let's check out how it's done.

1. Design the Ad / Have a Plan

This might seem like an how to draw an owl moment, but this article is about animation so let's get there as quickly we can.

My plan for this ad was to make a super simple Wufoo ad with their classic logo, colors, and general branding. Then add a little flair.

1. Make the letters kind hop off the page a little. Wufoo is a fun word, let the letters have some fun.


2. Back in the day we made a T-Shirt with dinosaurs on the front and on the back it said "Fast. Smart. Formidable." Which are traits of both dinosaurs and Wufoo, not to mention the fun little play on words with FORMidble. Let's make those fade in and out.


3. To make the connection with the dinosaur thing complete, we'll have a T-Rex head pop up from the bottom curiously, then zoom away. The word "Fast." will come in as he zooms away which is another nice little connection.

I put all the parts together in Illustrator.

Notice how the logo and tagline text are outlines. That means they are just vector shapes and will render just perfectly as-is in the SVG, as <path>s. The text you see there "Fast." is left as text in Illustrator.

When I save this out from Illustrator, that will be left as a <text> element.

2. Save as SVG

Illustrator can save this directly as SVG:

You can open that SVG file in a code editor and see the SVG code:

4. Clean Up the SVG, Give Shapes Classes

You might wanna run it through SVGO to optimize it and remove the DOCTYPE and stuff. But more importantly for this post, you'll want to give the the different shapes class names, that way we can select them in CSS and do stuff!

<svg version="1.1" id="wufoo-ad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">

  <!-- background -->
  <rect class="wufoo-background" fill="#D03E27" width="400" height="400" />

  <!-- logo letters -->
  <path class="wufoo-letter" fill="#F4F4F4" d="M60.858,129...." />
  <path class="wufoo-letter" fill="#F4F4F4" d="..." />
     <!-- etc -->

  <!-- dinosaur -->
  <g class="trex">
     <path ... />
     <path ... />
  </g>

</svg>

3. Insert the SVG

You can copy-and-paste that SVG right into the HTML where you want the ad. But that'll just slop up the template probably. In all likelihood you'll just do something like:

<aside class="sidebar">
  
   <div class="module module-ad">
      
       <?php include("ads/wufoo.svg"); ?>

   </div>

   ...

4. Animate!

Now we have these shapes in the DOM that we can target and style like any other HTML element, let's do that.

Let's say we want to do this as a 10 second timeline.

Words Fade In/Out First

The first thing we want to happen is the Fast. Smart. Formidable. thing. Each word will show for one second. So we'll make an animation where the word shows for 10% of the time:

@keyframes hideshow {
  0% { opacity: 1; }
  10% { opacity: 1; }
  15% { opacity: 0; }
  100% { opacity: 0; }
} 

Then target that first word and have the animation last for 10 seconds (10% of that is 1 second):

.text-1 {
  animation: hideshow 10s ease infinite;
}

The next two letters will start out hidden (opacity: 0;) and then use the exact same animation, only delayed to start a bit later:

.text-2 {
  opacity: 0;
  animation: hideshow 10s 1.5s ease infinite;
}
.text-3 {
  opacity: 0;
  animation: hideshow 10s 3s ease infinite;
}

The extra 0.5s on each is to accommodate the fading out time period of the word before it.

Letter Pops

As soon as those letters are done animating, we'll have the letters in WUFOO do their jiggle jump thing, like this:

The trick here is that we'll make the animation only 5 seconds long, but run it once forwards and once backwards. That way it matches our 10 second timeline, is placed right in the middle where we want it, and we only need to scale in one direction, because when it reverses it will scale back.

Each letter has a slight bit of delay so they happen off-kilter a bit:

.wufoo-letter {
  animation: kaboom 5s ease alternate infinite;
  &:nth-child(2) {
    animation-delay: 0.1s;
  }
  &:nth-child(3) {
    animation-delay: 0.2s;
  }
  &:nth-child(4) {
    animation-delay: 0.3s;
  }
  &:nth-child(5) {
    animation-delay: 0.4s;
  }
}
@keyframes kaboom {
  90% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.1);
  }
}

The above is in SCSS just for brevity, and does not include any prefixing (as you would need in production).

I feel like animation-delay is a property that would benefit from native randomization in CSS. Would be neat to see the letters be randomly delayed just a bit each time.

Dinosaur Last

As soon as the words are done, the dinosaur will peak it's head up. Even though the dinosaur is made up of lots of <path>s, we can target them all together by targeting the <g> (group) tag that wraps them all.

Because using translate to animate position is better, we'll do that in the keyframes:

@keyframes popup {
  0% {
    transform: translateY(150px);
  }
  34% {
    transform: translateY(20px);
  }
  37% {
    transform: translateY(150px);
  }
  100% {
    transform: translateY(150px);
  }
}

We wanted this animation to "last" about 3 seconds. It actually runs in 10 second loops, but you'll only see it do stuff for 3 seconds. When the translateY(150px) is in effect, the dinosaur is moved so far below, you don't see anything. By 37% of that animation (around 3 seconds) you'll have seen it move slowly up, then quickly back down).

When we apply this animation, we'll make sure that

The dinosaur is hidden at first

The animation is delayed so it starts right after the words are done with their fade in/out dance.

.trex {
  transform: translateY(150px);
  animation: popup 10s 6.5s ease infinite;
}

The dinosaur pops down right at the last second, which is when the word "Fast." pops back onto the screen (because all the animations are set to infinite, which re-runs them forever). That's a bit of fun synergy there.

5. Making it a responsive / clickable ad

One of the beautiful things about SVG is that it's scaleable to any size without losing quality. To make an inline SVG like this scale while maintaining its aspect ratio, we can use the ol' padded box technique.

<div class="wufoo-ad-wrap">
  <svg class="wufoo-ad">
     ...
  </svg>
</div>

.wufoo-ad-wrap {
  height: 0;
  padding-top: 100%;
  position: relative;
}
.wufoo-ad {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

The idea here is that the "wrap" will always be a perfect square, relative to its width. Then we absolutely position the SVG within that perfect square, which will happily resize itself.

Since this is an ad (which of course should be clickable), rather than using a <div> for the wrap, you could use an <a href="">, just make sure you set that to be display: block;.

---

Final thing, for reference.

I think there is a future for this kind of thing in display advertising, particularly because of the CSS control and easy, sharp resizing.

---

Animating SVG with CSS is a post from CSS-Tricks

more info...

How to Deal with Merge Conflicts in Git

CSS-Tricks

How to Deal with Merge Conflicts in Git

The following is a guest post by by Tobias Günther. Tobias works for Tower, the Git client for Mac and authored the new (free) book Learn Version Control with Git - A step-by-step guide for the complete beginner. Tobias is going to share a bit of information about a very uncomfortable moment when using Git: the merge conflict.

Everybody has a list of things they don't like: an appointment at the dentist, a traffic jam, or a canceled flight. When I was preparing my book, I wasn't surprised that a lot of designers and developers would add merge conflicts to this list without hesitation.

When using Git for version control, there is nothing to fear. Once you understand how merge conflicts work and how to deal with them, I'm sure you'll be able to cross them off this list.

You Cannot Break Things

The first thing that you should keep in mind is that you can always undo a merge and go back to the state before the conflict occurred. You're always able to undo and start fresh.

If you're coming from another version control system (e.g. Subversion) you might be traumatized: conflicts in Subversion have the (rightful) reputation of being incredibly complex and nasty. One reason for this is that Git, simply stated, works completely different in this regard than Subversion. As a consequence, Git is able to take care of most things during a merge - leaving you with comparatively simple scenarios to solve.

Also, a conflict will only ever handicap yourself. It will not bring your complete team to a halt or cripple your central repository. This is because, in Git, conflicts can only occur on a your local machine - and not on the server.

How a Merge Conflict Occurs

In Git, "merging" is the act of integrating another branch into your current working branch. You're taking changes from another context (that's what a branch effectively is: a context) and combine them with your current working files. Have a look at this introduction to branching if you're new to the concept in general.

A great thing about having Git as your version control system is that it makes merging extremely easy: in most cases, Git will figure out how to integrate new changes.

However, there's a handful of situations where you might have to step in and tell Git what to do. Most commonly, this is when there are changes to the same file on both branches. Even in this case, Git will most likely be able to figure it out on its own. But if two people changed the same lines in that same file, or if one person decided to delete it while the other person decided to modify it, Git simply cannot know what is correct. Git will then mark the file as having a conflict - which you'll have to solve before you can continue your work.

How to Solve a Merge Conflict

When faced with a merge conflict, the first step is to understand what happened. Did one of your colleagues edit the same file on the same lines as you? Did they delete a file that you modified? Did you both add a file with the same name?

Git will tell you that you have "unmerged paths" (which is just another way of telling you that you have one or more conflicts) via "git status":

Conflict Markup

Let's take an in-depth look on how to solve the most common case: when two changes affected the same file on the same lines.

Now is the time to have a look at the contents of the conflicted file. Literally open it in your code editor. Git is nice enough to mark the problematic area in the file by enclosing it in "<<<<<<< HEAD" and ">>>>>>> [other/branch/name]".

The code from your current branch is on top, the code from the branch you are merging in is on the bottom.

The contents after the first marker originate from your current working branch. After the angle brackets, Git tells us where (from which branch) the changes came from. A line with "=======" separates the two conflicting changes.

Cleaning Up

Our job is now to clean up these lines: when we're done, the file should look exactly as we want it to look. It can be necessary to consult the teammate who wrote the conflicting changes to decide which code is finally correct. Maybe it's yours, maybe it's theirs, or maybe a mixture between the two.

Opening the raw file in your editor and cleaning it up there is perfectly valid, but not very comfortable. Using a dedicated merge tool can make this job a great deal easier. You can configure your tool of choice using the "git config" command. Consult your tool's documentation for detailed instructions. Note that just because you have git installed doesn't mean you have a dedicated merge tool installed, these are separate, optional software tools.

Then, in case of a conflict, you can later invoke it by simply typing "git mergetool".

For this example, I've used Kaleidoscope on Mac:

The left and right panes stand for the conflicting changes; a far more elegant visualization than <<<<<<<" and ">>>>>>>".

You can now simply toggle which change shall be taken. The middle pane shows the resulting code; in good tools, you can even edit this further.

Now, after cleaning up the file with the final code, all that's left is to save it. To give Git a hint that you're done with this file, you should quit the merge tool to continue. Behind the scenes, this told Git to execute a "git add" command on the (now formerly) conflicted file. This marks the conflict as solved. Should you decide not to use a merge tool and instead clean up the file in your editor, you'll have to mark the file as resolved by hand (by executing "git add <filename>").

Finally, after resolving all conflicts, a merge conflict situation needs to be concluded by a regular commit.

How to Undo a Merge

As already said, you can return to the state before you started the merge at any time. This should give you the confidence that you can't break anything. On the command line, a simple "git merge --abort" will do this for you.

In case you've made a mistake while resolving a conflict and realize this only after completing the merge, you can still easily undo it: just roll back to the commit before the merge happened with "git reset --hard <commit-hash>" and start over again.

Tools Can Make Things Easier

I've already mentioned it briefly: being equipped with good tools can make your life quite a bit easier. A proper merge tool will help you better understand a conflict scenario and make the right decision.

Have Confidence

With all the safety nets in place that Git provides, there's really no need to be afraid of merge conflicts in any way. Once understood how they work and what your options are, you should be ready to merge like there's no tomorrow. Always keep in mind: you can't break anything!

Note from the Editor

Tobias modestly left out Tower as an excellent tool to help with merge conflicts. In fact one of the reasons I personally use Tower is because I like how it helps with with merge conflicts.

It's very clear when you have a conflict:

And right-clicking on the conflicted file gives you some nice options:

So my process is usually:

1. Is it very obvious to me whether my changes to this file or the other branches changes to this file should "win"? If so, select the relevant "Resolve <file> Using Mine" or "Resolve <file> Using Theirs"


2. If I need a closer look, pop it open in a code editor and check it out. Then maybe still I can use one of those options.


3. If it's more complicated, manually fix it up and then choose "Mark <file> as Manually Resolved" from Tower.


4. Sometimes use a Merge Tool if there is a lot of complex fixes, which Tower also supports opening conflicts in via the "Open <file> in Merge Tool" option.

---

How to Deal with Merge Conflicts in Git is a post from CSS-Tricks

more info...

Features Are Complicated

CSS-Tricks

Features Are Complicated

Why can't I edit my tweets?! Twitter should allow that.

It's so simple right? CRUD apps (Create, Read, Update, and Delete) are app-building 101! What a gross oversight. But wait. Just as a fun nerdy little exercise, let's think about what a feature like this might take for the Twitter team. I don't work there or have any inside knowledge, so this is all hypothetical for the sake of understanding app development.

• Should you be able to edit any tweet you've ever tweeted at any time?


• Or should you just have a few minutes to do it until it locks?


• Do you offer this to everyone? Opt-in? Opt-out?


• Should you be able to edit tweets or direct messages also?


• What does it look like to edit a tweet? Can it be simple and obvious? Does it need additional UI? How do you expose that UI? Is it worth the extra UI?


• Does the tweet go out to the public timeline immediately or after the editing grace period?


• What if someone favorites a tweet and it is later edited? Does it shed the favorites? E.g. a tweet that originally said "I like pancakes!" could be later edited to "People that favorited this like clubbing seals!" (or much worse).


• Same question, with retweets. And with replies.


• Are there any social or moral implications of this?


• How does tweet editing affect the overall feel of using Twitter? Would a time delay affect that feel? Would people think of tweets differently?


• Does tweet editing make hacked accounts an even more dangerous prospect?


• How do third party clients handle tweet editing? Is there a public API for it? How complex is that?


• Or do you only offer tweet editing through the web? How does that move go over with developers?


• How do you ensure third party editing offers an up-to-par UX? Does that matter?


• If tweets aren't time-delayed, how do you handle edited tweets through the API? - How do you tell third-party clients to update a tweet they are currently displaying rather than show a new one?


• Where do edited tweets go? Back on top of the timeline, or stay where they are?


• Should it be visually displayed that a tweet has been edited? How do you enforce that in third-party apps?


• Are there legal implications here? What if someone tweets something illegal and then changes it to something legal?


• Does tweet editing open up any kind of bad guy behavior? What kind of mis-use can be expected?


• What are the infrastructural concerns? Are all revisions saved? How much additional web server and database load is this?


• Do you throttle editing like you presumably do for tweet creation?


• How actually requested is this feature? Is it just a vocal minority?


• What's in it for Twitter if they go down this path? Happier users? Is that a guarantee?


• How much time, effort, and money is this going to take? (Design, development, UX, testing, etc) Are they prepared to support this for the life of the product?


• Is the team into the idea or would it be grueling and not-fun?

We could probably double that list on our own and that's just looking from the outside. Software is tough. Being smart and responsible with the features of that software is even tougher.

---

Features Are Complicated is a post from CSS-Tricks

more info...

CSS-Tricks Chronicle XVII

CSS-Tricks

CSS-Tricks Chronicle XVII

I've had the pleasure of being on a couple of podcasts recently other than ShopTalk (where we most recently interviewed Julie Ann Horvath about, among other things, her GitHub exit).

I was on How to Hold a Pencil where Reuben Ingber and I chat about what it's like to be a beginner and where to go next.

I was on Pencil vs Pixel where Cesar Contreras and I talked about capturing ideas, motivation, and the future.

I was on the CDNify podcast as well.

---

Spring is breaking finally here in Wisconsin so it feels good to be back biking around town. I've been doing a good job at going to the gym and sticking with my training. We even trained outside today for the first time this year.

I'm just about to take off for a few weeks though. I'm headed down to Tampa, Florida to see some friends (I used to live there, back in the Wufoo days) and we're also getting together there as Team CodePen for an in-person sprint.

I leave from Florida and head up to North Carolina where I'm picking up a new camper trailer, the SylvanSport Go, which I'm pretty stoked about. It just so happens that MerleFest is going on at the same time so I'm going to meet some of my bluegrass buddies there for the weekend.

Then I need to high tail it back to Wisconsin because I have a flight down to Champaign, Illinois for the University of Illinois Web Conference where I get to keynote one of the days.

From there I fly to Columbia, South Carolina for ConvergeSE.

Then finally back home, where I only have a week before another big adventure. I'll save that for next time.

---

We've been hard at work at at CodePen. The new feature releases were a little slow for a while because we were buried in a huge one: Teams. It might seem like a simple thing, but it was anything but. We even talked about it a bit on the podcast.

Perhaps I haven't mentioned here? We're doing a new podcast over at CodePen, a kind of self-documentary of what it's like running a web software business. We call it CodePen Radio.

---

Taxes are another thing on my mind. They are due the 15th here in the US, and despite starting on them as early as I could, I'm cutting it down to the wire. It's crazy how late you can get needed documents to do it all properly. I think I'm just about done and it's a very painful year (mostly due to my own lack of planning in paying quarterlies). Gonna have to tighten the belt for a few months.

---

CSS-Tricks Chronicle XVII is a post from CSS-Tricks

more info...

The decline of the mobile web

CSS-Tricks

The decline of the mobile web

Chris Dixon:

Mobile is the future. What wins mobile, wins the Internet. Right now, apps are winning and the web is losing.

John Gruber:

We shouldn’t think of “the web” as only what renders in web browsers. We should think of the web as anything transmitted using HTTP and HTTPS. Apps and websites are peers, not competitors. They’re all just clients to the same services.

Perhaps it's not HTTP and back end web that is in danger, but it's the front end that's in danger.

For whatever reason I don't feel particularly worried for the web, even front end. It feels like a safe long-term bet.

Direct Link to Article — Permalink

---

The decline of the mobile web is a post from CSS-Tricks

more info...

Font Size Idea: px at the Root, rem for Components, em for Text Elements

CSS-Tricks

Font Size Idea: px at the Root, rem for Components, em for Text Elements

Me, for the last year or so: "rem's are so cool! I'm gonna size everything with them, that way I can adjust the font-size on the root element and everything will scale with it!" It was a nice dream. And it wasn't a disaster. That's what I'm doing right now here on CSS-Tricks and this is how it plays out in a very simple scenario:

That comes from essentially:

/* Document level adjustments */
html {
  font-size: 17px;
}
@media (max-width: 900px) {
  html { font-size: 15px; }
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}

/* Type will scale with document */
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.5rem;
}
h3 {
  font-size: 2rem;
}

I admit that I like that simplicity, but I'm starting to think it's a little too dreamy for all but the simplest of sites. The main issue: you just can't expect type that you set at one screen size to look just right by simply scaling it down entirely proportionally. Big type might get too big scaling up. Small type might get too small (a common one that gets me). Or even the reverse of either, where big type might not get small enough.

If any of those things happen, then you're making @media query specific adjustments which not only gets confusing but isn't very efficient (adjusting size just to adjust it again to fix it).

So here's my idea: you still keep px size adjustments at the document level so you can make easy/efficient sweeping size changes. But then each module on the page has a font-size set in rem. Actual text elements (h1, h2, p, li, whatever), if you size them at all, are sized in em, and thus become relative to the module.

This way you can adjust font-size at a module level, which is pretty easy. The chances the type within a single module have good proportions and can scale together nicely is high. So that would play out like this:

Not to scale. Just showing what units would go on what.

You can play around with the idea here by adjusting the sliders:

See the Pen Em AND Rem by Chris Coyier (@chriscoyier) on CodePen.

At a certain medium size, everything looks fine. Scaling up, you can get to a point where the main articles are a good big size, but the sidebar stuff doesn't need to be that big. With this system it would be easy to target them and notch them back down. Scaling down, those sidebar modules get a bit too small too fast, so you could notch them back up easily. There might even be sizes where you equalize things because you've gone single column (or the like).

This is how it would go down:

/* Document level adjustments */
html {
  font-size: 17px;
}
@media (max-width: 900px) {
  html { font-size: 15px; {
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}

/* Modules will scale with document */
.header {
  font-size: 1.5rem;
}
.footer {
  font-size: 0.75rem;
}
.sidebar {
  font-size: 0.85rem;
}

/* Type will scale with modules */
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.5em;
}
h3 {
  font-size: 2em;
}

I put "idea" in the title because I haven't actually built a site doing this yet, but it makes sense to me and I'd surely try it.

---

Font Size Idea: px at the Root, rem for Components, em for Text Elements is a post from CSS-Tricks

more info...

Frosting Glass with CSS Filters

CSS-Tricks

Frosting Glass with CSS Filters

The following is a guest post by Bear Travis, a Web Standards Engineer at Adobe. I'm a fan of how Adobe is pushing the web forward with new design capabilities, and doing it in a responsible way. CSS filters is a good example. They knew they were desired because Photoshop paved the way. They brought them to the web with a sensible syntax and they helped with both the spec and browser implementation. Now we're seeing them in stable browsers, and they are advocating use through responsible progressive enhancement. Hallelujah. Here's Bear with a tutorial about just that.

While filters such as contrast, saturate, and blur have existed in image editors for some time, delivering them on the web has historically required serving images with those filters already applied. As browsers begin to incorporate filters as part of the web platform, we can begin breaking down complex visual effects into their component parts, and implementing them on the web. This article will examine one such effect, frosted glass, and how CSS filters provide a cleaner, more flexible solution than static images.

Old School: Frosted Glass with Images

The frosted glass effect has been kicking around the internet for a while; we even saw it here on CSS-Tricks back in 2008. The idea behind the effect is relatively simple: just blur and lighten the area behind overlaid content. The content gains higher contrast with its background, but you still maintain a rough idea of what's going on behind it. The CSS-Tricks article uses two images: a standard version and a frosted version (blurred with a white tint). In our example, a card slides up to reveal content, while frosting over the background.

Demo

See the Pen Frosted Glass Effect Using Multiple Images by Adobe Web Platform (@adobe) on CodePen.

The HTML

The markup is relatively simple. We only have a single article that contains content.

<article class="glass down">
  <h1>Pelican</h1>
  <p>additional content...</p>
</article>

The CSS

We first size everything to the viewport. Then, we overlay a blurred version of the background on top of the original background. Finally, we add a white tint. The overflow is hidden to prevent scrolling and to clip the effect to the .glass element.

html, body, .glass {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    background-image: url('pelican.jpg');
    background-size: cover;
}
.glass::before {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('pelican-blurry.jpg');
    background-size: cover;
    content: ' ';
    opacity: 0.4;
}
.glass {
    background-color: white;
}

The above CSS will create our blurred and lightened overlay. We also need to shift the overlay down to the bottom of the page, leaving just enough space to view the header text. Since the blurred image is a child of the overlay, we also need to shift it back up by the opposite amount in order to keep it aligned with the body background. Because the demo uses transitions, I chose to use CSS transforms rather than the background-attachment property, as CSS transforms can be hardware accelerated.

.glass.down {
    transform: translateY(100%) translateY(-7rem);
}
.glass.down::before {
    transform: translateY(-100%) translateY(7rem);
}
.glass.up, .glass.up::before {
    transform: translateY(0);
}

Notes

If you'd like a further breakdown, I built a deconstructed version of the effect.

The above technique is straightforward, and has solid browser support. Although I spruced up the demo a bit with transitions, the other required features – generated content, opacity, transforms and background-size – all have solid browser support ranging back to IE 9 (with the exception of Opera Mini).

New School: Frosted Glass with Filters

The duplicate image technique requires maintaining a blurred image along with the original, which can become a pain if you need to reuse the effect for multiple images. For example, responsive designs may require swapping in different images at different screen sizes. Or, template layouts may drop in images dynamically (eg, a different header image for every blog post). For these cases, it would be nice to generate the effect using only the source image. After all, we're just blurring it.

This is where CSS Filters come in handy. They allow us to apply the blur in the browser, using the CSS filter property.

The CSS

We can adjust the CSS for the frosted glass overlay to be the original image with a blur filter applied.

.glass::before {
    background-image: url('pelican-blurry.jpg');
}

.glass::before {
    background-image: url('pelican.jpg');
    filter: blur(5px);
}

Demo

See the Pen Frosted Glass Effect Using Filter Effects by Adobe Web Platform (@adobe) on CodePen.

Caveats

Easy peasy, right? Unfortunately, CSS Filters are somewhat new. That means they may be vendor prefixed, and that their browser support is not yet universal. However, filters have a longer history in SVG, and applying SVG filters to HTML content via CSS has wider browser support. You can easily add them as a fallback for when CSS filters are not supported. The above demo actually does just that.

To add an SVG filter, we include some inline SVG in our HTML markup, and reference the filter with a url(). Pro tip: An alternative is to encode the SVG filter and reference as a data url, but that format is a bit more difficult to read in an article.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>
</svg>

.glass::before {
    background-image: url('pelican.jpg');
    /* Fallback to SVG filters */
    filter: url('#blur');
    filter: blur(5px);
}

There will still be cases where neither CSS nor SVG Filters are supported by a browser. In that case, the user will see text on a lightened (tinted but unblurred) background, which isn't too shabby.

Conclusion

Filters allow us to use effects in the browser that were previously only available in image editors. As an element's style, rather than a rendered image, they are easier to alter and reuse. You can use CSS Filters in current versions of Chrome, Safari, and Opera, and they are under active development in Firefox (no word yet on Internet Explorer). With a little care towards fallback behavior, you can start using them today.

---

Frosting Glass with CSS Filters is a post from CSS-Tricks

more info...

Stripes in CSS

CSS-Tricks

Stripes in CSS

Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd document some variations in one easy to reference place.

Normal Colored Diagonal Stripes

Diagonal stripes are easy to pull off thanks to repeating-linear-gradient():

background: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 10px,
  #465298 10px,
  #465298 20px
);

Rather than the very last color-stop being 100% (or nothing, which means 100%) it's a fixed value. Beyond that, it just kinda starts over. This is how I think of it (zoomed in):

See the Pen epfEc by Chris Coyier (@chriscoyier) on CodePen.

Gradient Diagonal Stripes

If you make the background a regular linear-gradient(), and then make half the stripes totally transparent using repeating-linear-gradient(), it can appear as if the stripes have gradients. Because of multiple backgrounds (and stacking order), you can do that all together on a single element:

background: 
  /* On "top" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #ccc 10px,
    #ccc 20px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #eee,
    #999
  );

See the Pen xhkpD by Chris Coyier (@chriscoyier) on CodePen.

Stripes Over Image

Perhaps a texture? Any image will work. You could reveal part of the image by making some stripes fully transparent and some fully opaque. Or, any combination. Again multiple backgrounds allows this to all happen on the same element.

background: repeating-linear-gradient(
  45deg,
  rgba(0, 0, 0, 0.2),
  rgba(0, 0, 0, 0.2) 10px,
  rgba(0, 0, 0, 0.3) 10px,
  rgba(0, 0, 0, 0.3) 20px
),
url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/old_map_@2X.png);

See the Pen gaKyv by Chris Coyier (@chriscoyier) on CodePen.

Any Direction, Any Angle

It doesn't have to be exactly 45degrees. That's part of the beauty of the repeating-linear-gradient(). It's not like this perfect rectangle that has to line up and repeat, it's just a set of drawing instructions that repeats.

background: repeating-linear-gradient(
  -55deg,
  #222,
  #222 10px,
  #333 10px,
  #333 20px
);

See the Pen qfHmw by Chris Coyier (@chriscoyier) on CodePen.

Straight Stripes (slightly better browser support)

There is a super old syntax for CSS gradients that used -webkit-gradient() (note the no "linear" or "radial"). Basically: Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0. Old stuff. Those browsers don't support repeating gradients. But you could kinda fake it, especially for straight stripes, by making a small rectangle of background via background-size, drawing the stripes in there, and having it repeat naturally like background-image does.

background: linear-gradient(
  to bottom,
  #5d9634,
  #5d9634 50%,
  #538c2b 50%,
  #538c2b
);
/* The rectangle in which to repeat. 
   It can be fully wide in this case */
background-size: 100% 20px;

See the Pen uxJrf by Chris Coyier (@chriscoyier) on CodePen.

If you wanted to get crazy, you could transform: rotate() some element with these straight stripes and cut off the overflow, in which to replicate diagonal stripes with deeper browser support. Sounds like a lot of work.

Vertical Stripes

You could use the same method as above for vertical stripes too. Or, just use repeating-linear-gradient():

background: repeating-linear-gradient(
  to right,
  #f6ba52,
  #f6ba52 10px,
  #ffd180 10px,
  #ffd180 20px
);

See the Pen oCpEu by Chris Coyier (@chriscoyier) on CodePen.

Just to be clear, with repeating-linear-gradient() you are best off doing a -webkit-repeating-linear-gradient() as well as the unprefixed one, if you're, you know, prefixing buy yourself which you shouldn't.

Radial Stripes

Who says they have to be straight lines eh? Radial gradients can be repeating-linear-gradients():

/* Note the RADIAL */
background: repeating-radial-gradient(
  circle,
  purple,
  purple 10px,
  #4b026f 10px, 
  #4b026f 20px
);

See the Pen AEymd by Chris Coyier (@chriscoyier) on CodePen.

Funky Town

Sometimes rounding errors (maybe?) or other kinda rendering funkiness happens.

Whattyagonnado. I suspect it will get better over time.

All together now.

---

Stripes in CSS is a post from CSS-Tricks

more info...

ShopTalk Special: One on One With a Hacker

CSS-Tricks

ShopTalk Special: One on One With a Hacker

This is worth linking up directly from here, as it's this very site the hacker was targeting. And then later, me.

Direct Link to Article — Permalink

---

ShopTalk Special: One on One With a Hacker is a post from CSS-Tricks

more info...

Hassle Free Responsive Images for WordPress

CSS-Tricks

Hassle Free Responsive Images for WordPress

The following post is guest co-authored by Tim Evko (@tevkor). WordPress has a built-in media uploading system. When you upload an image, it automatically creates and saves different versions of it. Tim will show us how we can customize and exploit that ability to help us with responsive images in content.

If you're like me, and you're tasked with building responsive website that's relatively easy to update, WordPress is most often the CMS you will be building that website on. If you're more like me, you probably skipped over a responsive image solution in favor of making things easier for whomever will be doing the updating. Fortunately, with a few lines of PHP and some JavaScript, you can now add automatic responsive image functionality to your WordPress site.

Here I'll show you how to add support for responsive images to your WordPress site in the form of a small WordPress plugin.

The Markup we ultimately want

We'll be using the Picturefill library here. For now, we'll use the markup that library suggests, which closely mimics what the <picture> element will soon be.

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
  <span data-src="small.jpg"></span>
  <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
  <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
  <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>

  <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
  <noscript>
    <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
  </noscript>
</span>

Eventually we can update all this to use the <picture> syntax once Picturefill is ready for it.

What we're not going to do is use that markup directly in blog posts, we're going to get WordPress to help us with that.

The Theme

All you need to do in your theme is make sure this one-liner is present in its functions.php file:

add_theme_support('post-thumbnails');

This will ensure that your theme gives WordPress permission to resize the uploaded images. Without it, the plugin won't work.

The Plugin

This makes sense to do as a WordPress plugin, because we'll want to keep it active no matter what theme is active. We can make it a folder with a PHP file in there to be the plugin code itself, and a copy of the Picturefill library:

Adding the library

Queue it up responsibility:

function get_picturefill() {
  wp_enqueue_script('picturefill', plugins_url( '/js/picturefill.js', __FILE__ ));
}
add_action('init', 'get_picturefill');

That will ensure WordPress loads up this JavaScript library on the front end.

Define sizes

Tell WordPress what size images you want created upon uploading:

add_image_size('large-img', 1000, 702);
add_image_size('medium-img', 700, 372);
add_image_size('small-img', 300, 200);

You can set this up however you like. add_image_size has a variety of parameters you can adjust. In the case of a 1024x768 bunny rabbit JPG I uploaded, a bunch of versions get created:

The 936x702 one was created because we specified we wanted one with a max of 702 height. The 150x150 one was created because WordPress automatically makes a square thumb of that size.

Making a [shortcode]

Let's extend this plugin, giving it some real functionality, by making a responsive images shortcode. That way we can put this right in the post content:

[responsive imageid="12" size1="0" size2="500" size3="1000"]

and it will output the markup we need for Picturefill.

We'll split this up into two functions. One to define the shortcode and what HTML to output, and one specifically to loop through and output the image sources.

function getPictureSrcs($image, $mappings) {
  $arr = array();
  
  // Loop through all of our images sizes and store each one of them as a php variable, In which each image size corresponds to a specific type. Mappings is defined later on
  foreach ($mappings as $size => $type)
  {
    // we're using 'wp_get_attachment_image_src();' to get the image we uploaded
    $imageSrc = wp_get_attachment_image_src($image, $type);
    $arr[] ='<span data-src="'. $imageSrc[0] . ' "data-media="(min-width:'. $size .'px)"></span>';
  }
  return implode($arr);
}
  
// Enable the [responsive] shortcode
function responsiveShortcode($atts) {

  extract(shortcode_atts(array(
  // In this array, we're creating the parameters to be passed into the shortcode tag  
    'imageid'    => 1,
    // You can add more breakpoint sizes for your shortcodes here. The current values being assigned here are our default values, which the shortcode will ovveride
    'size1' => 0,
    'size2' => 600,
    'size3' => 1000,
  ), $atts));

  // Here we're defining our mappings to be stored as variables, so we can declare whatever size we want in our shortecode 
  $mappings = array(
    $size1 => 'small-img',
    $size2 => 'medium-img',
    $size3 => 'large-img'
  );

  // Then we pass in the responsive image function, and print out the new responsive image tag with our shortcode variables included
  return 
    '<span data-picture>'
      . getPictureSrcs($imageid, $mappings) .
      // this noscript tag contains our default image for old / JavaScript-less browsers, and we're using size2 as our default
      '<noscript>' . wp_get_attachment_image($imageid, $size2) . '</noscript>
    </span>';
}
add_shortcode('responsive', 'responsiveShortcode');

Ideally you define your breakpoints in the plugin here and then don't pass them at all in the shortcode, like:

[responsive imageid="12"]

Then only use the shortcode attributes in the rare cases you need to override the breakpoints.

Altering the Media Uploader output

This shortcode will be tremendously useful (remember we can even adjust the markup to be the correct <picture> in the future programmatically). But, how do we know the image ID to use? The Media Uploader UI doesn't make that information available. It knows that ID though, and with a simple filter we can adjust what gets sent to the editor:

function responsive_insert_image($html, $id, $caption, $title, $align, $url) {
  return "[responsive imageid='$id' size1='0' size2='600' size3='1000']";
}
add_filter('image_send_to_editor', 'responsive_insert_image', 10, 9);

Now selecting and inserting an image from the editor will work like this:

That'll do it! Here you can see it working:

More you can do

• If you're looking for a wider range of support, consider installing Matchmedia.js as well. It will make @media queries start working in older browsers, which then automatically makes Picturefill work as well.


• Rather than use shortcodes or adjust the media uploader output, you could make this work with a special image field via Advanced Custom Fields.


• You could adjust the markup to allow for align-* as WordPress likes to do. Or with <figure> and <figcaption> elements. Also, alt tags.


• You could have the settings for the breakpoints be settable via UI that the the plugin creates, rather than hard coded into the plugin.

Here's the GitHub repo if you want to contribute.

---

Hassle Free Responsive Images for WordPress is a post from CSS-Tricks

more info...