Article Archives

23 comments

Icons and Teams

Say you're working on a website that uses an icon system. Lots of people who work on the site interact with the icon system. Designers create new icons, they tweak existing ones, they have ideas on what they want the icons to do. Developers building out the pages of the site use the system.

Say you're the front-end developer. You're implementing this system. You're the middle man. You're the creator and consumer of this system.

What do you ask of

6 comments

Working with Images in Stylesheets with PostCSS

The following is a guest post by Aleks Hudochenkov. Aleks does a great job here of showcasing what PostCSS is good at and the role it has grown into in the front end stack. That is: doing little useful jobs within CSS. You're about to see a variety of PostCSS plugins at work that are all related to working with images. By the end, I bet you'll be able to imagine how PostCSS can be useful for other niches

CodePen Embedded Pen Upgrades

They now:

  1. Have an all-new design that allows for a split-view (code on the left, preview on the right) when the responsive design allows.
  2. Can be editable.

Along with all the same great features they have always had like themes (total design control! change all your embeds at once!) and optional click-to-play (for increased performance). …

3 comments

Visual Regression Testing with CSS Blend Modes

Last week I saw Una Kravets give a very inspiring talk at Generate Conf about using CSS Filters and Mix Blend Modes. One demo in particular got my attention because Una showed us how we could overlay two layouts on top of each other and use blend modes to spot all the differences between them.

I was pretty excited about this idea and got to thinking: could we create visual regression testing with just one line of CSS? Turns out …

2 comments

A Quick Look at the Runner Sketch Plugin

Runner is a plugin for the design tool Sketch. It lets you use your keyboard to run commands and order about other plugins. For example, by typing “vertical” into Runner then you can vertically align text much faster than moving your mouse to the button and clicking it.

I’ve seen some folks describe Runner as if it’s Sketch’s version of Spotlight or Alfred, as effectively their goals are one and the same: to speed up and organize your workflow. …

Lingo

Lingo is an app from the Noun Project team that groups images, icons, SVGs, and illustrations into a single place. It lets you browse them quickly, and then you can drop them into another application without any hassle.

I work a ton with SVGs and icons, so I'm always trying to find ways to reduce friction between different software and editing processes. One might think that the answer to this couldn't be more software, but I'm really enjoying Lingo. In …

Popper.js

Speaking of tricky things to get right: tooltips!

Tooltips need to be particularly self-aware, so they don't stick out someplace where they can't be read. Then continue to be smart as the page state changes, like is resized or scrolled. Popper.js looks like it handles all this stuff nicely.

The project page doesn't say this, but creator Federico Zivolo showed me how it's also friendly with React, because you can render the tooltip element itself within the component and it …

Modaal

Modaal is a WCAG 2.0 Level AA accessible modal window plugin.

Modals seem so hard to get right from an accessibility perspective, I'm not proud to say I've never tried. Something like moving focus to the modal when it opens and moving focus back to where it was when the modal closes seems like a particularly tricky thing to get right.…

25 comments

Poll Results: “front-end” and “front end”

The latest poll around here kicked off asking how you prefer spell this job we all do around here: frontend? front end? Front-End?

I asked because 1) I didn't know if there was a "right" answer 2) Even if there is a right answer, it doesn't seem adhered to.…

17 comments

Lint your CSS with stylelint

The following is a guest post by David Clark. David is the co-creator of a thing called Stylelint, a tool for keeping your CSS in shape. He does a great intro as to why you might need it himself, so take it away David...…

2 comments

Creating Wavescroll

The following is a guest post by Nikolay Talanov. Nikolay wrote in to show me this demo and wanting to write about it (his first post in English, ever!). It's an awesome demo, so of course I'm happy to pass it off to him now to take you through it. And make sure to check him out on CodePen too, he makes all kinds of other incredible demos.

16 comments

The Ever-Evolving Spectrum of the Web

I wrote a post last summer where I identified myself as a web designer in light of my experience in front-end web development. The response was pretty overwhelming and has stuck with me ever since.

What stuck with me most is how relative job descriptions are in web development. I might be a web designer standing next to one person, but a web developer standing next to someone else. Creating exact labels (and job descriptions, for that matter) is an …

An Interview with Håkon Wium Lie

Håkon Wium Lie is one of the co-inventors of the original CSS specification. This interview digs into the past and future of CSS:

If CSS hadn’t been developed, designers might have gone elsewhere, explains Lie. HTML could have turned into more of a page description language, akin to PDF. Indeed, designers had already started making pictures out of their documents. “Because that meant you could control every pixel in there. So you could get the fonts, colours, you needed. You …

Introducing the new Framer

Framer, the design and code tool from Motif Tools BV, has been updated with lots of new features.

I guess it's Framer "js", because the designs you create are formed from a code syntax that is JavaScript-like. Kinda looks like JSON in CoffeeScript. It's CoffeeScript. But you're actually working in a native app.

It's a wild time for design tooling. Sketch had become a dominant player for screen design. Adobe knows designers don't turn to Photoshop like they used to …

20 comments

I, Website

There is a famous essay by Leonard E. Read called "I, Pencil". This is a homage to that.


I am a website — the ordinary website familiar to all people who use the internet.…

The dark side of Guardian comments

As part of a series on the rising global phenomenon of online harassment, the Guardian commissioned research into the 70m comments left on its site since 2006 and discovered that of the 10 most abused writers eight are women, and the two men are black. Hear from three of those writers, explore the data and help us host better conversations online

Nice to see some real research corroborate what so many people have felt to be be true.

This is …

Aligning Text Smartly in CSS

One of those bonafide CSS tricks. Vijay Sharma shows it’s possible to center align a single line of text, but if it wraps, left align the text. A small adjustment, but little tricks like this can help legibility.…

Should I use Grid or Flexbox?

Two sentences from Rachel Andrew that explain when to reach for which layout choice:

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.

Flexbox can wrap, making it sorta-kinda two dimensions, but it still flows in a single dimension.…

Introducing iframify

Hugo Giraudel writes up why he created iframify, a script which grabs a DOM node and wraps it in an <iframe>. It’s a nifty tool for displaying components in a style guide at a certain width and effectively faking element queries.

An iframe being an inner document, media queries fire based on the width of the iframe rather than on the actual screen size. Which is what we want. Yay!…

Clarity 2016 Wrapup

My writeup of Clarity conference (the recent conference about style guides). Not comprehensive notes, just the things that resonated with me.…

A faster FT.com

Clever testing strategy from the team at Financial Times: they used blocking CSS in order to test people’s behaviour when they’re faced with a slow loading web page:

We wanted to understand how much the speed of our website affected user engagement, specifically, the quantity of articles read, one of our key measures of success. Using that data we then wanted to quantify the impact on our revenue.

If you’re looking for more interesting reading about performance and how it …

21 comments

Getting Started with CSS Modules

There isn’t one single approach with CSS Modules to making the JavaScript templates, the CSS files, or the build steps to make them work. In this post, which is part of a series on CSS Modules, we'll look at one approach. The goal of this post is to get a CSS Modules project up and running.

Article Series

Part 1: What are CSS Modules and why do we need them?
Part 2: How to get started with CSS Modules (You

ES6 module loading: More complicated than you think

Nicholas Zakas:

The differences between scripts and modules are subtle enough that it's hard for developers to understand the restriction of declaring what a JavaScript file represents ahead of time. My hope is that this post clarifies some of the reasons why it's not possible to autodetect modules from inspecting the source code and why tools such as ESLint ask you to specify the file type before executing. There will be a point in the future where ES6 modules are …

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

We have a pretty good* newsletter.