CSS Tricks

Maya Benari: Accessibility is a crucial part of government product design. First, it’s the law. Federal agencies face legal consequences when they don’t meet accessibility requirements. Second, it affects us all. Whether you have a motor disability, you sprained your wrist playing dodgeball, you need a building to have a ramp for your wheelchair or stroller, or you literally just have your hands full, we all find ourselves unable to do certain things at different points in our lives. Accessible products are better products for everyone. But accessibility is hard: It comes across as a set of complex rules that are hard to follow. Not everyone feels confident that they’re doing it right. It’s difficult to prioritize alongside other work and project needs. How do you make sure you’re buildin...

NVD3.js is a JavaScript visualization library that is free to use and open source. It’s derived from the well-known d3.js visualization library. When used the right way, this library can be extremely powerful for everyday tasks and even business operations. For example, an online dashboard. We can use NVD3.js to compile data into a centralized space that visualizes the information in neat charts and graphs. That’s what we’re going to look at in this post. Making a dashboard with NVD3.js for the first time is daunting, but after this tutorial, you should have the required knowledge to get your hands dirty and start building something awesome. Personally, I have a passion for visualizations on the web. They are both beautiful and meaningful at the same time. Real-world use case: A data dash...

(This is a sponsored post.)In March and April 2018, Kentico conducted the first global report about the state of headless CMS market. We surveyed 986 CMS practitioners in 85 countries about their opinions, adoption, and plans for using headless CMS. The survey contains valuable industry insights into topics such headless CMS awareness, preferred headless CMS models, current and future uptake of the headless CMS approach, and much more, from leading industry players. Download your complimentary copy of the full report now. Direct Link to Article — PermalinkThe post ​The State of Headless CMS Market appeared first on CSS-Tricks. Source: CSS-tricks.com

The most FA of all the FAQs. Here's Laura Kalbag: Find what you love. Don’t worry about needing to learn every language, technique or tool. Start with what interests you, and carve your own niche. And then use your powers for good! And my own: Buy a domain name. Figure out how to put an HTML file up there. Isn’t that a powerful feeling? Now you’ve got table stakes. Build something. Definitely, go read other A Book Apart author answers because they are all great. My other favorite is just three words. Direct Link to Article — PermalinkThe post What bit of advice would you share with someone new to your field? appeared first on CSS-Tricks. Source: CSS-tricks.com

I enjoyed Bruce Lawson's talk on this holiest of wars. It's funny and lighthearted while being well researched and fairly portraying the good arguments on both sides. The post CSS-in-JS: FTW || WTF? appeared first on CSS-Tricks. Source: CSS-tricks.com

What comes to your mind when React 16 comes up? Context? Error Boundary? Those are on point. React 16 came with those goodies and much more, but In this post, we'll be looking at the rendering power it also introduced — namely, the ability to render children using Fragments and Array Components. These are new and really exciting concepts that came out of the React 16 release, so let’s look at them closer and get to know them. Fragments It used to be that React components could only return a single element. If you have ever tried to return more than one element, you know that you’ll will be greeted with this error: Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag. The way out of that is to make use of a wrapper div or span element that acts as the enclosing tag. So ...

You clever dog. You've rooted it out! It turns out when you build things with serverless technology you're still using servers. Pardon the patronizing tone there, I've seen one-too-many hot takes at this point where someone points this fact out and trots away triumphantly. And yes, because serverless still involves servers, the term might be a bit disingenuous to some. You could be forgiven for thinking that serverless meant technologies like web workers, which use the client to do things you might have otherwise done on a server and is where the term serverless was headed. Alas, it is not. What serverless really means: Using other people's servers instead of running your own. You're probably already doing that, but serverless takes it to another level where you have no control over the ...

It's not that Martijn Cuppens used User Agent sniffing, CSS hacks, or anything like that to make this quirk div. This is just a plain ol' <div> using the outline property a la: div { inset 100px green; outline-offset: -125px; } It looks different in different browsers because browsers literally render something differently in this strange situation. I happened upon Reddit user spidermonk33's comment in which they animated the offset to understand it a bit more. I took that idea and made this little video to show them behaving even weirder than the snapshots. Direct Link to Article — PermalinkThe post The div that looks different in every browser appeared first on CSS-Tricks. Source: CSS-tricks.com

If you want a gradient that changes as you scroll down a very long page, you can create a gradient with a bunch of color stops, apply it to the body and it will do just that. But, what if you don't want a perfectly vertical gradient? Like you want just the top left corner to change color? Mike Riethmuller, re-using his own technique from the CSS-only scroll indicator (A-grade CSS trickery), did this by overlapping two gradients. The "top" one is fixed position and sort of leaves a hole that another taller gradient peeks through from below on scroll. Direct Link to Article — PermalinkThe post Scrolling Gradient appeared first on CSS-Tricks. Source: CSS-tricks.com

Here’s a nifty post by Diana Mounter all about the design systems team at GitHub that details how the team was formed, the problems they've faced and how they've adapted along the way: When I started working at GitHub in late 2015, I noticed that there were many undocumented patterns, I had to write a lot of new CSS to implement designs, and that there weren’t obvious underlying systems connecting all the pieces together. I knew things could be better and I was enthusiastic about making improvements—I quickly discovered that I wasn’t the only one that felt this way. There were several folks working on efforts to improve things, but weren’t working together. With support from design leads, a group of us started to meet regularly to discuss improvements to Primer and prioritize work—this was...

Let’s use React, styled-components, and react-flip-toolkit to make our own version of the animated navigation menu on the Stripe homepage. It's an impressive menu with some slick animation effects and the combination of these three tools can make it relatively easy to recreate. This is an intermediate-level walkthrough that assumes familiarity with React and basic animation concepts. Our React guide is a good place to start. Here's what we're aiming to make: See the Pen React Stripe Menu by Alex (@aholachek) on CodePen. View Repo Breaking down the animation First, let's break down the animation into different parts so we can more easily reproduce it. You might want to check out the finished product in slow motion (use the toggles) so you can catch all the details. The white dropdown conta...