OR 

A Collection of Interesting Facts about CSS Grid Layout

A few weeks ago I held a CSS Grid Layout workshop. Since I‘m, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos. I decided to share some of the stuff that was particularly interesting to me, with you. Have fun! Negative values lower than -1 may be used for grid-row-end and grid-column-end In a lot of code examples and tutorials you will see that you can use grid-column-start: A Collection

favicon of http://css-tricks.com

Did CSS get more complicated since the late nineties?

Hidde de Vries gathers some of the early thinking about CSS: There is quite a bit of information on the web about how CSS was designed. Keeping it simple was a core principle. It continued to be - from the early days and the first implementations in the late nineties until current developments now. The four main design principles listed are fascinating: Authors can specify as much or little as they want It is not a programming language by design

favicon of http://css-tricks.com

Playing with Shadow DOM

About a year ago, Twitter announced it would start displaying embedded tweets with the shadow DOM rather than an iframe, if the browser supports shadom DOM? Why? Well, speed is one reason. They say: Much lower memory utilization in the browser, and much faster render times. Tweets will appear faster and pages will scroll more smoothly, even when displaying multiple Tweets on the same page. Why the choice? Why is it necessary to use either iframe

favicon of http://css-tricks.com

Edit your website, from your website

Stuck making "a few easy changes" to the website for someone? Component IO makes it quick and simple for you or your team to make edits (even for non-technical users). You can manage content with a WYSIWYG editor or instantly update HTML, CSS, and JavaScript right from your website. Make changes faster, empower your team, and avoid redeployment bugs. Works with every web technology, from WordPress to Rails to React. Join hundreds of projects alre

favicon of http://css-tricks.com

PWA Stats

A community-driven list of stats and news related to Progressive Web Apps Things like: Twitter Lite saw a 65% increase in pages per session, 75% in Tweets, and a 20% decrease in bounce rate. Twitter Lite loads in under 3 seconds for repeat visits even on slow networks. It‘s in the same veins as WPO Stats, which is focused solely on web performance and positive effects of doing a good job. Direct Link to Article Permalink PWA Stats is a po

favicon of http://css-tricks.com

Let‘s say you wanna open source a little thing

Let‘s say you‘ve written a super handy little bit of JavaScript. Nice! Well done, you. Surely, the world can benefit from this. A handful of people, at least. No need to keep this locked up. You‘ve benefitted from open source tremendously in your career. This is the perfect opportunity to give back! Let‘s do this. You‘re going to need to chuck it into a GitHub repo. That‘s like table stakes for open source. T

favicon of http://css-tricks.com

Implementing Webmentions

We get a decent amount of comments on blog posts right here on CSS-Tricks (thanks!), but I‘d also say the hay day for that is over. These days, if someone writes some sort of reaction to a blog post, it could be on their own blog, or more likely, on some social media site. It makes sense. That‘s their home base and it‘s more useful to them to keep their words there. It‘s a shame, though. This fragmented conversation is

favicon of http://css-tricks.com

Intro to Hoodie and React

Let‘s take a look at Hoodie, the "Back-End as a Service" (BaaS) built specifically for front-end developers. I want to explain why I feel like it is a well-designed tool and deserves more exposure among the spectrum of competitors than it gets today. I‘ve put together a demo that demonstrates some of the key features of the service, but I feel the need to first set the scene for its use case. Feel free to jump over to the Intro to H

favicon of http://css-tricks.com

Empathy Prompts

Activities to help you develop empathy for the variety of people that use your thing. Eric Bailey: This project is geared towards anyone involved with making digital products. It is my hope that this reaches both: People who are not necessarily involved in the day-to-day part of the process, but who help shape things like budget, timeline, and scope, and People who work every day to help to give these products shape and form These prompts are

favicon of http://css-tricks.com

Methods to Organize CSS

Developer Ben Frain once remarked that it‘s easy to write CSS code, but it is hard to scale and support it. This article describes the set of solutions out there to deal with this problem. OOCSS OOCSS stands for object-oriented CSS. This approach has two main ideas: Separation of structure and design Separation of container and content Using this structure, the developer obtains general classes that can be used in different places. At th

favicon of http://css-tricks.com

Media Temple

Media Temple has always been huge supporters of the web design and development communities. They got some deals cookin‘ right now to celebrate the 20th anniversary of CSS itself. Funny to think this site is just about exactly half as old as its namesake. Over on their blog, Alex Rojas rounded up some highlights of those first 20 years, and I did similarly. I‘ve used Media Temple for hosting for this site, and dozens and dozens of oth

favicon of http://css-tricks.com

More Gotchas Getting Inline SVG Into Production-Part II

The following is a guest post by Rob Levin and Chris Rumble. Rob and Chris both work on the product design team at Mavenlink. Rob is also creator and host of the SVG Immersion Podcast and wrote the original 5 Gotchas article back in ‘14. Chris, is a UI and Motion Designer/Developer based out of San Francisco. In this article, they go over some additional issues they encountered after incorporating inline SVGs in to Mavenlink‘s flagshi

favicon of http://css-tricks.com

Transitioning Gradients

Keith J. Grant: In CSS, you can‘t transition a background gradient. It jumps from one gradient to the other immediately, with no smooth transition between the two. He documents a clever tactic of positioning a pseudo element covering the element with a different background and transitioning the opacity of that pseudo element. You also need a little z-index trickery to ensure any content inside stays visible. Gosh, I remember a time not so l

favicon of http://css-tricks.com

(Now More Than Ever) You Might Not Need jQuery

The DOM and native browser API‘s have improved by leaps and bounds since jQuery‘s release all the way back in 2006. People have been writing "You Might Not Need jQuery" articles since 2013 (see this classic site and this classic repo). I don‘t want to rehash old territory, but a good bit has changed in browser land since the last You Might Not Need jQuery article you might have stumbled upon. Browsers continue to implement new A

favicon of http://css-tricks.com

Net Neutraility

I‘m linking up a "call to action" style site here as it‘s nicely done and explain the situation fairly well. Right now, there are rules (in the United States) against internet providers prioritizing speed and access on a site-by-site basis. If they could, they probably would, and that‘s straight up bad for the internet. In other "good for the internet" news... does my site need HTTPS? Direct Link to Article Permalink Net Neutr

favicon of http://css-tricks.com

Musings on HTTP/2 and Bundling

HTTP/2 has been one of my areas of interest. In fact, I‘ve written a few articles about it just in the last year. In one of those articles I made this unchecked assertion: If the user is on HTTP/2: You‘ll serve more and smaller assets. You‘ll avoid stuff like image sprites, inlined CSS, and scripts, and concatenated style sheets and scripts. I wasn‘t the only one to say this, though, in all fairness to Rachel, she qualifie

favicon of http://css-tricks.com

Let‘s Talk About Speech CSS

Boston, like many large cities, has a subway system. Commuters on it are accustomed to hearing regular public address announcements. Riders simply tune out some announcements, such as the pre-recorded station stop names repeated over and over. Or public service announcements from local politicians and celebrities-again, kind of repetitive and not worth paying attention to after the first time. Most important are service alerts, which typically d

favicon of http://css-tricks.com