design tips

It began, as many things do, with a silly conversation. In this case, I was talking with our Front End Technology Competency Director (aka “boss man”) Mundi Morgado.

It went something like this…

Mundi Morgado I want you to build a visual screen reader.”

Nathan Smith Who what now?

Mundi Morgado I want a CSS library that allows you to see the structure of a document. It shouldn’t use class so that you’re forced to focus on semantics. Also, …

The post Introducing Trashy.css appeared first on CSS-Tricks.

I kicked off a really poppin’ Twitter thread the other day:

What are the LOWEST hanging fruit of web performance? Nothing fancy, anyone can do, big impact.

Gzip. Optimize stuff. Reduce requests…

What are other big ones?

— Chris Coyier (@chriscoyier) August 17, 2018

So, I decided to round up all the ideas (both my own and yours) around that in a post over on the Media Temple blog.

These are the things we dive into in that post:…

The post The Low Hanging Fruit of Web Performance appeared first on CSS-Tricks.

This is a wonderfully nerdy deep dive into a very specific CSS change by Manuel Rego Casasnovas. Here’s a bit of terminology we should know:

First question is, what is an indefinite size? The simple answer is that a definite size is a size that you can calculate without taking into account the contents of the element. An indefinite size is the opposite, in order to compute it you need to check the contents first.

And then goes on to …

The post Changes on CSS Grid Layout in percentages and indefinite height appeared first on CSS-Tricks.

I saw a little demo the other day called HTML5 Terminal. It has some functionality, but it seems like it’s just kinda for fun. That said, I loved the aesthetic of it! Blurry monospace type with visible monitor lines and a glowing green background — nice!

Let’s re-create that, bit-by-bit.

A radial gradient is perfect for the glowing green background:

body {
background-color: black;
background-image: radial-gradient(
rgba(0, 150, 0, 0.75), black 120%
);
height: 100vh;
}

I’m so used …

The post Old Timey Terminal Styling appeared first on CSS-Tricks.

One of the many things we use Jetpack for here on CSS-Tricks is all of its features related to social media integration. For example, Jetpack can automatically share published content to different social media accounts simultaneously, add sharing buttons to your site’s theme, and allow for social login on the comment form. There is even more than that, but let’s dig into these three as we use them.

Auto-Sharing Posts

I like the idea that everything we published goes out …

The post Jetpack’s Social Integration Features appeared first on CSS-Tricks.