Work

Around the web and within the CSS Working Group, there has been some discussion about whether we should specify a version of CSS — perhaps naming it CSS4.

Part of a series on CSS Grid Layout for Smashing magazine. This time, we take a look at how to use grid-template-areas to place items.

In this article in the series on Grid Layout I take a look at how to use the grid lines to place items.

In this series I break down the CSS Grid Layout specification. This time, we take a detailed look at what happens when you create a grid container and the various properties that can be applied to the container to shape your grid.

The Smashing Team looks back at 2019. It’s been a busy year with new team members, four conferences, two books, a print magazine, and many, many articles.

The CSS contain property gives you a way to explain your layout to the browser, so performance optimizations can be made. However, it does come with some side effects in terms of your layout.

I’ve written nine articles in the 15 years of 24 ways, and all but one of those articles had something to do with CSS. In this last year of the project, I thought I would take a look back at those CSS articles.

A roundup of Advent Calendar sites of interest to web designers and developers. From accessibility to UX, coding challenges to Perl, there really is something for everyone this December.

Rather than do a round-up of the best deals available this Black Friday, we decided to do a round-up of the best independent products and makers. If you have money to spend, why not send some of this to folk creating great stuff in our community.

Chris Coyier asked me and a bunch of other web folk, “What about building websites has you interested this year?” This was my answer to that question.

In this article, Rachel Andrew looks at some common layout patterns that we can’t yet do on the web and the CSS Specifications that might let us achieve them in the future.

In this article, I explain how the W3C works and shares her “Web Story” to explain why the Web Standards process is so vitally important for everyone to have an open web platform where they can share their stories and build awesome things for the web together.

By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids.

Smashing Magazine is thirteen years old! In this article, I share the stories of some of our Smashing Team. The people behind the magazine, books, and conferences.

In this article, I explore the situations in which you might encounter overflow in your web designs and explains how CSS has evolved to create better ways to manage and design around unknown amounts of content.

Writing for a publication such as Smashing Magazine can help to build your reputation as an expert. I explain how to pitch to publications, and how to have the best chance of an accepted proposal.

An understanding of CSS Writing Modes is useful if you want to work with vertical scripts, or change writing mode for creative reasons. However, they also underpin our new layout methods, and those ideas are increasingly being applied across all of CSS.

Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements away. However, there is more to a margin than you might think.

There is more to styling lists in CSS than you might think. In this article, I start by looking at lists in CSS, and move onto some interesting features defined in the CSS Lists specification — markers and counters.

There is a wide variety of choices when it comes to creating a PDF from a web application. In this article, I take a look at the tools that are available and shares her recommendations to help you find the tool that works best for you.

Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at what happens when you use grid as a value of display, with added information about how subgrid changes that behavior.

Continuing a series on the display property in CSS, this time I take a look at the values which control box generation, for those times when you don’t want to generate a box at all.

We had a wonderful time at the sold-out SmashingConf San Francisco! In this article, I round up all of the videos, photos, tweets and resources that were shared on- and offstage.

We talk a lot about Flexbox and CSS Grid Layout, but these layout methods are essentially values of the CSS display property, a workhorse of a property that doesn’t get a lot of attention.

There are a few ways to align elements in CSS. In this article, I explain what they are with some tips to help you remember which to use and why.

What problems will the new aspect ratio unit solve? A look at the design of a new CSS feature.

What is fragmentation, why might you want to use it, and what is the current state of browser support?

It can be frustrating when you want to use a feature and discover that it is not supported or behaves differently across browsers. In this article, I explain how CSS is evolving to make it easier to deal with them.

The Multi-column Layout spec is often overlooked as we use Grid and Flexbox. In this article I explain why it is different to other layout methods, and shows some useful patterns and sites which showcase it well.

You don’t need to commit in memorizing every CSS Property and Value, as there are good places to look them up. There are some fundamental things, however, which will make CSS much easier for you to use. This article aims to guide you along your path of learning CSS.

The Smashing Team looks back at 2018. Conferences, articles, books and the Smashing Membership — there has been a lot going on.

A post for people who speak professionally, or hope to do so. How and why should you ask for payment for your work?

If you speak at one or two conferences a year then this post is probably not for you. However if you speak at more than one a month, you can easily find yourself exhausted, unable to enjoy them or to do a good job with your talk. In order to survive, if speaking is going to be a big part of your life, you need to figure out how to look after yourself on the road.

There are many books on public speaking available, but which should you spend your Christmas Amazon voucher on? Here are some that I have learned from and would recommend.

Sometimes there are things that you are simply burning to talk about, however if you are a frequent speaker, there will be days when you feel all out of ideas. In this post I’ll describe some of the ways I think up ideas for new presentations.

At some events, having given your talk, the floor will be turned over to the audience for questions. For many speakers this is the hardest part of the talk, and while I’m not really a fan of conference Q&A you can learn to deal with it, and at least not have it a a source of dread!

In this article my aim is to give you the basic details you need to grab quick information about any CSS property detailed in the CSS specs.

A strong start to your talk is easier if you know how you will be introduced to the audience. Take control over the first time the audience meets you with this tip.

Feature Policy can help protect your site from third parties using APIs that have security and privacy implications, and also from your own team adding outdated APIs or poorly optimized images. Find out how.

For many speakers, speaking means a lot of travel. I possibly travel more than most, being on the road for half of the year. In this article I’m going to round up some of the ways in which I make this amount of travel work reasonably smoothly, most of the time!

I am very keen on reducing the number of decisions I have to make when preparing to give a talk. Presenting can be a highly stressful event, and the fewer things that you need to worry about, and potentially forget while under stress, the better. In order to remove the need to worry about what I need for my talk I always bring the same things with me to the stage.

The questions that people ask after your talk can be a goldmine to help you improve that presentation and write new ones.

A roundup of Advent Calendar sites of interest to web designers and developers. From accessibility to UX, coding challenges to Perl, there really is something for everyone this December.

Have you ever considered whether CSS Grid can actually replace the need for CSS frameworks or third-party component libraries? In doing so, I discovered a range of reasons people use a third-party framework and the positive and negative things about doing so.

I attended the CSS Working Group meeting at W3C TPAC, and round up some of the discussions in this post — including those things where you can help make a decision.

In this final article of the series, we wrap up by taking a look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at?

I write about my involvement with the CSS Working Group, and why I feel it is important that web developers understand what is being worked on in CSS, and have a way to offer feedback.

In the last two articles, we have looked at what happens when we create a flex container, and also taken a look at alignment. This time we explore the often confusing issue of sizing in Flexbox. How does Flexbox decide how big things should be?

In this article, we take a look at CSS Shapes and how to create non-rectangular shapes using images, gradients, and basic shapes. We also discover how the new tools in Firefox make editing shapes easier.

In this article, we take a look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works.

In this article, the beginning of a series on Flexbox, we will take a detailed look at what actually happens when you add display: flex to your stylesheet.

We asked the Smashing Community for their favorite tips and tricks when editing text and code. With so many great suggestions, we’ve decided to collect them all into one article so you can add it to your useful bookmarks.

CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. In this article, we will take a look at using Fractal to manage components which use CSS Grid.

CSS Grid Level 2 is already in the process of being specified, and the main feature of this level of the spec is to bring us subgrid. In this article, I explain the new features.

Whether you’re fairly new to CSS or an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date, this guide covers everything you need to know about CSS Layout today.

I attended the Google I/O 2018 event in Mountain View. Here’s a roundup of the announcements and launches that were presented at the event.

MDN has been documenting the web platform for over 12 years and is a go-to resource for many. Its strength is the fact that it is a community resource, and anyone can contribute and help to improve it.

We have covered print stylesheets in the past here on Smashing Magazine. In this article, I take a look at the state of printing from the browser today.

How Designers And Developers Can Communicate To Create Better Projects

The results of a survey about the use of CSS Grid Layout.

CSS Logical Properties and Values aren’t quite ready to be used yet, however learning about them can help you to understand CSS Layout, and the interaction with Writing Modes.

Ever wondered how achieve styling of empty grid cells without adding redundant empty elements? Well, CSS Generated Content can help you do just that.

The recent Global Diversity CFP Day aimed to help more people submit their ideas to conferences and get into public speaking.

This article will take a look at the use of media queries for responsive design today, how they work alongside Flexbox and Grid Layout, and also have a look at what is coming in the future.