Hello.
This week I came across a great approach when using CSS Variables and working it into animations on your site, especially when it comes to supporting the reduced motion media query.
The SCSS looks like this....
:root {
--duration: 1;
@media (prefers-reduced-motion: reduce)
{
--duration: 0;
}
}
Then you can use the CCS Variable within a CSS calc() function to set the transition speed. If the user has prefers reduced motion set to reduce then you set the transition speed to zero.
.element {
transition: all calc(var(--duration) * 0.5s) ease-in-out;
}
.other-element {
transition: width calc(var(--duration) * 0.2s) ease-in-out;
}
Here's a codepen, but it's all thanks to this tweet. | | WP Migrate DB Pro is literally the best plugin available for Wordpress for anyone that wants to do some local development or content creation. I use it for writing content on trains and plans with patchy wifi and it's so worth the money it's not funny. Take advantage of this deal today.
Get 20% off any purchase today.
| | Articles If you're looking to start designing Design Systems then this is a great place to start. Following up from this article are a number of step by step articles on creating your very own Design System
Creating analogies for Atomic Design so that you can explain your approach to this method through a way that someone is going to understand.
Speed index is that bizarre number that you get when running your sites through a performance test (like web page test for example). This article goes into some detail about how this number is calculated, and some of the ways you can drop that number down.
Chris posed a question this week on what would you deliver to a client that wants a website with no changes at all that will still look good in ten years time.
This article gained quite a bit of traction over the period of a week and as a result, or a complete coincidence (more likely) Apple have moved Service Workers from "Under Consideration" to "In Development".
"Here's an early version of a CSS VR prototype I've been working on. I learnt a lot making this."
Tutorials Making Augmented Reality a reality on the web.
In theory, you could use viewport units to scale the entire website layout relative to the viewport width. Of course, this does not work for most websites. But there are edge cases where you need a layout that is fixed, but also relative to the viewport width.
Learn how to do a little more with CSS Custom Properties by updating it with Javascript. This is a simple color picker example, but other examples are included which increase in complexity
Webfonts are a tricky thing to get right — the usual formula is: attractive visuals, good performance & reliable functionality (pick two). In this episode, see how you can get all three by properly employing a finely-tuned fallback.
Study: Digital Asset Management (DAM) unites creative teams to develop omnichannel consistency. Download the report to learn more.
// sponsored
Tools & Resources A one-page questionnaire from Brad Frost to help your team establish effective frontend guidelines so that you can write consistent & cohesive code together.
a back to the basics CSS starter kit
Get off to a flying start as a remote team with these mighty-fine tools that are tried and tested by the Hanno team.
In this talk, Nathan will cover 12 lessons that he has learned when working on primary buttons, secondary buttons, and a whole host of other button types in an emerging system.
Have a great weekend and I'll see you next Friday!
Cheers,
Justin. | | | |
No comments:
Post a Comment