CSS

20
Oct

Hexatope

Posted by | No Tags | CSS

It was awesome to hear Charlotte Dann on CodePen Radio the other day, who is Kickstarting a new jewelry business. The idea is that you draw your own jewelry (everything you draw looks awesome because it’s on this interesting hexagon grid) and then it gets actually made. This tying together of her passions sprang to life on CodePen. Direct Link to Article — Permalink Hexatope is a post from CSS-Tricks Source: CSS Tricks

Read More
20
Oct

Breaking down CSS Box Shadow vs. Drop Shadow

Posted by | No Tags | CSS

Drop shadows. Web designers have loved them for a long time to the extent that we used to fake them with PNG images before CSS Level 3 formally introduced them to the spec as the box-shadow property. I still reach for drop shadows often in my work because they add a nice texture in some contexts, like working with largely flat designs. Not too long after box-shadow was introduced, a working draft for CSS Filters surfaced and, with it, a method for drop-shadow() that looks a lot like box-shadow at […]

Read More
19
Oct

MDN Product Advisory Board

Posted by | No Tags | CSS

We all know and love MDN for already being the best documentation for web features out there. It looks like it’s poised to get even better with Google and Microsoft both joining a new board. Mozilla’s vision for the MDN Product Advisory Board is to build collaboration that helps the MDN community collectively maintain MDN as the most comprehensive, complete, and trusted reference documenting the most important aspects of modern browsers and web standards. Interesting none of them mentioned WebPlatform, the previous attempt at this that kinda fizzled out. This […]

Read More
19
Oct

5 Tips for Starting a Front-End Refactor

Posted by | No Tags | CSS

For the last two weeks, I’ve been working on a really large refactor project at Gusto and I realize that this is the first time that a project like this has gone smoothly for me. There haven’t been any kinks in the process, it took about as much time as I thought it would, and no-one appears to be mad at me. In fact, things have gone almost suspiciously well. How did this happen and what was the issue? Well, we had a problem with how our CSS was organized. […]

Read More
19
Oct

Sponsor: Media Temple

Posted by | No Tags | CSS

(This is a sponsored post.) Media Temple is my web host here at CSS-Tricks. I still remember what it was like buying my first web hosting, pointing a domain name to it, FTPing into that server, and having the files I put there appear in the web browser. Powerful stuff, kids. Watch out or you might try to turn it into a career! I’ve upgraded my server a few times since then, but it’s still a pretty standard grade Media Temple server that happily hosts this site with little trouble. […]

Read More
17
Oct

Naming Things In CSS Grid Layout

Posted by | | Coding · CSS · CSS Grid

    When first learning how to use Grid Layout, you might begin by addressing positions on the grid by their line number. This requires that you keep track of where various lines are on the grid, and also be aware of the fact the line numbers reverse if your site is displayed for a right-to-left language. Built on top of this system of lines, however, are methods that enable the naming of lines and even grid areas. Using these methods enables easier placement of items by name rather than […]

Read More
01
Oct

Template Literals are Strictly Better Strings

Posted by | No Tags | CSS

Nicolás Bevacqua wrote this a year ago, and I’d say with a year behind us he’s even more right. Template literals are always better. You don’t have to screw around with concatenation. You don’t have to screw around with escaping other quotes. You don’t have to screw around with multiline. We should use them all the time, and adjust our linting to help us develop that muscle memory. Besides the few things you can’t use them for (e.g. JSON), there is also the matter of browser support. It’s good, but […]

Read More
29
Sep

Turning Text into a Tweetstorm

Posted by | No Tags | CSS

With tongue firmly in cheek, I created this script to take a chunk of text and break it up into a tweetstorm, for “readability”. Sort of like the opposite of something like Mercury Reader. If the irony is lost on you, it’s a gentle ribbing of people who chose Twitter to publish long-form content, instead of, you know, readable paragraphs. See the Pen Turning Text into a Tweetstorm by Chris Coyier (@chriscoyier) on CodePen. It might be fun to look at how it works. First, we need to bust up […]

Read More
29
Sep

CSS Grid PlayGround

Posted by | No Tags | CSS

Really great work by the Mozilla gang. Curious, as they already have MDN for CSS Grid, which isn’t only a straight reference, they have plenty of “guides”. Not that I’m complaining, the design and learning flow of this are fantastic. And of course, I’m a fan of the “View on CodePen” links 😉 There are always lots of ways to learn something. I’m a huge fan of Rachel Andrew’s totally free video series and our own guide. This also seems a bit more playground-like. Direct Link to Article — Permalink […]

Read More
29
Sep

iOS 11 Safari Feature Flags

Posted by | No Tags | CSS

I was rooting around in the settings for iOS Safari the other day and stumbled upon its “Experimental Features” which act just like feature flags in any other desktop browser. This is a new feature in iOS 11 and you can find it at: Settings > Safari > Advanced > Experimental Features Here’s what it looks like today: Right now you can toggle on really useful things like Link Preload, CSS Spring Animations and display: contents (which Rachel Andrew wrote about a while ago). All of which could very well […]

Read More