Chris Coyier

4 Comments

There are special superset number characters that are sometimes perfect for footnotes. Here they are:

¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹

I generally prefer to superscript the number myself, like:… Read article

footnotes gutenberg

Link February 19, 2020

monica.css

Monica Dinculescu:

I don’t want every possible padding and margin and colour and flexbox configuration in the world. I just want the ones that I know I end up using in every project. So here is monica.css: my very own CSS framework, which I copy paste at the beginning of every CSS file and take it from there.

I love it when people make their own CSS starter. I like Sanitize, but even that feels like a … Read article

Our Notes / Read at meowni.ca

Link February 19, 2020

Same HTML, Different CSS

Ahmad Shadeed covers the idea of a card component that has a fixed set of semantic HTML with some BEMy classes on it. There is a title, author, image, and tags. Then he redesigns the card into five totally different designs without touching any of the HTML just the CSS.

If this is an ah-ha moment for you, awesome! It might be worth knowing that this exact concept essentially excited an entire generation of front-end developers, in no small part … Read article

Our Notes / Read at ishadeed.com

layout

Article February 18, 2020

Centering a div That Maintains Aspect-Ratio When There’s Body Margin

Author

1 Comment

Andrew Welch had a little CSS challenge the other day to make an ordinary div:

• centered vertically + horizontally
• scales to fit the viewport w/ a margin around it
• maintains an arbitrary aspect ratio
• No JS

There's a video in that tweet if it helps you visualize the challenge. I saw Paul Bakaus blogging about this the other day, too, so it's a thing that comes up! … Read article

aspect ratio centering

Link February 18, 2020

Solving Sticky Hover States with @media (hover: hover)

Mezo Istvan does a good job of covering the problem and a solution to it in a blog post on Medium. If you tap on something that has a :hover state but you don't leave the page then, on a mobile device, there is a chance that :hover state "sticks." You'll see this with stuff like jump-links used as tabs or buttons that trigger on-page functionality.

Our Notes / Read at medium.com

hover media queries

Article February 18, 2020

Web Component for a Code Block

Author

3 Comments

We'll get to that, but first, a long-winded introduction.

I'm still not in a confident place knowing a good time to use native web components. The templating isn't particularly robust, so that doesn't draw me in. There is no state management, and I like having standard ways of handling that. If I'm using another library for components anyway, seems like I would just stick with that. So, at the moment, my checklist is something like:

Not using any other JavaScript

… Read article

Article February 17, 2020

A Complete Guide to Data Attributes

Author

9 Comments

attribute selectors attributes data attributes HTML

Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.

Link February 17, 2020

Blame the implementation, not the technique

I'm not sure we've gotten much better at this since Tim Kadlec wrote this in 2012:

Stop me if you’ve heard this one before.
“Responsive design is bad for performance.”
“User agent detection is bad. Don’t segment the web.”
“Hybrid apps don’t work as well as native apps.”
“CSS preprocessors shouldn’t be used because they create bloated CSS.”

... Find out for yourself if the tool is really where the blame should be placed.

I'm sure there is some psychological … Read article

Our Notes / Read at timkadlec.com

Link February 16, 2020

Listen to your web pages