OR 

Using CSS Grid the right way

Violet Pea has shared her recommendations for using CSS Grid. They basically boil down to these high-level points: Use names instead of numbers for setting up our grid columns. fr should be our flexible unit of choice. We don‘t really need a grid system anymore. Although this is all great advice and Violet provides a few examples to support her recommendations, I particularly like what she has to say about learning CSS Grid: ‘Learn

favicon of http://css-tricks.com

Writing Animations That Bring Your Site to Life

Web animation is one of the factors that can strongly enhance your website‘s look and feel. Sadly, unlike mobile apps, there aren‘t as many websites using animation to their benefit as you would think. We don‘t want to count yours among those, so this article is for you and anyone else looking for ways to use animation for a better user experience! Specifically, we‘re going to learn how to make web interactions delightful

favicon of http://css-tricks.com

Deliver your best work with the help of monday.com

(This is a sponsored post.) Here‘s the situation: You‘ve bashed out a complicated design over two weeks of near full-time effort, gotten everything down to the exact spec of the design file, turn it in for stakeholder review and... you‘re way off scope. Turns out a few folks on the team put their heads together, made some changes, and never sent you an updated comp. Boo! The unfortunate truth is that this happens all too often i

favicon of http://css-tricks.com

Blobs!

I was recently a guest editor for an issue of Bizarro Devs. It‘s a great newsletter! Go sign up! I put in a bunch of links around blobs. Like those weird squishy random shapes that are so "in" right now. Here are those links as well. I‘m always a fan of publishing stuff I write ;) Blobs! Blobs are in! Blobs are ahem a bit bizarre. I‘ll bask in a design like this annual report cover by Read article The post Blobs! appeared fi

favicon of http://css-tricks.com

CSS Variables + calc() + rgb() = Enforcing High Contrast Colors

As you may know, the recent updates and additions to CSS are extremely powerful. From Flexbox to Grid, and - what we‘re concerned about here - Custom Properties (aka CSS variables), all of which make robust and dynamic layouts and interfaces easier than ever while opening up many other possibilities we used to only dream of. The other day, I was thinking that there must be a way to use Custom Properties to color an element‘s backgroun

favicon of http://css-tricks.com

The #StateOfCSS 2019 Survey

You know about the State of JavaScript survey, where thousands upon thousands of developers were surveyed about all-things-JS, from frameworks to testing and many other things in between? Well, Sacha Greif has launched one focused entirely on CSS. This is super timely given a lot of the content we and other sites have been posting lately centered around learning, complexity, changing roles, and more. Sacha captures it nicely: This is especially

favicon of http://css-tricks.com

The Magic of React-Based Multi-Step Forms

One way to deal with long, complex forms is to break them up into multiple steps. You know, answer one set of questions, move on to another, then maybe another, and so on and so forth. We often refer to these as multi-step forms (for obvious reasons), but others also take to calling it a ‘wizard‘ form. Multi-step forms can be a great idea! By only showing a few inputs on a screen at a time, the form may feel Read article The post The

favicon of http://css-tricks.com

Diana Smith‘s Top 5 CSS Properties She Uses to Produce CSS Art

Have you seen Diana Smith‘s CSS drawings? Stunning. These far transcend the CSS drawings that sort of crudely replicate a flat SVG scene, like I might attempt. We were lucky enough for her to post some of her CSS drawing techniques here last year. Well, Diana has also listed the top five CSS properties she uses to get these masterpieces done, and they are surprising in their plainness: border-radius box-shadow transform gradients overflow

favicon of http://css-tricks.com

Letters

Did you see this Facebook crap? Why do I need a 4Ghz quadcore to run facebook? This is why. A single word split up into 11 HTML DOM elements to avoid adblockers. pic.twitter.com/Zv4RfInrL0 Mike Pan (@themikepan) February 6, 2019 I popped over to Facebook to verify that and what I saw was a different and even more nested mess: They are trying to fight your ad blocker browser extension. Of course they are. I‘m sure at their scale not Read

favicon of http://css-tricks.com

Colorful Typographic Experiments

There have been some interesting, boundary-pushing typography-related experiments lately. I was trying to think of a joke like "somethings in the descenders" but I just can‘t find something that will stand on its own leg without being easy to counter. Codrin Pavel created a fascinating multi-color typeface called CSSans. It‘s not a "font", because a font is a file, like "lato.woff2" or whatever. This is a CSS file, and you write in

favicon of http://css-tricks.com

The Smart Ways to Correct Mistakes in Git

The world of software development offers an infinite amount of ways to mess up: deleting the wrong things, coding into dead ends, littering commit messages with typos, are a mere few of the plentitude. Fortunately, however, we have a wonderful safety net under our feet in the form of Git when we‘re working with version control. Not that you and I need a safety net, of course, because we never make mistakes, right? Sure, sure. But for the b

favicon of http://css-tricks.com

Use monday.com to manage and share projects all in one place

(This is a sponsored post.) We‘ve talked quite a bit about project management and workflows around here at CSS-Tricks, not because it‘s the core of what we do as designers and developers, but because we all play a role in it as part of a team and because it impacts the quality of our work at the end of the day. That‘s why having a good system in place is such a benefit both to us and to teams Read article The post Use monday.co

favicon of http://css-tricks.com

Getting to Grips with the Airtable API

The Airtable web app is pretty neat. You can use it like a spreadsheet but it‘s useful for all sorts of other things too. The neatest thing about it for me is that it has an API so that you can treat it like a database. I‘ve been thinking about making weekly notes for the different teams I work with at Gusto to read about what the design systems team is working on, things we‘ve fixed, and any bugs we‘ve Read article The p

favicon of http://css-tricks.com

Don‘t Get Clever with Login Forms

Brad points out some UX problems with a variety of apps that are doing things a little outside of the norm when it comes to their login forms. There is already a bunch of things to get right with forms to begin with (e.g. use the right input types, label your inputs, don‘t have whack password requirements, use SSL, etc.)... OMG why complicate it even more?! A "password manager test" should be a development best practice here. Does it work

favicon of http://css-tricks.com

Social Cards as a Service

I love the idea of programmatically generated images. That power is close at hand these days for us front-end developers, thanks to the concept of headless browsers. Take Puppeteer, the library for controlling headless Chrome. Generating images from URLs is their default use case: const puppeteer = require(‘puppeteer‘); (async () = { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto

favicon of http://css-tricks.com

Avoiding those dang cannot read property of undefined errors

Uncaught TypeError: Cannot read property ‘foo‘ of undefined. The dreaded error we all hit at some point in JavaScript development. Could be an empty state from an API that returns differently than you expected. Could be something else. We don‘t know because the error itself is so general and broad. I recently had an issue where certain environment variables weren‘t being pulled in for one reason or another, causing all sor

favicon of http://css-tricks.com

instant.page

instant.page is a pretty cool project from Alexandre Dieulot. Alexandre has been at this idea for half a decade now, as InstantClick is his and is essentially the same exact idea. The idea is that there is a significant delay between hovering over a link and clicking that link. Say it takes you 300ms of delay. That 300ms could have been spent preloading the next page. And if you do use that time preloading, that page loads that much faster. Read

favicon of http://css-tricks.com

How @supports Works

CSS has a neat feature that allows us to test if the browser supports a particular property or property:value combination before applying a block of styles like how a @media query matches when, say, the width of the browser window is narrower than some specified size and then the CSS within it takes effect. In the same spirit, the CSS inside this feature will take effect when the property:value pair being tested is supported in the current brows

favicon of http://css-tricks.com

IE10-Compatible Grid Auto-Placement with Flexbox

If you work on web applications that support older browsers, and have lusted after CSS Grid from the sidelines like I have, I have some good news: I‘ve discovered a clever CSS-only way to use grid auto-placement in IE10+! Now, it‘s not actually CSS Grid, but without looking at the code itself, you wouldn‘t be able to tell. The HTML structure looks like CSS Grid. It has a defined set of columns with an undefined amount of rows an

favicon of http://css-tricks.com

A Funny Thing Happened on the Way to the JavaScript

Around this time last year, I wrote an article about the JavaScript learning landscape. Within that article, you‘ll find my grand plans to learn JavaScript - complete with a link to a CodePen Collection I started for tracking my progress, and it even got dozens of comments cheering me on. Like most people, I was ambitious. It was a new year and I was excited to tackle a long-standing project. It was my development version of losing 30 pound

favicon of http://css-tricks.com