Article Archives

Sponsor: Flatiron School’s Online Campus

Flatiron School’s Online Learn-Verified program guarantees the same outcomes that Flatiron School has been delivering for years: a career as a Web Developer. This robust curriculum is designed to teach students to think, and build, like a software engineer. Join a thriving, global community of programmers so that you'll never need to go it alone. Get started with a free trial by taking the Intro to Programming course, then apply for the Learn-Verified program to be considered for a spot.…

28 comments

Changing the Cursor with CSS for Better User Experience (or Fun)

CSS can control the appearance of a cursor. There are a ton of options available to us and we've covered them pretty thoroughly in the ol' Almanac here on CSS-Tricks.

Still, it's easy to overlook cursors and their impact on the user experience of our sites. Remember when we learned ::selection was a thing and every site started using it to personalize the background color of text selections? Customizing cursors is just as easy and adds that extra bit of …

CSS containment

Michael Scharnagl breaking down the new contain property:

If you build simple sites without tons of DOM nodes and widgets you probably don’t have to care about CSS containment. On the other hand, if you build more complex sites CSS containment will help to optimize the performance. It is also a good idea to set contain: strict; for third-party widgets to protect the performance of your site.…

67 comments

What are CSS Modules and why do we need them?

I’ve been intrigued by CSS Modules lately. If you haven't heard of them, this post is for you. We'll be looking at the project and it's goals and aims. If you're intrigued, stay tuned, as the next post will be about how to get started using the idea. If you're looking to implement or level up your usage, part 3 will be about using them in a React environment.…

Resilience

Jeremy Keith’s talk from last year’s ColdFront conference is all about the fragility of the modern web. Jeremy talks about languages, such as Javascript, that have a “fragile error handling model” and why simple markup is much more resilient and error prone in comparison.

He has three principles for being a good citizen of the web:

  1. Identify core functionality of your website.
  2. Make that available using the simplest technology.
  3. Enhance!

Bonus conference talk! Our own Sarah Drasner at ForwardJS Summit …

Introducing React Storybook

Arunoda Susiripala:

With React Storybook, you can develop and design UI components outside your app in an isolated environment. It will change how you develop UI components.

Like a pattern library for stated React components.…

27 comments

Automating CSS Regression Testing

The following is a guest post by Garris Shipon. We've touched on the four types of CSS testing here before. Regression testing is the hardest. It's the type where you're trying to test if a change you made to CSS resulted in any unexpected visual problems. This is made more difficult with responsive designs. Garris built a tool for doing this as he embarked upon a new responsive design for a large scale site. Here, he'll walk you through

Sponsor: Wufoo!

Wufoo has been the best form builder around for quite a long time. Here's what I love about Wufoo:

  • It takes like 2 minutes to build a form with the easy drag-and-drop UI. It's just as easy to go back and update it.
  • You can completely control the look. Either quickly change the colors and fonts and stuff with a theme, or use your own CSS.
  • You can give specific people access to specific forms and reports.
  • It's easy to
11 comments

Let’s Learn ES2015

The following is a guest post by Ryan Christiani. Ryan is a teacher at HackerYou and has been working on a video series called Let's Learn ES6. He offered to put some of that together into a tutorial format, which I thought was perfect as we haven't covered ES2015 much here on CSS-Tricks.

How to work with SVG icons

Solid basics of an SVG icon system in this guide from Florens Verschelde, mixed with some good tricks: the two-color trick, pre-loading the sprite, and using custom properties for unlimited color variations. Also an interesting bit about using multiple methods for sprite insertion:

I like mixing both methods, building two sprites:

  1. A small one with essential icons (e.g. main icons used in the page header), to be inlined on each page. Target size: 5KB or less.
  2. A bigger one with

Why I don’t use CSS preprocessors

Roger Johansson:

I don’t feel the “problems” CSS preprocessors intend to solve are serious enough to warrant the cost, i.e. to me the solution is worse than the problem.

The volume of the chorus in favor of preprocessing (I sing tenor) is so loud, I suspect it's drowning out a decent size group of people who prefer not to use them.

In a surprise twist ending though, Roger does say he likes some forms of CSS processing, but does it …

32 comments

Leveling Up with React: Redux

This tutorial is the final of a three-part series by Brad Westfall. We'll learn how to manage state across an entire application efficiently and in a way that can scale without dangerous complexity. We've come so far in our React journey, it's worth making it across the finish line here and getting the full bang-for-our-buck out of this development approach.

The Rectangle Behind You

Last year I watched a talk by Marcin Wichary about his work at Medium and, although the content of his talk was enlightening, funny and charming I couldn’t help but gawp at the way that his slides appeared to transition and jump. At one point of the talk he hijacked a slide and started inputing values and moving things around and I had no idea how he did it. Was it Keynote? Had he made his own native app?

Well, …

“Maybe The Most Exciting Development In CSS You’ve Never Heard Of”

Philip Walton has the scoop on Houdini, a new W3C task force that’s planning to give developers low level browser APIs:

The bottom line is, imagine how much nicer your development life would be if you could use any CSS property and know for sure it was going to work, exactly the same, in every browser. And think about all of the new features you read of in blog posts or hear about at conferences and meetups — things …

Sponsor: Syncano – rethink how you build apps

​Tired of all the backend, server-side code and maintenance required to manage your app, taking time away from solving problems specific to your app?

Enter Syncano - a complete platform to rapidly assemble and orchestrate the building blocks you need for your app.

Our goal is to give the hands back to the creator. Connect your idea to the services you need and release your creative power!

The good news is the pricing is developer-friendly and you have access to …

17 comments

Using Web Fonts at All: Point/Counterpoint

Adam Morse makes the case against webfonts:

Typography is not about aesthetics, it’s about serving the text. If even a small percentage of people don’t consume your content due to a use of webfonts, your typography is failing.

All this being said I care deeply about aesthetics, and I’ve found the following two sentiments to be true: System fonts can be beautiful. Webfonts are not a requirement for great typography.

I’ve argued in their defense. Also, I reveal …

17 comments

Leveling Up With React: Container Components

This tutorial is the second of a three-part series on React by Brad Westfall. This series is all about going beyond basic React skills and building bigger things, like entire Single Page Applications (SPAs). This article picks up where the last article, on React Router, left off.

Progressive Web Apps: The Long Game

Remy Sharp attended Google's first Progressive Web Apps event:

What's stood out for me was how a relatively small amount of JavaScript and some well considered code can truly create an offline first experience that doesn't just rival it's native counterparts, but IMHO stands head and shoulders above. The load time was instant, for a web app, driven by regular HTML, CSS and JavaScript. It was fast, and all worked irrespective of the connectivity.…

5 comments

Ligature Icons via Pseudo Elements and Icon Fonts

The following is a guest post by Jason Jacobson, a senior engineer for Minneapolis based startup LeadPages®. Jason shows off something I didn't know was possible: turning a string into an icon. This requires an icon font, and I generally refer SVG for icons, but that doesn't stop this from being a bonafide CSS trick that is certainly worth knowing about!

Comic Book FX Lettering with SVG Filters

Much has been written about how SVG filters can be used to style images or manipulate shapes or even make crazy animations.

But I haven’t seen much about how SVG filters can be used to style text recently. Thankfully, Dudley Storey has written a neat introduction to the topic by showing how to make regular letters look like text from an illustrated comic book. It's part of a series, starting with the bubbles and staggering letters. …

Resolution Independent Pixel Illustrations

Marcus Blättermann has made a series of beautiful illustrations that adapt to the size of the browser window (and your cursor position). Make sure to check these illustrations out on a big screen to get the full effect.…

Sponsor: Media Temple

Media Temple has been my host here at CSS-Tricks since forever.

One of the things I particularly like is the customer support team. They have all the angles covered:

  • They have really robust documentation. I land there from web searches all the time, not even thinking to directly reference their docs.
  • Need help right now and not finding it in the docs? They do real time support through chat and phone. They are also 24/7/365 on Twitter at @mediatemplehelp

Content & Display Patterns with Expressive CSS

John Polacek looks at a few examples where it’s possible to use small utility CSS classes to design the layout for a page in a method he describes as “Expressive CSS”:

Instead of creating CSS around content patterns, we could instead craft our CSS based upon display patterns. Expressive CSS is an approach to writing lightweight, scalable CSS using utility classes that are easy to write and understand.

I’m not sure if John was the first to come up with …

More code review tools (on GitHub)

GitHub has improved their code reviewing tools:

Effective code review catches bugs before they’re deployed, improves code consistency, and helps educate new developers. We’re adding new features to make code review on GitHub faster and more flexible.

A few include a handy timeline indicator showing what you might’ve missed after reviewing a pull request, and a way to filter filters in a pull request by type (e.g. maybe you just want to look at the CSS files). …

7 comments

We Put Hundreds of Our Client Sites Behind a CDN, and It Worked Out Really Well

At the agency I work for, we recently put all ~1,100 of our sites behind a CDN. It seems to be working. Unfortunately, I have no idea why or how we did this. Therefore, in the first part of this article, I force our CTO, Joshua Lynch, to explain the process to me. This has the unintended consequence of Josh suggesting I try this on my own website, a process I'll narrate for the second half of the article.…

43 comments

Creating an SVG Icon System with React

I recently went to Michael Jackson and Ryan Florence’s ReactJS Training. I was really excited to attend, partially because I had so many questions about SVG and React. There are a lot of bits about working with React and SVG, and especially manipulating it, that aren’t quite supported yet. One of the major gaps for me was the <use></use> element, as most SVG icon systems are built with <use></use>.

I asked Michael if he thought better support might …

26 comments

Leveling Up With React: React Router

This tutorial is the first of a three-part series on React by Brad Westfall. When Brad pitched me this, he pointed out there are a good amount of tutorials on getting started in React, but not as much about where to go from there. If you're brand new to React, I recommend watching this intro video. This series picks up where the basics leave off.

32 comments

Use `rem` for Global Sizing; Use `em` for Local Sizing

Richard Rutter’s guide for setting the font-size of an element is interesting: he argues that we should use both em and rem units depending on the relationship it might have with other elements on the page:

Take the example of a pull quote containing two short paragraphs. The spacing between the paragraphs will depend on the size of the paragraph text, so you could feasibly set that spacing in either rems or ems. Should you decide during your design process …

34 comments

What is a Headless CMS?

Have you heard this term going around? It's quite in vogue. It's very related to The Big Conversation™ on the web the last many years. How are we going to handle bringing Our Stuff™ all these different devices/screens/inputs.

Responsive design says "let's let our design and media accommodate as much variation in screens as possible."

Progressive enhancement says "let's make the functionality of this site work no matter what."

Designing for accessibility says "let's ensure everyone can use this regardless …

A Year Without jQuery

Patrick Kunka writes about his experiments in making a large-scale web app without jQuery:

In my mind, ES6 is for the most part a much-needed syntactical progression of the JavaScript language and jQuery is for the most part, a DOM manipulation library with a beautifully designed API. These two things actually have very little in common so I wanted to write this article primarily to prove that you can stop using jQuery today - and you don’t need ES6 or …

Maybe we could tone down the JavaScript

Lexy Munroe shows a dozen or so issues with Twitter's reliance on JavaScript that could have been handled with some kind of progressive enhancement. Sometimes picking on the big players is useful, as they really do influence how other apps choose to do things. It's not exactly punching down. …

28 comments

Right Click Logo to Show Logo Download Options

I was on the Invision website the other day and I wanted to snag their logo for some reason or another. Sometimes you can have better luck doing that (like when you happily discover it's SVG) than you can Google Image Searching or even regular web searching for something like "Invision Logo" and loping to find some kind of branding page with a logo kit download.

So I right-clicked their logo, hoping to "inspect" it with the DevTools and check …

25 comments

Learning to Use Google Analytics More Effectively at CodePen

Here's how most people use Google Analytics: you copy and paste the default tracking snippet into your templates. Look at the pageview data that comes in. That's all good, but that isn't the most useful analytics for many sites. Google Analytics can track just about anything. It's very flexible and very powerful. Philip Walton and I co-wrote this article to show you how to do some custom GA stuff to help you collect data you maybe didn't know you could

Zero-Configuration React Static Site Generator

Clever use of React by Brent Jackson:

React is a great way to generate static HTML with a component-based UI. One of the biggest hurdles to working with React is the amount of boilerplate and build configuration it takes to get going. I wanted to make it dead-simple to start building static pages with React and without the need to install tons of npm modules and configure webpack.…

Obviously Just Use This Crazy Sexy Simple and Easy Content Tester

Actually, don't use most of those words.

Mapbox has open-sourced the content testing tool they use to automatically review all of their documentation, retext-mapbox-standard.

Think of it as a pedantic robot that makes sure we write simple English, use consistent terminology, and avoid insensitive language.

This "auto-nitpicker" uses rules for writing clearly and sensitively, gathered from sources like The National Center on Disability and Journalism, plainlanguage.gov, and our own list of words to avoid in educational writing

Sketch 3.6

There’s some great improvements in the latest release of Sketch which you might not have noticed: baseline fixes, better control over character spacing, masking improvements and more compact SVG exports are just some of the features here.

It’s nice to see that the team has a number of typography improvements planned for this year, too.…

13 comments

How The Heck Do You Hire a Web Design Agency?

Steven Trwoga wrote to me with a perfectly reasonable question:

I have an idea for a website I would like to have built. I believe it would fall into the category of "large project".

I have spoken with, and been quoted by some web design agencies in the UK. However I am not convinced by what I am being told in terms of what can be built and cost.

I have no experience in web design, but I have spent …

24 comments

Introducing CSS Scroll Snap Points

Before this new CSS I'm about to introduce existed, locking an element into the viewport on scroll required rigging up some JavaScript. As you may know, JavaScript has a well-earned reputation to be tricky when paired with scrolling behavior.

The new CSS Scroll Snap Points spec promises to help, allowing for this kind of behavior using very few lines of CSS.

As happens with very new web tech, this spec has changed over time. There is "old" and "new" properties …

one comment

An Interview with Libby Nicholaou on Creative Residency

I met Libby years ago from running into her at conferences. She was with Typekit and would be at the conference bringing their their super cool “pop up library” full of typographic books. She’s still at Adobe now, but running the Adobe Creative Resident program.

The program is now entering it’s second year. What’s it all about? Let’s find out.…

4 comments

An Interview with Una Kravets

Una Kravets is a front-end developer, writer, and speaker who works on the Cloud Platform Team within IBM Design. She cohosts a podcast called Toolsday, loves to travel, and occasionally does calligraphy. You can find her on the internet @una.

I had the pleasure of talking to Una Kravets one Sunny Sunday, and was super excited to do so because I'm a huge fan of her work. …

22 comments

Should you have defaults styles for `table`?

Luke Underwood wrote in with an interesting question:

What are the best practices for default <table></table> styling?

I guess there are three possibilities:

  • Have default styles
  • Don't
  • Somewhere in between

We have a pretty good* newsletter.