Various external hand-picked links to CSS-based content from around the web. Subscribe via RSS.
“On a recent plane flight, I starting noodling around with combining flexbox properties, animations and transitions. I came to the conclusion that, for simple accordion-type UI features (see Figure 1), this can be quite useful.”
“By combining a National Geographic feature entitled “Forest Giant” with some of Adobe’s contributions to web standards, Adobe has created a forward-looking vision of how readers will consume web content in the very near future.”
A nice quick little screencast by Mark Otto of Bootstrap fame.
Lengthy piece by Todd Motto, and probably nothing new to those using OOCSS or modular CSS. What I especially like about this article is that it gives some real practical reasons why these approaches are better than what we might be accustomed to doing.
A nice slide presentation by Harry Roberts from his talk at Industry Conf. Best line in this one: “Changing a dozen classes in your HTML is a lot simpler… than picking apart a tangled stylesheet.”
Colt McAnlis answers an interesting question: How do different CSS properties affect the render-weight of your page?
This seems so obvious, so I can’t believe I haven’t thought of this yet. Great little tip that avoids the annoyance of resizing the whole window.
I just discovered this blog that evidently is updated by the BBC news crew. Definitely worth subscribing to if you’re looking for responsive design trends associated with large applications.
This is definitely something I’ve been thinking about, and Lea has some good advice. See also the reader comments about IE10.
I’ve noticed this problem and patiently have worked around it, but didn’t realize it was happening because of scrollbars. Good info from Craig Buckler, and you can also check out his follow-up post on the same subject.
I think this is a great idea by Harry Roberts. Bad code happens anyhow, so why not set some rules for it?
Lea Verou has created a tool to preview a far-future CSS property: border-corner-shape. Not entirely useful at the moment with no browser support, but it’s cool that she’s using SVG to mimic the effect.
From the Sass blog, under the “beginners” category, although I suspect there’s something in this one for all Sass developers.
Russ Weakley with a few responsive table solutions with code and demos.
This article by Chris Mills at Opera looks like one to bookmark for definite use later on.
This is pretty cool. A national sports channel here in Canada is using the phrase “responsive design” in its TV ad. Interesting to see a web design term become this universal, used by non-techies.
Divya questions Ethan Marcotte’s original advice about using values like “width: 45.7474393034973%” when doing responsive designs.
A nice simple slide deck from Christian Heilmann on CSS3. Nothing too new here for experts, but a good overview for beginners and many intermediates.
First, this is a nicely designed website by Stephen Burgess, who is a Flash developer now starting to get into CSS3 and HTML5. And this is a nice little post explaining the animations he uses on his site.
Fantastic article on ADC by Philip Walton, who seems to be creeping up in my CSS Network feed quite often.
This might have performance/repaint issues, but an interesting improvement on icon fonts. Conor Muirhead discusses how to create complex multi-color icons using icon fonts, instead of the usual single-color icons.
Jonathan Snook at 2012’s Smashing Conference, talking up modular CSS.
I haven’t yet delved into the details on shadow DOM. If you have, then you might be interested in this piece that talks about styling shadow DOM elements. Definitely not light reading, and probably far future as far as real-world use, but it’s cool to know that things are moving ahead.
I’ve been meaning to grok this feature for a while now, and integrate it with my CSS animiations along with a setTimeout fallback for older browsers. This article might be a good start.
Russ Weakley with an extensive look at modular CSS techniques. 166 slides, so buckle up.
Philip Walton discusses an approach using Sass for avoiding class name conflicts in selectors when mixing CSS libraries.
Catalin Rosu’s take at responsive drop-down menus, supported in IE8+ and using Sass.
A simple tip from David Baron on helping the web become browser-agnostic.
The code is awful (i.e. don’t ever do this in a real project unless it’s a game or something), but the result is quite impressive.
Lots of different ways to horizontally center a group of elements of unknown width.
When it comes to CSS, this is as creative as it gets. This student (Xiaoyang Kao) actually created a CSS 3D Transforms-based overlay for a real video feed of a swim meet, to mimic what they do with CGI on live broadcasts.
Zoltan Hawryluk with an in-depth look at creating circular animation paths with just two keyframes (a technique Lea Verou discusses in her “10 More CSS3 secrets presentation…”. He also includes a jQuery-based script polyfill for IE
Zomigi creates a nice chart explaining the difference between the 2011 syntax for flexbox and the current one. This is particularly important because of the fact that IE10 was released before the new syntax was formulated. Hmmm, I wonder how IE10 could fix that problem? *cough* auto update *cough*
The slides from Addy’s talk at jQueryTO. Definitely one of the highlights of the conference. Believe it or not, he actually recommended that, in some cases, it would be better to use an image in place of box shadow, if page performance was significantly affected by adding shadows.
Some info from Addy Osmani on Google+ on performance and paint optimization when forcing GPU acceleration (like when you do something like translateZ(0) to smooth out an animation or the jagged edges of a transform).
Someone on Reddit has conducted a test to see if the content of pseudo-elements is indexed by Google in any way. It seems that the conclusion is that Google does not index such content.
“Animations need to be silky, scrolling must be buttery-smooth and your page needs to contain little to no jank.” Some tips from Addy Osmani on repaints and how to diagnose slow repaint times.
Excellent slide show by Russ Weakley covering the topic of floats. Nothing new here for experienced CSS developers, but great for beginners and those who might not fully understand the concepts behind floats and clearing of floats.
Very cool solution for responsive tables by Aaron Gustafson. Very nice idea to use a pseudo-element to grab the data-attribute.
Divya writes in detail covering some solutions for fallbacks on background-clip techniques that don’t degrade gracefully in non-supporting browsers.
Hugo discusses lots of different ways to do a “float: down” sort of effect. I’m not really crazy about many of these solutions, but I think it’s great to problem solve like this, especially when different devs get involved.
When I first saw the title of this one, I immediately assumed I probably wouldn’t like the reasoning. But I stand corrected; these are some really good reasons not to do a responsive design.
We need more articles like this one that lay out exactly the types of things that should be considered before a responsive design begins. Too often, we just start coding, without properly mapping out all the challenges and how we will resolve them.
Great comprehensive discussion of rem units by Matthew Lettini, which also includes some really practical reasons to use them.
Marko Dugonjić discusses “how to handle flexible widths and paddings on a child element, if the container itself is set with flexible lengths” in responsive designs — a question he says has come up a number of times in his workshops and elsewhere.
Philip Walton (remember that name, he’s a smart up and coming front-end blogger) writes on Codrops about so-called “presentational” class names, which many purists feel are wrong to use.
Steven Bradley with an in-depth look at what it means when you do something like left: auto and why it responds like it does.
Some interesting thoughts by Noah Stokes on the whole skeumorphism vs. flat design debate and how it relates to responsive code.