This Week in CSS—October 28, 2013

Here are some nice links that we’ve gathered for you this week:

Articles

Interesting article on how the BBC deals with responsive web design (best read in a refined BBC accent).

It’s important to remember accessibility as our designs trend toward “flat” UIs, as James Edwards reminds us.

Meh … who needs @media? If you are thinking it’s better just to have a separate m., maybe read this first: Google Hates Your Mobile Website (Here’s How to Fix It).

Yes, you guessed right: another ******* article on responsive images. :smiley: O no, [URL=“http://drew.roon.io/retina-images-that-respond”]and another one! Argh! [URL=“http://drew.roon.io/responsive-retinas-strike-back”]And another! :eek: Are you still alive? Well, then, check out [URL=“http://www.sitepoint.com/consensus-responsive-image-problem/”]Craig’s post that looks for a consensus to the issue.

Two opposing views on how to manage your css.
Challenging Css Best Practices
Cargo Cult css

Demos

Chris Coyier posted a nice, simple example of a responsive form on CodePen recently. (Not everything cool has to be super complex!)

Speaking of CodePen (Chris Coyier’s really cool new app), there are lots of really cool demos appearing there daily, such as:

Faking dropdown selects with radios
Device Carousel
A cool background hover effect
Pure CSS Stamp
Radio Buttons - next generation
Amazing “impulse loader”
Different ways rectangles make circles

Resources

CSS Typeset is a fun little tool for experimenting with text styling. You can play with fonts, font size, color, line height etc. to see how these all work and perhaps establish some styles you want to use.

If you are into CSS animations and want more options for stacking them, specifying callbacks on completion etc., you might like to check out animo.js.

If you are into tooltips, hint.css is a handy library (written in SASS) for creating some pretty spiffy examples.

If you are taked with creating HTML emails, make sure to check out CampaignMonitor’s really handy table of CSS support, which has recently been updated.

Tips

And once again, some lighthearted tips for the week, courtesy of @H9RBSjs

Hey, everyone, check out my flat UI design CSS framework → * { box-shadow: none; text-shadow: none; }

source

“border-bottom: 1px solid” vs. “text-decoration: underline” – that debate could be a major bloodbath.

source

Did you know that if you use OOCSS, rainbow-coloured antelopes will fly out of your butt distributing crisp hundred-dollar bills to all?

source

[rule=100%]orange[/rule]

Take a look at any or all of the links above and tell us what you think! And feel free to PM me if you have an great links for the next issue. :slight_smile:

You can also view a list of previous posts here.

Good round up again Ralph.

Those radio buttons look cool:)

Excellent post. You nailed it. :slight_smile: