Article Archives

“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 …

26 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
8 comments

The New Newsletter

We've long had a way to subscribe to CSS-Tricks via email. You probably couldn't really call it a "newsletter" though, as it just consumed the RSS feed and sent out newly published articles each week. Nothing wrong with that, but it isn't nearly as fun a custom-written one.

So, the new newsletter is here! It still links to everything we've published, so you won't missing anything there, it's just more elegantly summarized.…

20 comments

The Current State of Telephone Links

Telephone links are a thing. Like an anchor link you tap to (probably) go to another page, these are links you tap to call a number on a phone-capable device. They’ve been around for quite some time. Yet, they cause me a lot of confusion. For example, many devices will automagically recognize phone numbers and do the linking for us, but not always.…

Draft.js

Facebook (looks like mostly Isaac Salier-Hellendag) released what looks like a pretty sweet rich text editor written in React.

In the same vein:

  • TinyMCE is the one that's been around forever.
  • ProseMirror is the fairly new one from Marijn Haverbeke
  • ZenPen is a super minimal one from Tim Holman
  • There's been a bunch of attempts to replicate the Medium editor, like this.

If you don't care about visual as-you-type formatting very much (i.e. you just want a simple Markdown …

Peak Style Guide

Brad Frost, responding to last week's Newsletter where I mentioned that a style guide doesn't need to be a big fancy display for the world to see.

But I don’t think these style guide logos and mascots Chris refers to are simply gratuitous visual wankery. It reflects an organization’s commitment to making and maintaining a thoughtful, deliberate design system.

My worry isn't that big fancy style guides in and of themselves are a problem, but other orgs see them and …

Managing Typography on Large Apps

Harry Roberts suggest very minimal styles for h1-h6, then using heading-specific class names to actually style them, regardless of what element they turn out to be.

I could get behind that. In the past I've done .h1, .h2, etc rather than use the tag selectors, but heck, you might as well just give them names.…

The New Web Typography

An essay by our own Robin Rendle. A story of typographers gone by, the ideas they left behind, and what it all means in today's vastly different contexts.

I don’t have as much empathy for screens as much as I do the networks that make those screens worth having.…

4 comments

Squigglevision

It's a term for animation where the lines appear to squirm around, even when the object/scene is at rest. Apparently, it's even patented. It's part of the iconic look of shows like Dr. Katz:…

20 comments

A Quick Overview of `object-fit` and `object-position`

object-fit and object-position are my two favourite CSS properties lately. They give developers control over the content inside an img or a video similar to the way that we can manipulate the content of a background with background-position and background-size.…

​Sponsored: What salary could you be earning?

If you want to know what you're worth, Hired has the answer: with data from thousands of real interview requests and job offers, we've put together a salary calculator that can tell you what you could be making in your job based on the skills you have.

If you want to find out how much more you could actually earn, join Hired. Just set up your profile, and companies will give you job offers with salary and equity upfront before …

31 comments

Making a Simple Image Resizing/Optimizing Service in Automator

As I was using Photoshop to resize my eleven billionth image, it occurred to me I should probably simplify this process. AppleScript, perhaps? Photoshop scripts? Some already existing little app? A little pontification on Twitter resulted in a number of suggestions to try OS X's Automator. Turns out it's a pretty easy thing to do, at least in a limited way.…

Using calc() to fake a media query

A bonafide CSS trick by Rémi Parmentier. It's used in the context of emails here, but it's a clever trick in it's own right.

This is the trick:

/* When parent is 500px wide... */ .block { min-width: 50%; /* 250px WINNER */ max-width: 100%; /* 500px */ width: calc(480px - 100%) * 480); /* -9600px */ } /* When parent is 400px wide... */ .block { min-width: 50%; /* 200px */ max-width: 100%; /* 400px WINNER */ width: calc(480px
20 comments

I Heart CSS

I like to think of CSS as a love language. If written well, it can be as lovely as poetry. There are rules, semantics and, like love itself, it can be communicated in many ways. Consider the variety of options we have to write black in CSS:

  • #000000
  • #000
  • rgb(0, 0, 0)
  • hsla(360, 100%, 0%, 1)
  • black

In the spirit of Valentine's Day, I thought it would be fun to push this concept a little further with the many ways …

Introducing Vector Networks

The team working on the upcoming design tool Figma demonstrate how vector path making will work. Think of the Pen Tool in Adobe software, rethought. This new approach certainly looks more intuitive, especially with how easily curves can be manipulated.…

42 comments

Why npm Scripts?

The following is a guest post by Damon Bauer. There has been a growing sentiment (for instance) that using node packages directly, with the command line interfaces they provide, is a good route to take. As opposed to abstracting the functionality away behind a task runner. Partly: you use npm anyway, npm provides scripting functionality, why not just use that? But there is more to it than that. Damon will walk us through the thinking, but also

We have a pretty good* newsletter.