recentpopularlog in


« earlier   
CSS Scroll Snap — How It Really Works
Without this CSS property, if we’ll scroll the list, we need to be gentle with the scrolling and bring the item as close as we can to the boundaries of the container. But with this property, we just need to scroll it a just over the 50% and the browser will complete the scrolling till the position we wanted.
fridayfrontend  css  cssbasics  scroll-snap 
17 hours ago by spaceninja
Designing for Dark Mode
Today, almost all of the web content we run into doesn't take into account whether the browser and/or operating system are running in dark mode. We take this shortcoming for granted despite expecting most of our native apps, our code editors, and so on to look and feel properly themed to match our overall computing environment. When both the browser and the operating system are all dark, wouldn't it be nice if the web content we browse adapted to reflect that preference as well?
fridayfrontend  cssbasics  design  darkmode  prefers-color-scheme 
17 hours ago by spaceninja
To Grid or to Flex?
In this article I want to unpack when and where you might want to use Grid or flexbox, and some reasons for choosing one or the other. What surprised me about reading the responses in the thread was the number of people stating that they would only use Grid for page-level layout, and flexbox for everything else. If you take this as a rule, then you’re severely limiting yourself when it comes to Grid’s power. The main piece of advice I would give is to take every design individually, analyse the options available and don’t make assumptions about which technology you need. Here are some of the questions you could ask yourself when it comes to choosing a layout method.
fridayfrontend  css  cssbasics  grids  layout  cssgrid  flexbox 
17 hours ago by spaceninja
Quick! What's the Difference Between Flexbox and Grid?
There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They can stretch and shrink, they can center things, they can re-order things, they can align things... There are plenty of layout situations in which you could use either one to do what we need to do, and plenty of situations where one is more well-suited than the other. Let's focus on the differences rather than the similarities:
fridayfrontend  css  cssbasics  layout  grids  cssgrid  flexbox 
17 hours ago by spaceninja
HTML Tables: All there is to know about them
So how to make a table in HTML? When to use it and why? What are good HTML table examples? Today, we are going to answer these questions and more to help you understand everything there is to know about HTML tables.
fridayfrontend  cssbasics  html  tables 
17 hours ago by spaceninja
Do I have to add a dark mode now?
I thought it’d be a nice, albeit silly experiment to learn what is involved in designing a dark theme for my website. Turned out, it’s not as silly as I thought.
fridayfrontend  css  cssbasics  darkmode  prefers-color-scheme 
17 hours ago by spaceninja
Links that don’t go anywhere should be buttons
You use an anchor if you want to create an interactive element in the your site or app that takes you to another web resource. You do not use an anchor element to trigger scripting functionality. That’s what the button element is for.
fridayfrontend  cssbasics  html  accessibility  buttons  links 
17 hours ago by spaceninja
Position: stuck; — and a Way to Fix It
The shortcomings of position: sticky; when working with overflow — In this article, I want to explore the shortcomings of position: sticky; — specifically how we might be able to think up a creative technique when working with overflows, which causes frustration when working with the native solution.
fridayfrontend  css  cssbasics  sticky  overflow 
17 hours ago by spaceninja
Where Do You Nest Your Sass Breakpoints?
I love nesting my @media query breakpoints. It's perhaps the most important feature of Sass to me. But what if my element has several sub-elements and the breakpoint affects them as well? There are different approaches, and I'm never quite sure which one I should be doing.
fridayfrontend  css  cssbasics  sass  mediaqueries  nesting 
17 hours ago by spaceninja
Tips for making interactive elements accessible on mobile devices
WCAG was updated to version 2.1, which includes a whole new section on guidelines for mobile accessibility. There are several new mobile-specific rules, such as rule 1.3.4, that “content should not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.” In this article, I will cover some of the new guidelines that relate to interactive elements on a web page.
fridayfrontend  cssbasics  accessibility  wcag  mobile 
17 hours ago by spaceninja
The only reason your CSS fails
We are learning CSS the wrong way… There are four core concepts that I believe, if taught correctly, would save us from 99% of CSS issues: block formatting context, box model, stacking context, and the cascade (particularly specificity).
fridayfrontend  css  cssbasics  blocks  boxmodel  z-index  cascade 
17 hours ago by spaceninja
This or that? Component Names: index.js or Component.js
I’m not sure if you’re aware, but there are sometimes different ways to do the same thing. Crazy, right? As a consultant I get to see a lot of different codebases, and I try study other projects’ architecture in order to better understand this Brave New JavaScript World we’re living in.
fridayfrontend  javascript  cssbasics  components  names  namespacing  standards 
17 hours ago by spaceninja
Quick Note on high contrast mode
When testing websites and apps in Windows high contrast mode (HCM), there are two issues I’ve come across over again and again: HCM cares not for your ARIA roles, and background images are (mostly) ignored.
fridayfrontend  cssbasics  accessibility  highcontrastmode  contrast  backgrounds  aria 
17 hours ago by spaceninja
Skip links are important
“Skip links” are important. They allow keyboard-only users, sighted or not, to bypass large or repetitive blocks of content. You may have heard of them and wondered what the big deal is. Or your design team may have refused to implement one because they look “ugly”. But they are important, and they don’t have to break the design.
fridayfrontend  cssbasics  html  accessibility  skiplinks 
17 hours ago by spaceninja
How To Architect A Complex Web Table
Tables frequently appear on the web but aren’t easy to design and code. This illustrated guide explains the table anatomy and how to build a table, keeping in mind its future elaboration.
fridayfrontend  cssbasics  html  tables 
7 days ago by spaceninja
Revisiting the abbr element
All of that said, here’s my attempt at enhancing the <abbr> element and creating a tooltip experience that works for touchscreen, keyboard, and mouse. This solution isn’t perfect, as I discuss below under the limitations, but I wanted to make an attempt anyway :)
fridayfrontend  cssbasics  html  abbr  accessibility 
7 days ago by spaceninja
Slide an Image to Reveal Text with CSS Animations
Pretty neat little animation, right? It’s relatively subtle and acts as a nice enhancement to UI elements. For example, I could see it used to reveal explanatory text or even photo captions. Or, a little JavaScript could be used to fire the animation on click or scroll position to make things a little more interactive.
fridayfrontend  css  cssbasics  animation 
7 days ago by spaceninja
Form design: when to use the number input
You might think the number input is appropriate for the card number, expiry date, and CVC number — after all, they all consist of numbers. But it’s more complicated than that. By looking at what the spec says, what browsers do, and what users want, we can more easily determine when the number input is appropriate or not.
fridayfrontend  cssbasics  forms  html  numbers  inputs 
7 days ago by spaceninja
A Guide To CSS Support In Browsers
It can be frustrating when you want to use a feature and discover that it is not supported or behaves differently across browsers. In this article, Rachel Andrew details the different types of browser support issues, and shows how CSS is evolving to make it easier to deal with them.
fridayfrontend  css  cssbasics  support  supports  browsers 
7 days ago by spaceninja
Quick Tip: CSS Triangles
Making a triangle in CSS is quite a common UI task. If you want to build a tooltip or any dropdown menu, it is possible you need one.
fridayfrontend  css  cssbasics  shapes 
7 days ago by spaceninja

Copy this bookmark:

to read