Box-sizing should be border-box by default.

Preach.

Shawn Wang lays it out. Presented here alphabetized:

html {
  font-size: 1.25em;
  line-height: 1.75;
  margin: auto;
  max-width: 70ch;
  padding: 3em 1em;
}

A modern CSS showcase styled by community contributions.

Stephanie Eckles’ modern spin on the classic CSS Zen Garden. A single HTML page styled in dozens of unique and interesting ways!

Frend components are modest and dependency-free. They are built with web standards as a priority and aim to avoid assumptions about tooling or environment. Care has been taken to make sure each component is compliant, keyboard navigable and properly interpreted by assistive technologies.

The BBC Global Experience Language (GEL) Technical Guides are a series of framework-agnostic, code-centric recommendations and examples for building GEL design patterns in websites. They illustrate how to create websites that comply with all BBC guidelines and industry best practice, giving special emphasis to accessibility.

This technical companion to the BBC’s Global Experience Language serves as a reference for developers implementing GEL’s user experience recommendations.

“When can I start using CSS grid layout?” “Too bad that it’ll take some more years before we can use grid in production.” “Do I need Modernizr in order to make websites with CSS grid layout?” “If I wanted to use grid today, I’d have to build two to three versions of my website.” The CSS grid layout module is one of the most exciting developments since responsive design. We should try to get the best out of it as soon as possible, if it makes sense for us and our projects.

This 2017 article from Manuel Matuzović goes deep on how to creatively use CSS Grid Layout in a progressively-enhanced manner. Naturally, the baseline techniques we use will change over time, but Manuel’s demo illustrates how you might think about design and layout as experience layers.

Making the internal external.

That should be corrected if anyone invents a time machine.

Collecting a few of Jen Simmons’ tweets:

Learned on today’s CSSWG call—I had a fundamentally out-of-date mental model of how the display property structures its values.

It’s not display: <value>;. It’s display: <outer-value> <inner-value>;.

drafts.csswg.org/css-display/#outer-role

This realization won’t change what I write in my code, but it does change how I think about what I’m writing.

display: grid; = display: block grid;
display: flex; = display: block flex;

Also: display: inline grid;

You can write display: inline-grid;, but that’s actually out of date. It makes more sense to write display: inline grid;

Do you often look for cool background gradients for your UI?

WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website.

A handy resource that includes CSS rules as well as Sketch and Photoshop templates.

A curated collection of useful CSS snippets you can understand in 30 seconds or less.

Una casually dropped this little CSS tip on Twitter:

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

This document explains the various ways of hiding things and the implications that come with that.

Indeed it does! This is a very thorough, detailed article on the ins and outs of hiding content with markup and CSS.

htmlreference.io is a free guide to HTML. It features all elements and attributes.

This site—along with its sister site, cssreference.io—is an excellent, thorough, and well-designed resource.

The elements list is clearly alphabetized, but it’s some small pleasure seeing the almighty anchor listed first.

In this helpful article, Elliot Dahl details his process for creating and aligning SVG icons to text.

This site aims to provide simplest possible examples of HTML, CSS and JavaScript.

Does what it says on the tin.

This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you’re building a website using flexbox and something isn’t working as you’d expect, you can find the solution here.

Nate Berkopec’s article is chock full of useful information, but I was particularly taken by his framing of a developer’s job (emphasis his):

As developers, our job isn’t to tell the designers “Hey, you’re dumb for including over 500KB of WebFonts in your design!”. That’s not their job. As performance-minded web developers, our job is to deliver the designer’s vision in the most performant way possible.

Equally interesting, but more technically-focused, is the rundown of how Google Fonts takes advantage of the unicode-range property to deliver smaller fonts.

The unicode-range property describes what characters the font supports. […] By telling the browser what characters the font supports, the browser can look at the page, note what characters the page uses, and then only download the fonts it needs to display the characters actually on the page.

Brilliant. I switched to serving fonts from Google and trimmed 45–70 kilobytes from my homepage. Your mileage may vary, but… not bad.

Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.

I tend not to rely on browser-specific hacks these days, but this is a useful resource should you be in the market for such things.

Chrome’s about to change how it handles <link rel="stylesheet">. This is big news and Jake’s got the rundown:

The plan is for each <link rel="stylesheet"> to block rendering of subsequent content while the stylesheet loads, but allow the rendering of content before it. The stylesheets load in parallel, but they apply in series. This makes <link rel="stylesheet"> behave similar to <script src="…"></script>.

It’ll take some getting used to sprinkling <link rel="stylesheet"> throughout a page’s <body>, but the performance benefits (coupled with HTTP/2) will be worth it.

Marking up and styling an effective donate form.

A game of layout, paint, and composite.

Transition effects for off-canvas views.

Did you know that one of the most powerful tools for fluid and responsive layout has been a native feature for every browser since HTML 4?

Responsive navigation plugin without library dependencies and with fast touch screen support.

Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it’s entirely based on percentages.

Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts.

The Open Web has never had as many capabilities as it has today. We’re seeing an explosion in new or updated specifications, and prototype and stable implementations to go with them. This blog post will look back as the platform we have had available (Called Open Web 0 here) and then looks forward at what we are beginning to get now and into the short and medium term future (which I’ve labelled Open Web 1).

Using CSS 3d to make every website into 3d (kind of).

Making media display consistently on your site can be a problem, especially with multiple content authors. Opera’s Chris Mills shows you how object-fit and object-position can solve it

Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!

Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.

The current HTML spec does not allow for multiple image URLs based on screen size, nessesitating the use of complex Javascript hacks to supply smaller images to mobile devices.

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Dig responsive design? Hate fluid grids? Try a Frameless grid.

In his Responsible & Responsive presentation at Breaking Development in Nashville TN, Scott Jehl provided a lot of detailed information about what it takes to deploy a responsive Web design at scale by walking through what he learned on the Boston Globe redesign project.

Automatically adapts your existing HTML images for mobile devices. No mark-up changes needed. Just drop it in and forget about it.

You may have heard that display:none is bad for accessibility and that you should use off-left positioning instead. It isn’t about using display: none; or off-left positioning. It isn’t just about screen reader users. It’s about making an interface work for everyone with efficient keyboard access for everyone that needs it—sighted or not.

I recently came up against an issue in Safari where the background colour of an element seemed to ‘bleed’ through the edge of the corners when applying both borders and a border-radius.

This is the way the code should have been all along. Clean, clear and simple.

CSSDOC is a convention to comment Cascading Style Sheets (CSS) to help individuals and teams to improve writing/coding/styling/managing CSS files. It is an adoption of the well known JavaDoc / DocBlock based way of commenting source-code.

Easily create bundles of beautifully matching, free web fonts, with failsafe font stacks to back them up. Including ready-to-go CSS code!

A powerful Photoshop-like CSS gradient editor from ColorZilla.

Another collection of templates for HTML, CSS, and JavaScript.

Boilerplate might be the wrong word for this, but it’s incredibly thorough and is great as a reference.

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

In Javascript it often makes sense to attach a stylesheet rather than style a bunch of individual attributes. Appending a stylesheet to the DOM has a number of advantages.

Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required.

CSS 3 introduces a brand new box model in addition of the traditional box model from CSS 1 and 2. The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space.

A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework.

This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular). It is to be readily available to anyone who wishes to check the iterative progress of our best practices.

:-moz-any() selector grouping allows for providing alternatives between combinators, rather than having to repeat the entire selector for once piece that’s different.

IE-CSS3 is a script to provide Internet Explorer support for several of the popular new styles available in the upcoming CSS3 standard.

For the most part, Mobile Safari on the iPad is the same as that on the iPhone. One difference that I’ve found is that Webkit on the iPad honors CSS media query declarations based on orientation.

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Jammit is an industrial strength asset packaging library for Rails, providing both the CSS and JavaScript concatenation and compression that you’d expect, as well as YUI Compressor and Closure Compiler compatibility, ahead-of-time gzipping, built-in JavaScript template support, and optional Data-URI / MHTML image embedding.

In this second article we’re going to focus on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts.

How do you answer the Internet Explorer 6 question?

We’re done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won’t have it. It’s time to raise our standards. Here, you’ll find only the most well-made, free & open-source, @font-face ready fonts.

Not as powerful as box-shadow, but can be used in a pinch.

Can be used as a trick to get RGBa-style semi-transparent backgrounds on elements.

The aim of these tests is to check which combination of :focus, :hover and :active works best in order to suppress the outline when an image-replaced link is clicked with the mouse, but leave it visible for keyboard users tabbing through the page.

There are many ways to make websites run faster. In this section, you can discover performance best practices that real web professionals employ in their everyday work. These practices have improved the user experience for millions of users and we hope they are useful for other web developers.

A new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript.

SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation.

In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.

You know how Rails 2.x has this cool feature for bundling sets of Javascript or CSS files? Yeah, they call it something like… cache. Crazy. I know. It’s cool and all, but why does not it also minify that content?

“This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.” I’m generally pretty wary of tools proclaiming this, but figured I’d save this one for later examination anyway.

In this article I will propose a new method for organizing CSS that better maps to how popular web application frameworks are built; and I’ll also provide some helpful code to make this easy to accomplish. The examples I use are based on Ruby on R… More

CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer - From NealGrosskopf.com

For A Beautiful Web is a series of web design master class training workshops covering topics including visual design for the web, best-practice XHTML mark-up and CSS, Microformats and practical web accessibility design and techniques.

A demonstration of Superfish – a jQuery plugin that creates Suckerfish-style dropdown menus with added features.

Activate The Death Ray is a Microformats and CSS demonstration site by Andy Clarke, part of the For A Beautiful Web series of web design and development workshops launching in 2008.

Parallax scrolling is a psuedo-3D effect often used in side scrolling games to create depth. In this article Clearleft lead designer Paul Annett explains how he used the effect to great success on their newly launched Silverback site.

Now you can style both in this super easy and light-weight solution.

Add Icons to your Textlinks with CSS

The world of standards-based web design and development has been undergoing something of a shake-up these past few days.

Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites.