Article Archives

17 comments

Building a Jekyll Site – Part 1 of 3: Converting a Static Website To Jekyll

The following is a guest post by Mike Neumegen from CloudCannon. Mike and I talked about doing a little series on building Jekyll sites, which of course I was into because Jekyll is great and more education around static site generators is a good thing. Full disclosure, Mike's company CloudCannon is a CMS on top of Jekyll. As part of this series he's going to show you how to use that, so I requested it be a sponsored post.

20 comments

I Learned How to be Productive in React in a Week and You Can, Too

This article is not intended for seasoned React pros, but rather, those of us who make websites for a living and are curious how React can help us reason about updating user interfaces. I’ve been intrigued by React for some time, and now that it has gained some standing in the community as well as good reviews, the time to learn it seemed justified. There are so many new technologies constantly emerging in front end development that it’s sometimes hard …

12 comments

The `background-clip` Property and its Use Cases

background-clip is one of those properties I've known about for years, but rarely used. Maybe just a couple of times as part of a solution to a Stack Overflow question. Until last year, when I started creating my huge collection of sliders. Some of the designs I chose to reproduce were a bit more complex and I only had one element available per slider, which happened to be an input element, meaning that I couldn't even use pseudo-elements on …

​Sponsor: O’Reilly Fluent Conference

This year, the O'Reilly Fluent Conference (March 7-10 in San Francisco) brings you new 2-day, in-depth training courses in topics like React, CSS Layouts, Website Planning and Design. You'll also find case studies, introductions to new tools and technologies, best practices, inspiring keynotes, the ever-lively expo hall, and nonstop networking opportunities. Take a look at the schedule and see how it measures up against the problems you need to solve or the things you promised yourself you'd learn. Fluent could …

5 comments

Building & Maintaining OUI (Optimizely’s UI Library): Part 1/2

The following is a guest post by Tom Genoni. Tom is going to introduce us to the thinking and process behind Optimizely's new UI library / Sass framework. Part 2, by Daniel O'Connor, looks at some of the technical and integration bits.

When I first started working on web projects, stylesheets were seen as a necessary evil. It was neither a real language to be taken seriously by a computer-science minded engineer nor simple enough for a …

Hey, Look What Day It Is

One of my favorite self-declared holidays.

Interesting tidbit. It was considered a mistake by the CSS Working Group:

Box-sizing should be border-box by default.…

9 comments

Choosing the Right Markdown Parser

The following is a guest post by Ray Villalobos. Ray is going to explore many of the different varietals of Markdown. All of them offer features beyond what the original Markdown can do, but they offer different features amongst themselves. If you're choosing a version to use (or a version you're offering to users on your web product), it pays to know what you are getting into, as it's difficult to switch once you've chosen and there is content

Critical Web Fonts

Zach Leatherman outlines a new method for loading webfonts whereby the process can be broken up into two stages:

...instead of a full Roman webfont in the first stage, it loads a small subset of the Roman webfont, in this case with only the uppercase and lowercase alphabetic characters.

Then, in the second stage, we can load all the extra parts of that font, such as numbers or special characters. Ultimately, this greatly decreases the time in which readers will …

2 comments

Hookbin – Capture and Inspect HTTP Requests

The following is a guest post by Przemek Matylla, who created a tool I suspect will be mighty useful for some of you out there. There is a lot of mystery out there in webdev. What value is this variable at this moment in execution? Why is this property being overridden? What's causing this scrollbar? There is also mystery with HTTP requests. What data came along for the ride? What metadata? Is everything there (and not there) as I

Extending Sass with PostCSS

I think Ashley Nolan has the right idea here:

Many posts on PostCSS compare it’s features to Sass equivalents, but PostCSS doesn’t have to be used as an alternative to Sass. It can instead be used to add additional features to your workflow that Sass doesn’t provide. ... These extra tasks can run either before or after your Sass compilation, as PostCSS can parse both SCSS and CSS.

PostCSS has proven to be much easier for developers to write add-ons …

Sponsor: FullStory Searchies – Answers Before You Ask​

FullStory is a customer experience platform that gives product, marketing, and support teams unprecedented insight into the interactions of visitors and customers. By adding a simple script to any website, FullStory captures every event and interaction during a visit, making it easy to replay, search, and analyze each user’s experience.

FullStory Searchies intelligently determine which questions you’ll want to ask of a search or segment and present the answers in the most visually intuitive way: with a funnel, line graph, …

[Talk] HTTP/2 is Here, Now Let’s Make it Easy

Rebecca Murphey's talk from dotJS 2015 explores all the various gotchas surrounding HTTP/2. For instance, how will servers support it? How does our front-end process change to benefit the most from this new protocol? How will developers know that everything is working correctly?…

6 comments

Using Templating Engines to Streamline WordPress Theme Development

The following is a guest post by Charlie Walter. Charlie has written for us before, when he's not making me extremely envious. Now he's back to share something completely different. We're going to learn about methods he's learned for streamlining WordPress theming using templating engines.

Templating engines are fantastic! They make complex programming languages much easier to write and include features that streamline the development process.

WordPress is a natural environment for us to see how templating …

Performance Budget Builder

Brad Frost has made a very interesting visualization tool that helps teams think about performance budgets. It shows all the assets (HTML, CSS, JS, images, fonts, etc) as part of one proportional bar chart. It's a great way to look at it, because it reinforces the idea of "increase one, others need to shrink".…

The Responsive Image Breakpoints Generator

Nadav Soferman has written a great post about the common mistakes that can be made when developers attempt to make images responsive:

Whichever responsive design solution or framework you choose, you still need to generate and deliver multiple versions of each image. The challenge of finding the best fitting resolutions, which are the responsive breakpoints for each specific image, is common for all approaches and frameworks.

What’s especially surprising to me is we need to serve a different number …

10 comments

Mood Driven Development

I suspect this is what many of us do (based on my own behavior and what I observe of others), but I'm not sure we outright say it or embrace it. Mood Driven Development: Work on what you feel like working on.…

Doing Science on the Web

Alex Russell on the current problem with testing experimental web features:

Prefixes “look” ugly and the thought was that ugliness  —  combined with an aversion to proprietary gunk by web developers —  would cause sites to cease using them once standards are in place and browsers implement. But that’s not what happens.

Tools like Autoprefixer compound the problem that we developers use prefixed-anything as soon as we can get our hands on it.

He talks about some strategies for solving …

20 comments

OS X Window Manager Apps

There is no shortage of apps to help you arrange windows. I find them tremendously useful. Most Windows (the operating system) users I know quite like the built-in abilities it has to position windows, but there isn't as much of that built into OS X. OS X El Capitan (10.11) brought some split screen stuff, but it has quite a few limitations and certainly isn't fulfilling all the needs of the discerning nerd.

So let's look at the options! Fair

Revisiting the Float Label Pattern with CSS

The “floating label” is a common design pattern where the label of a form is displayed on top of an input until someone taps it. It’ll then transition out of the way to reveal the placeholder text beneath, but the label will still be visible above or below.

Emil Björklund walks us through an interesting demo that replicates this pattern but without the need for any JavaScript and with the :placeholder-shown pseudo selector.

Note there are other CSS-only methods for …

3 comments

Some Pretty Splendid SVG Links

I'm always running across wonderful SVG stuff. Demos, tutorials, tools, art... some of the best timeless resources end up in our SVG compendium. Some I think are best suited to posts like this!

Some of these are pretty new. Some of them are not, but I found them useful recently or are new-to-me.…

Sponsor: Media Temple

I'm pretty excited to welcome Media Temple as a the brand-spankin' new primary site sponsor around here. I pitched the idea to them, actually. While sponsors are vital for the site, I'm selective about the companies we work with. I personally approve and endorse every one. I'm particularly selective about the primary sponsor. I want it to be a company that I not only use and endorse, but that I select as a good fit. Media Temple was at the …

9 comments

CSS Specificity is Base-Infinite

There is a good amount of information on this site about specificity. The seminal one is Specifics on CSS Specificity, which has been updated a few times over the years. When it was originally published in 2008, it presented the information in a bit of a misleading way. It has long since been fixed, but the mistake is still interesting.…

4 comments

Planning a Tech Event in 6 Months

The following is a guest post by Brad Westfall. I ran into Brad at a conference not long ago and we talked about potential guest post ideas. Brad recently ran a conference of his own, CSSDay.io, and as you would expect he is full of thoughts on that experience. The perfect time to write!

10 comments

The Current State of Web Security (An Interview with Anselm Hannemann)

Anselm Hannemann recently made a post about some of the misconceptions that front-end developers might have about web security. Since I had lots of questions about these things, I thought I'd interview Anselm to get his take on the surprising complexity of getting set up with HTTPS. We talk about things like generating certificates and how we might best make sense of the conflicting opinions many developers, including myself, have about third-party services such as Cloudflare.

The HTTPS-Only Standard

A project by the U.S. General Services Administration that outlines how Federal agencies should implement basic web security, going into great detail as to why government websites should always use HTTPS over HTTP:

HTTP has become central to today’s way of life. HTTP is currently the primary protocol for applications used on computers, tablets, smartphones, and many other devices. As our dependency on the internet has grown, the risk to users' privacy and safety has grown along with it. Every …

38 comments

A _______ of JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. Yadda yadda yadda.

But what do you call a small amount of it?…

56 comments

Designing A Product Page Layout with Flexbox

The following is a guest post by Levin Mejia, a Designer Advocate at Shopify. Shopify uses flexbox in a new theme they developed and they wanted to share some of the techniques they used to do it here. To that I say: yes please.

15 comments

Influencing Web Layouts with Print Layouts

Jen Simmons has a compelling talk (video) where she calls out web design as being far too dominated by the HEADER CONTENT SIDEBAR FOOTER pattern we're all too familiar with. Print design, despite so often being dubbed "dead" or in massive decline by those of us in web design, still excels in quality and variety of layout.

Certainly we can learn from print design on the web, yeah?…

20 comments

The Sass Ampersand

The following is a guest post by Rich Finelli. Rich told me he used to have some trouble with the special ampersand character in Sass, but then had a bit of an epiphany and wanted to share that understanding (it's powers and limitations) with others. My favorite!

The & is an extremely useful feature in Sass (and Less). It's used when nesting. It can be a nice time-saver when you know how to use it, or a bit …

Moving Along a Curved Path in CSS

motion-path is specced and already has some support. But there is another way to replicate curved motion paths, as Tobias Ahlin points out:

... if we add a container around the object we want to animate, we can apply one timing function for the X-axis, and another one for the Y-axis. Below, we're using ease-in for the X-axis, and ease-out for the Y-axis.…

Optimizing SVGs for Web Use

An in-depth series of posts by Andreas Larsen that walks us through the process of how to (hand) optimize SVGs. He suggests optimizations that it's unlikely software could do for you. Things like changing the viewBox size to accommodate simple, rounded integers.

Adding this one to our compendium of SVG info.…

Safari 9.1

There are lots of exciting new features rolling out in Safari 9.1 such as support for the picture element, enhancements to the web inspector, CSS variables and gesture events for iOS. Although, what I’m most excited for is the OpenType support with properties such as font-feature-settings and its variants like font-variant-ligatures and font-variant-caps, all of which give us more fine-tuned control over typesetting.

You can play around with these new features in the OSX 10.11.4 and iOS 9.3 betas …

6 comments

What is Bikeshedding?

The #1 place I hear people use this unusual term is standards people talking about standards stuff. It's not an intuitive term, but what it means is quite a useful and short way to describe a certain situation.…

Sponsor: ​LightCMS

LightCMS is the only true white-label Content Management System on the market. If you've ever considered branding your web design business as your own while using someone else's system, you need to check out their Developer Program. You'll have all of their enhanced reseller tools at your fingertips, as well full access to the HTML and CSS of your sites. They even give you a free website for your business.

If you're thinking about switching CMS providers, or even …

Swiss in CSS

Swiss in CSS is a delightful project by Jon Yablonski that recreates posters made in the International Typographic Style, a visual design movement that began in the 1940s.

Open the examples in CodePen to take a look at how each of them work under the hood.…

12 comments

Thank You (2015 Edition)

GOSH! Don't the years roll by fast? It's that time of year to say "Thank you!" I am grateful for the CSS-Tricks community: you read, help me, and help each other be better at our craft. It is each of you that has made this site what it is today. We get mushy on you every year, if you're keeping track.…

DuoTone themes

Some classy understated themes for Atom by simurai. This might be the little thing that gets me to try switching to Atom. I gotta imagine people will port them over to other apps, though.…

A Few Picks from 24 Ways 2015

Strong year for 24 Ways! The whole archives is worth browsing through and bookmarking the articles that most interest you. Here's some of our favorites:

31 comments

Should I use a video as a background?

A reader writes in:

I've seen done beautifully, but I'm having a hard time finding any articles on best practices. I try to steer clients away from wanting video background even though it's hard to argue against it because it does look stunning when done right.

"Look at my competitor's website, they have a video!! You can do it!!", they say.

The problem I run into is when a client actually sends me a video they want to use, it's …

29 comments

`flex-grow` is weird. Or is it?

The following is a guest post by Manuel Matuzovic. It illustrates how flex-grow works, weird quirks and all. Then he goes into several examples on how common layout patterns may be implemented using flex-grow and flex-basis.

When I found out about flex-grow, I made a simple demo to find out what it did and how it worked.
I thought I got everything figured out, but when I tried it on a website a colleague has recently made, …

15 comments

Click SVG Element to Focus (and Style)

A reader writes in:

Is there anything on your site that shows me how to make an SVG clickable using CSS? As in, I have an SVG and I click on part of it and it should reveal an outline on that part of the element? I have a telephone interview Tuesday for a job as a remote SVG Illustrator and I don't want to look like a turkey.…

The Website Obesity Crisis

Maciej Ceglowski’s latest talk is all about front-end performance, the advertising bubble and surveillance on the web. It’s interesting that he argues how each of these separate problems are really interrelated issues that ultimately damages how the web is built.…

We have a pretty good* newsletter.