Tags: css

Stephen Hay | The Back(side) of the Class | CSS Day on Vimeo

A great presentation from Stephen. He takes a thoughtful look at our processes and tools.

NTH-TEST | nth-child and nth-of-type Tester

A tool for getting instant visual feedback on your nth-child selectors. Considering that the way I figure out nth-child selectors is to try randomly changing numbers until it works, this should be quite useful for me.

Designing with Progressive Enhancement — sixtwothree.org

The full text of Jason’s great talk at this year’s CSS Summit. It’s a great read, clearing up many of the misunderstandings around progressive enhancement and showing some practical examples of progressive enhancement working at each level of the web’s technology stack

Contextual Styling: UI Components, Nesting, and Implementation Detail by Harry Roberts

Smart thinking from Harry here on a common issue when it comes to naming and styling. As he points out, the solution is not technical, but lies in how you form your mental model:

The design issue here is solved by subtly inverting the problem.

Practical Questions around Web Components - Ian Feather

An in-depth look at where web components stand today, together with some very good questions about where they might be heading tomorrow.

A Practical Guide to SVGs on the web

Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.

Writing for Yourself (& the Power of Absolute Positioning)

We should write for ourselves, we should write about whatever we want to. Not just about the web either. Our twitter feeds don’t need to be a highlight reel of our best moments and not every blog post needs to be a stinging critique of the latest javascript framework. They just need to reflect who we are and what we think about and with any luck, when we look back on them, we might learn something about ourselves.

Paul Robert Lloyd | Responsive Principles | CSS Day on Vimeo

I really like the way that Paul’s talk builds on top of ideas laid down by Ethan and Frank. Good stuff.

A Complete Guide to SVG Fallbacks | CSS-Tricks

An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.

Viewport vs Percentage Units - bitsofco.de

A comparison of when to use percentages and when to use vw/vh in your CSS.

GSWO Workshop with Sparkbox

Katie, Divya, and the other great designers and developers at Sparkbox run workshops on HTML and CSS for girl scouts. They’ve shared their resources and I might just borrow some of them for Codebar.

keyboard (div) ✿ dabblet.com

Here’s a really nifty use of the :checked behaviour pattern that Charlotte has been writing about—an interface for choosing a note from a piano keyboard. Under the hood, it’s a series of radio buttons and labels.

Keeping it simple: coding a carousel by Christian Heilmann

I like this nice straightforward approach. Instead of jumping into the complexities of the final interactive component, Chris starts with the basics and layers on the complexity one step at a time, thereby creating a more robust solution.

If I had one small change to suggest, maybe aria-label might work better than offscreen text for the controls …as documented by Heydon.

With a spoonful of flexbox by Charlotte Jackson, Front-end developer

Charlotte has experimenting with a nice discrete bit of flexbox on her personal site. Here she documents what she did, and what the fallback is.

Playing With Flexbox and Quantity Queries, From the Notebook of Aaron Gustafson

Aaron documents his process of implementing Heydon’s clever quantity queries in CSS.

I am really looking forward to hearing Heydon’s talk at Responsive Day Out.

Rothkode

Mark Rothko paintings recreated with CSS gradients.

Home · Primer

Github’s pattern library.

As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).

In Pieces - 30 Endangered Species, 30 Pieces.

Beautiful use of CSS transitions and transforms.

Also: CSS is officially the new Flash—”skip intro” is back.

Experiment: Using Flexbox Today - Chris Wright

Practical examples showing where you can use flexbox right now, along with some strategies on how to start doing it.

Quantity Queries for CSS · An A List Apart Article

A terrific bit of smart CSS thinking from Heydon Pickering.

You know he’s speaking at Responsive Day Out, right?

Harnessing Flexbox For Today’s Web Apps - Smashing Magazine

More flexbox!

This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.

flexbox in 5 minutes

A really handy interactive intro to flexbox. Playing around with the properties and immediately seeing the result is a real help.

Grid by Example

We were discussing the CSS3 grid layout module in the Clearleft office today, so naturally Rachel’s name came up. This is such a great resource for diving into this stuff.

Flying Toasters | After Dark in CSS

For people of a certain age, this will bring back memories of a classic screensaver.

If you had told me back then that the screensaver could one day be recreated in CSS, I’m not sure I would’ve believed it.

Sass Guidelines

Advice for writing Sass. I don’t necessarily agree with everything, but on the whole, this is a solid approach.

It’s worth bearing Chris’s advice in mind.

CSS: Just Try and Do a Good Job

Good advice from Chris, particularly if you’re the one who has to live with the CSS you write.

As Obi-Wan Kenobi once said, “You must do what you feel is right, of course.”

Cursors

A self-describing list of cursors available through CSS.

JS Bin: Vertical centering is impossible in CSS lol!

Four different techniques for vertical centring in CSS, courtesy of Jake.

Axiomatic CSS and Lobotomized Owls · An A List Apart Article

I’m quite intrigued by the thinking behind this CSS selector of Heydon’s.

* + * {
    margin-top: 1.5em;
}

I should try it out and see how it feels.

Replacing Radio Buttons Without Replacing Radio Buttons

A great technique from Heydon for styling radio buttons however you want.

Solved By Flexbox — Cleaner, hack-free CSS

Documenting common layout issues that can be solved with Flexbox. I like the fact that some of these can be used as enhancements e.g. sticky footer, input add-ons …the fallback in older browsers is perfectly acceptable.

A Single Div

Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.

A device agnostic approach to inlining CSS | Blog | Decade City

I very much agree with Orde’s framing here: I don’t think it makes much sense to talk about “above the fold” CSS …but it makes a lot of sense to talk about critical CSS.

And, yeah, it’s another example of progressive enhancement.

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

Harry has written down his ideas and recommendations for writing CSS.

Heydon Pickering | Effortless Style | CSS Day on Vimeo

Remember when I was talking about refactoring the markup for Code for America? Well, it turns out that Heydon Pickering is way ahead of me.

He talks about the viewpoint of a writer (named Victoria) who wants to be able to write in Markdown, or HTML, or a textarea, without having to add classes to everything. That’s going to mean more complex CSS, but it turns out that you can do a lot of complex things in CSS without using class selectors.

There are slides.

Pure CSS parallax scrolling websites | Keith Clark

This is clever: a way to achieve parallax scrolling without JavaScript—much more performant.

Of course, you might want to ask yourself why you want a parallax effect in the first place.

How we make RWD sites load fast as heck

Scott shares the code that Filament Group are using to determine which style declarations are critical (and can be inlined) and which are non-critical (and can be loaded asynchronously). It makes quite a difference in perceived performance.

By the way, I really, really like the terminology of “critical” and “non-critical” CSS, rather than “above the fold” and “below the fold” CSS.

Full-width pinned layouts with flexbox

Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.

Radio-Controlled Web Design · An A List Apart Article

Turns out that the :checked pseudo-class selector allows you to do some clever interaction without JavaScript.

Let’s Talk About RTL

Some very handy techniques for working with right-to-left text.

A Maintainable Style Guide - Ian Feather

The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).

GitHub’s CSS · @mdo

Mark Otto talks through the state of Github’s CSS and the processes behind updating it. There’s a nice mix of pragmatism and best practices, together with a recognition that there’s always room for improvement.

simpl.info

A handy reference for HTML, CSS, and JavaScript features. Each feature has a bare-bones demo at a nice guessable URL e.g. http://simpl.info/datalist/

A no-javascript toggle content feature

A clever way of doing progressive disclosure with CSS.

Getting Back That Lovin’ Feeling on Sparkbox

A lovely little tale of empowerment through HTML and CSS.

Comparing two ways to load non-critical CSS

Scott’s trying to find out the best ways to load critical CSS first and non-critical CSS later. Good discussion ensues.

It’s OK not to use tools by Jonas Downey of Basecamp

Today, a basic HTML/CSS site seems almost passé. But why? Is it because our new tools are so significantly better, or because we’ve gone overboard complicating simple things?

He’s right, y’know.

Single Element CSS Spinners

A lovely little selection of loading indicators powered by CSS animations and transitions.

Incomplete List of Mistakes in the Design of CSS [CSS Working Group Wiki]

I think I concur with this list. Although I guess it’s worth remembering that, given the size of the CSS spec, this isn’t an overly-long list.

It’s interesting that quite a few of them are about how things are named. It’s almost as if that’s one of the, say, two hardest things in computer science.

Learn CSS Selectors interactively

This visual approach to demonstrating how CSS selectors work is really handy.

Creating Style Guides · An A List Apart Article

A great article by Susan on getting started with creating a styleguide for any project.

I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.

Confessions Of A CSS Expert

Funny because it’s true:

The thing I regret the most is how my class addiction affected my relationship with HTML.

CSS A/Z

The alphabet illustrated with CSS.

Jonathan T. Neal | Thoughts on Media Queries for Elements

Some good ideas on the idea of element-level media queries, a feature that developers are crying out for and browser makers are saying is too hard. This post has some thoughts on how to deal with the potential issues.

Label Pattern - CodePen

This looks like a nifty take on the ol’ using-labels-like-placeholders pattern for forms. I still prefer to have a label visible at all times, but this seems like a nice compromise.

Getting Started With Pattern Libraries ∙ An A List Apart Blog Post

A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.

A-mer-ica! Fuck yeah!

Flexbox for forms - German for black

Here’s a clever use of flexbox: have a form field stretch to fill up most of the space and a button fill up what’s left.

Bulletproof Accessible Icon Fonts | Filament Group, Inc., Boston, MA

An in-depth look at using icon fonts without any nasty edge-cases ruining your day.

About Variables in CSS and Abstractions in Web Languages | CSS-Tricks

Chris has a written a response to my post (which was itself inspired by his excellent An Event Apart presentation) all about CSS, variables, and abstractions.

I love this kind of old-school blog-to-blog discussion.

Happy 17th Birthday CSS | Web Directions

A lovely history lesson on CSS from John.

Myth - CSS the way it was imagined.

This looks interesting: a CSS postprocessor that polyfills support for perfectly cromulent styles.

The (other) Web we lost

John shares his concerns about the increasing complexity involved in developing for the web.

Building for the device agnostic web | Talks | Decade City

Some excellent practical advice on progressive enhancement.

Responsive scrollable tables | 456 Berea Street

I like this CSS solution to sideways-scrolling tables for small viewports. It’s not going to be right for every situation but it’s a handy trick to keep up your sleeve.

Jeremy Keith – The Power Of Simplicity – border:none

This is the talk I gave at the border:none event in Nuremberg last month. I really enjoyed it. This was a chance to gather together some thoughts I’ve been mulling over for a while about how we approach front-end development today …and tomorrow.

Warning: it does get quite ranty towards the end.

Also: it is only now that the video is released that I see I spent the entire talk looking like a dork with a loop of wire sticking out of the back of my head.

Wallop Slider

I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.

Progressive Enhancement. Still Alive and Kickin’

Dan explains the reasoning behind his “Sigh, JavaScript” Tumblr blog, and provides an excellent example of progressive enhancement in the process.

Go, Dan, go!

Not Real Programming by John Allsopp

A terrific long-zoom look at web technologies, pointing out that the snobbishness towards declarative languages is a classic example of missing out on the disruptive power of truly innovative ideas …much like the initial dismissive attitude towards the web itself.

Create a responsive ad unit - AdSense Help

Looks like Google are offering responsive (or at least adaptive) ad sizes.

Media Query Events Example

A page to demonstrate the conditional CSS technique I documented a while back.

Style Guide Boilerplate

A very handy starting point for creating a front-end style guide.

Why the Web Doesn’t Need Another CSS Zen Garden - YouTube

A great history lesson from Dave.

Ah, I remember when the CSS Zen Garden was all fields. Now get off my CSS lawn.

Web Fonts and the Critical Path - Ian Feather

The battle between web fonts and performance. Ian Feather outlines some possible solutions, but of course, as always, the answer is “it depends”.

Text-align: Justify and RWD

Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.

Using icon fonts

A handy walkthrough of using icon fonts. The examples here use the excellent IcoMoon service

CSS is not an amoral monster.

I’m in general agreement with this rousing defence of CSS. I think it does a pretty great job of balancing a whole ton of use cases.

mezzoblue § 10 Years

Wow! The CSS Zen Garden is a decade old. Crazy! It’s a true piece of web history …and it’s back!

List of pseudo-elements to style form controls by TJ VanToll

Want to style those new HTML5 input types? I hope you like vendor prefixes.

Specializing yourself into a corner by Scott Kellum

I can empathise with Scott’s worries about fragmentation on the front-end with Saas, Styles, LESS, Compass, yada, yada, yada.

I want to share my code with everyone who writes CSS, not a subset of that group.

How to lose weight (in the browser)

A handy one-stop-shop for tips on improving front-end performance.

Learn CSS layout

A handy step-by-step guide to all the ways you can use CSS for layout.

Using SVG on CSS-Tricks

Chris takes a look at all the different ways you can use SVG today.

Logical breakpoints for your responsive design

Vasilis examines the multitude of factors that could influence an ideal measure.

CSS 3D Clouds

A beautiful experiment with CSS transforms and a smattering of JavaScript.

Protip: All browsers that support SVG background images also supports multiple background images.

A very hand tip from Ben on using SVG background images with a PNG fallback for IE8 and below.

The Vanilla Web Diet by Christian Heilman

I like the sound of the book that Chris is writing for Smashing Magazine. It sounds like a very future-friendly approach to front-end development.

On the styling of forms by Bruce Lawson

Bruce takes a look at the tricky issue of styling native form controls. Help us, Shadow DOM, you’re our only hope!

Front-end performance for web designers and front-end developers by Harry Roberts

A really good introduction to front-end performance techniques. Most of this was already on my radar, but I still picked up a handy tip or two (particularly about DNS prefetching).

At this stage it should go without saying that you should be keeping up with this kind of thing: performance is really, really, really important.

Implementing off-canvas navigation for a responsive website by David Bushell

This off-canvas demo is a great practical example of progressive enhancement from David. It’s also a lesson in why over-reliance on jQuery can sometimes be problematic.

All you need to know about CSS Transitions | Alex MacCaw

An in-depth look at CSS transitions with some handy tips for improving performance.

Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes - Tantek

I love that Tantek is as pedantic as I am …although I don’t think “pedantic” is exactly the right word.

Andy Hume: CSS for Grownups, SXSW 2012 - YouTube

The slides and audio from Andy’s exceptional talk earlier this year at Southby, combined into one video.

It really is excellent, although he does make the mistake of pulling the “dogma” card on those who woud disagree with him, and he really doesn’t need to: his argument is strong enough to stand on its own.

display: none; | Laura Kalbag

Laura explains the problems with hiding content for small screens, and uses this as an opportunity to elucidate why you should blog, even if you’re think that no-one would be interested in what you have to say:

The point I’m trying to make is that we shouldn’t be fearful of writing about what we know. Even if you write from the most basic point of view, about something which has been ‘around for ages’, you’ll likely be saying something new to someone. They might be new to the industry, you might just be filling in the holes in someone’s knowledge.

Let’s Talk Solar | LOGO24

Here’s a really useful case study for anyone who wants to do “guerrilla” responsive design: when you’re handed a fixed-width mockup but you know that responsive is the way to go:

I started by styling up every element, without layout. The result was a fully elastic layout that effectively served as a mobile, or small screen, layout, which just needed some tweaking of horizontal spacing.

Bingo! And this approach had knock-on benefits as it “supported writing component-based, or modular, CSS”.

❍ IcoMoon

This is a great free service for generating small subsetted icon fonts. Launch the app and have a play around — you can choose from the icons provided or you can import your own SVG shapes.

Nice touch: you can get the resulting font (mapped to your choice of unicode characters) base-64 encoded for your stylesheet.

Base CSS | Pasteup | Guardian News

The Guardian’s front-end patterns library. The modules section contains their equivalent of a pattern primer. Very nice!

IE10 Snap Mode and Responsive Design - TimKadlec.com

Useful advice from Tim on preparing your responsive site for IE10’s new “snap mode”. Don’t worry: it doesn’t involve adding any proprietary crap …quite the opposite, in fact.

CSSquirrel : The Savage Beatings Anti-Pattern

CSSquirrel shares my feelings on the email notification anti-pattern.

Max CSS

I like this suggestion. If you’re using minified CSS in production, it would be a nice gesture to have an easily-discoverable unminified version for people to view source on.