A Single Div
Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.
Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.
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.
Harry has written down his ideas and recommendations for writing CSS.
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.
Of course, you might want to ask yourself why you want a parallax effect in the first place.
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.
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.
Some very handy techniques for working with right-to-left text.
The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).
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.
A clever way of doing progressive disclosure with CSS.
A lovely little tale of empowerment through HTML and CSS.
Scott’s trying to find out the best ways to load critical CSS first and non-critical CSS later. Good discussion ensues.
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.
A lovely little selection of loading indicators powered by CSS animations and transitions.
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.
This visual approach to demonstrating how CSS selectors work is really handy.
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.
Funny because it’s true:
The thing I regret the most is how my class addiction affected my relationship with HTML.
The alphabet illustrated with CSS.
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.
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.
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!
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.
An in-depth look at using icon fonts without any nasty edge-cases ruining your day.
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.
A lovely history lesson on CSS from John.
This looks interesting: a CSS postprocessor that polyfills support for perfectly cromulent styles.
John shares his concerns about the increasing complexity involved in developing for the web.
Some excellent practical advice on progressive enhancement.
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.
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.
I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.
Go, Dan, go!
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.
Looks like Google are offering responsive (or at least adaptive) ad sizes.
A page to demonstrate the conditional CSS technique I documented a while back.
A very handy starting point for creating a front-end style guide.
A great history lesson from Dave.
Ah, I remember when the CSS Zen Garden was all fields. Now get off my CSS lawn.
The battle between web fonts and performance. Ian Feather outlines some possible solutions, but of course, as always, the answer is “it depends”.
Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.
A handy walkthrough of using icon fonts. The examples here use the excellent IcoMoon service
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.
Wow! The CSS Zen Garden is a decade old. Crazy! It’s a true piece of web history …and it’s back!
Want to style those new HTML5 input types? I hope you like vendor prefixes.
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.
A handy one-stop-shop for tips on improving front-end performance.
A handy step-by-step guide to all the ways you can use CSS for layout.
Chris takes a look at all the different ways you can use SVG today.
Vasilis examines the multitude of factors that could influence an ideal measure.
A very hand tip from Ben on using SVG background images with a PNG fallback for IE8 and below.
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.
Bruce takes a look at the tricky issue of styling native form controls. Help us, Shadow DOM, you’re our only hope!
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.
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.
An in-depth look at CSS transitions with some handy tips for improving performance.
I love that Tantek is as pedantic as I am …although I don’t think “pedantic” is exactly the right word.
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.
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.
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”.
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.
The Guardian’s front-end patterns library. The modules section contains their equivalent of a pattern primer. Very nice!
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 shares my feelings on the email notification anti-pattern.
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.
Hey look; Anna’s in a CSSquirrel comic! And for good reason: Kyle is as impressed as I am with Anna’s research into browsers on gaming devices.
There’s also a call for more community device labs. I approve.
Tim shows how to make a scalable three-line navicon in CSS.
Yet another brilliant technique from Dave. The only caveat is that it uses background images rather than img elements, but it’s still very powerful (and very clever).
I thoroughly agree with Lea’s approach. It’s all about the craft.
This is a well-reasoned, thoughtful article on avoiding class names in CSS …but I don’t agree with it. That said, perhaps there’s a reasonable middle ground to be found between this extreme stance and the opposite (but in some ways just as extreme) stance of OOCSS.
Some good practical advice on improving performance. This should all be familiar to you, but it’s always worth repeating.
Some smart thinking from Harry Roberts on standardising the direction of your margins in CSS i.e. all top-margin or all bottom-margin declarations.
Some sensible ideas about having a consistent CSS writing style.
A really great markup and CSS pattern for “content first, navigation second” from Aaron.
Jake demonstrates his technique for preprocessor-generated stylesheets for older versions of Internet Explorer (while other browsers get the same styles within media queries).
This is an excellent idea from Jake: use a preprocessor to automatically spit out a stylesheet for older versions of IE that includes desktop styles (garnered from the declarations within media queries).
If you’re a dab hand with Ruby and you’d like to see this in SASS, you can help.
Not only is FixMyStreet responsive, it’s using the “display: table-caption” trick I documented for adjustable “content first/navigation second” source order.
A nifty example of responsive tables. View source to see how it’s done.
Bravo, Bruce, bravo.
I heard Glen Campbell’s “Like A Rhinestone Cowboy” on the radio and began absent-mindedly singing “Like a rounded corner” to it.
An interesting approach to squishing down large data tables for small-screen viewing …though I wonder if there isn’t a “Mobile First” approach that could scale up, say, lists to become tables on large screens.
This seems like a sensible way for browsers to approach implementing vendor-prefixed CSS properties.
Using flexbox to creata a narrow-column stacking order that’s unrelated to the source order.
A great step-by-step tutorial from Brad on developing a responsive site with a Content First mindset.
When I linked to the Toast framework the other day, I mentioned that I was intrigued by its use of inline-block for layout. Here’s a more detailed analysis of how display: inline-block works, along with some caveats.
This is interesting, not because it’s yet another grid framework (which I never use anyway) but because of the way it’s doing layout: with border-box and inline-block, rather than floats. If you’re only serving up your layout styles to browsers that support media queries (which would discount older versions of IE anyway), this could make a lot of sense.
This really is a ridiculously smart way of keeping third-party videos scalable in responsive layouts. I’ve just implemented it on this year’s dConstruct site.
Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.
In amongst all the shiny demos on this site, this one could actually be useful.
Here’s a handy little tip for CSS animations: instead of changing position properties, use translate instead.
An interesting idea from Chris: instead of linearising content on smaller screens, what if you could interweave it instead? Theoretically, CSS regions makes it possible, regardless of source order.
Emily walks us through a responsive design case study, stressing the importance using percentages for layout.
I met one of the guys from the Starbucks team at South by Southwest and he mentioned that they had a markup pattern library. I encouraged them to make it public, and it here it is!
I really hope that more companies and agencies will start sharing stuff like this.
A sweet little meditation on the nature of the web and responsive design.
Inspired by Luke’s documentation of layout patterns in responsive designs, Jason goes into more detail on the pattern of hiding navigation and extra content to the left and right of the viewport on small screens.