Tags: css

574

sparkline

Get the Balance Right: Responsive Display Text ◆ 24 ways

Some really great CSS tips from Rich on sizing display text for multiple viewports.

Is JavaScript more fragile? – Baldur Bjarnason

Progressive enhancement’s core value proposition, for me, is that HTML and CSS have features that are powerful in their own right. Using HTML, CSS, and JavaScript together makes for more reliable products than just using Javascript alone in a single-page-app.

This philosophy doesn’t apply to every website out there, but it sure as hell applies to a lot of them.

Eric’s Archived Thoughts: CSS Grid!

Eric is excited about the imminent arrival of grid layout in browsers. And after reading the answers to these sure-to-be-frequently asked questions, you’ll be excited too!

We’ve updated the radios and checkboxes on GOV.UK | GDS design notes

I always loved the way that Gov.uk styled their radio buttns and checkboxes with nice big visible labels, but it turns out that users never used the label area. And because it’s still so frickin’ hard to style native form elements, custom controls with generated content is the only way to go if you want nice big hit areas.

CSS Reference - A free visual guide to the most popular CSS properties.

A whole lotta CSS properties and values gathered together in one place. The one-page view is a bit overwhelming, but search and collections can get you to the right bit lickety-split.

Style List Markers in CSS | CSS-Tricks

A clever way of styling list numbers and bullets in CSS. It feels like this should be its own pseudo-element already though, right? Well, that’s on the way.

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends – Smashing Magazine

A really terrific piece by Heydon that serves as a rousing defence of the cascade in CSS. It’s set up in opposition to methodologies like BEM (and there’s plenty of back’n’forth in the comments), but the truth is that every project is different so the more approaches you have in your toolkit, the better. For many projects, something like BEM is a good idea. For others, not so much.

Funnily enough, I’ve been working something recently where I’ve been embracing the approach that Heydon describes—although, to be fair, it’s a personal project where I don’t have to think about other developers touching the HTML or CSS.

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout – Smashing Magazine

Rachel provides an in-depth comparison between flexbox and grid layout: what they have in common, and what their respective strengths are.

Don’t forget to enable the experiment web features flag in your browser if you want to see the examples in action.

From Pages to Patterns – Charlotte Jackson - btconfBER2016 on Vimeo

The video of Charlotte’s excellent pattern library talk that she presented yesterday in Berlin.

Web fonts, boy, I don’t know – Monica Dinculescu

Monica takes a look at the options out there for loading web fonts and settles on a smart asynchronous lazy-loading approach.

MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver

Adam Silver has written a free online book all about writing maintainable CSS. It dives straight into naming things and takes it from there.

MaintainableCSS is an approach to writing modular, scalable and of course, maintainable CSS.

Carousels Don’t Have to be Complicated - The Media Temple Blog

If you have to use a carousel, it doesn’t have to be complicated. Chris runs through some of the options out there. It turns out you can get surprisingly far with CSS alone.

Photo Toning with Gradients & Blend Modes

This use-case for blend modes is making me thirsty.

Also: look who’s blogging again!

On Style Maintenance | CSS-Tricks

This is a very thoughtful analysis of different approaches to writing maintainable CSS, which—let’s face it—is the hard bit.

I often joke that I don’t want to hire a code ninja. Ninjas come in the middle of the night and leave a bloody mess.

I want a code janitor. Someone who walks the hallways of code, cleaning up pieces, dusting up neglected parts, shinning up others, tossing unnecessary bits. I prefer this gentler, more accurate analogy. This is the person you want on your team. This is a person you want in your code reviews.

Also, can I just say how refreshing it is to read an article that doesn’t treat the cascade like a disease to be wiped out? This article even goes so far as to suggest that the cascade might actually be a feature—shock! horror!

The cascade can help, if you understand and organize it. This is the same as any sophisticated software design. You can look at what you’re building and make responsible decisions on your build and design. You decide what can be at a top-level and needs to be inherited by other, smaller, pieces.

There’s a lot of really good stuff in here to mull over.

My hope for this article is to encourage developers to think ahead. We’re all in this together, and the best we can do is learn from one another.

Simple, semantic and responsive tables (part II) – Design Today – Wouter Hillen

This uses generated content in CSS to make the aria-label attributes visible on small screens—clever!

Flex-grow 9999 Hack

This is an unintuitive—but very handy—use of of the flex-grow property. The use-case outlined here is fairly common.

Part 3: We might not need quantity queries thanks to Flexbox | Charlotte Jackson, Front-end developer

I love the way that Charlotte is documenting her learning process. In this third part of the quantity queries + flexbox saga, it turns out that flexbox is capable of doing the magic all by itself!

Building Social: A Case Study On Progressive Enhancement – Smashing Magazine

A step-by-step walkthrough of layering on enhancements to a site. The article shows the code used, but it isn’t really the code that matters—it’s the thought and planning that went into it.

Oversharing with the browser’s autofill / Stoyan’s phpied.com

Equal parts clever and scary. By using autocomplete in HTML and some offscreen positioning in CSS, it’s possible to extract some unexpected personal information.

I expect browsers will be closing these holes pretty quickly.

Quantity queries and Flexbox part 2 | Charlotte Jackson, Front-end developer

This is so great! Charlotte takes two previous ideas she’s been writing about (quantity queries and flexbox) and puts them together in a new way.

It took me a while to get around what the nth-child selectors are doing here, but Charlotte does such great job of explaining the CSS that even I could understand it.