recentpopularlog in


« earlier   
A Complete Guide to Links and Buttons | CSS-Tricks
Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.
accessibility  buttons  css  html  links  guide 
28 minutes ago by fjordaan
Intrinsic Sizing In CSS
min-contant, max-content, fit-content
yesterday by ghiden
Frank Chimero · Redesign: Gridniking
I’m a big proponent of “just enough grid.” Grids are scaffolding, structures meant to help get the main building done. There is no need to overbuild, especially for this site. I am going to stay organized, but only just so.
fridayfrontend  css  cssbasics  grids  cssgrid  layout 
yesterday by spaceninja
Same HTML, Different CSS
I stumbled upon a project called “Evolution of Web Design”, which shows a web page about Nasa and space. The interesting thing is that there is a slider mimics how the design looked for each year (1993 - 2015). The idea is so inspiring and it challenged me to do the same, which is to get a component or a web page and try to do multiple designs for it without touching the HTML content.
fridayfrontend  css  cssbasics  csszengarden  headers 
yesterday by spaceninja
TIL: CSS Media Queries
Now we've come across the @media CSS rule but did you know that they are cool things you can do with it asides making your website responsive? The syntax of a media query is composed of an optional media type(such as print or screen) and any number of media feature expressions. In this article, I'll share some media features I previously didn't know about and hope you learn and share them too.
fridayfrontend  css  cssbasics  mediaqueries  prefers-color-scheme  reduced-motion  prefers-contrast  prefers-reduced-transparency  prefers-reduced-data 
yesterday by spaceninja
Quick developer tools tip: simulating dark/light colour mode | Christian Heilmann
Newer operating systems come with a dark/light mode option and also a “prefers reduced motion” mode. This also affects our products and we should test them in these modes to make sure there is no glaring problem. There is also a high contrast mode in Windows which is an accessibility feature that should be on our radar to test for.

Now, to avoid having to change your whole OS to test for this, browser developer tools have simulators for these modes.
fridayfrontend  css  cssbasics  darkmode  prefers-color-scheme  edge  chrome  devtools 
yesterday by spaceninja
Sticky Table of Contents with Scrolling Active States | CSS-Tricks
Say you have a two-column layout: a main column with content and a sidebar. Say it has a lot of content, with sections that requires scrolling. The sidebar column that is largely empty, such that you can safely put a position: sticky; table of contents over there for all that content in the main column. A fairly common pattern for documentation.
fridayfrontend  css  cssbasics  sticky  navigation 
yesterday by spaceninja
While You Weren't Looking, CSS Gradients Got Better | CSS-Tricks
Surprisingly, I recently discovered most people aren't even aware that double position for gradient stops is something that actually exists in the spec, so I decided to write about it.
fridayfrontend  css  cssbasics  gradients 
yesterday by spaceninja
Understanding CSS Grid: Grid Template Areas
In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use grid-template-areas to place items.
fridayfrontend  css  cssbasics  cssgrid  grids  layout  grid-template-areas 
yesterday by spaceninja
Doctype Declaration in HTML
The doctype is the first row in every HTML document, and we use it automatically. This one line tells the browser what to expect and how to process the information.
fridayfrontend  css  cssbasics  html  doctype 
yesterday by spaceninja
A Complete Guide to Links and Buttons
Let's take a look at the whole world of links and buttons, and all the considerations at the HTML, CSS, JavaScript, design, and accessibility layers that come with them. There are plenty of pitfalls and bad practices to avoid along the way. By covering it, we’ll have a complete good UX implementation of both elements.
fridayfrontend  css  cssbasics  buttons  links  javascript  accessibility 
yesterday by spaceninja
Designing a ripple effect for UI feedback
In this tutorial, we will learn how to create a simple micro-interaction for the popular ripple effect to provide users with touch feedback. This effect was made popular by Google’s Material Design and can be used on virtually any kind of surface users can interact with.
fridayfrontend  css  cssbasics  javascript  ripple  material 
yesterday by spaceninja
Styled Components vs. CSS Stylesheets
There’s a hot debate around standard CSS stylesheets vs. “CSS-in-JS” solutions when building in modern front-end frameworks. In this post, I’m going to weigh up the pros and cons of CSS vs. Styled Components and how it affects the way I write React components.
fridayfrontend  css  cssbasics  css-in-js  styled-components  emotion  react  javascript 
yesterday by spaceninja
Toward Responsive Elements
As developers, watching standards can be frustrating. We might learn of some new spec developing, some new features landing that you weren't even aware of - maybe many of these are even things you don't actually care much about. In the meantime, "Container Queries," clearly the single most requested feature in CSS for years, appears to be just... ignored. What gives? Why does the CSS Working Group not seem to listen? After all of these years -- why isn't there some official CSS spec at least?
fridayfrontend  css  responsive  containerqueries 
yesterday by spaceninja
What is CSS4?
If we want CSS4 to be a thing it is necessary to define it a little more. However, that does not mean it’s necessary to divide all existing CSS modules into CSS3 and CSS4 buckets. This article discusses these issues, and goes through some of the feedback to my original article.
fridayfrontend  css  css4  cssgrid  customproperties  variables  houdini 
yesterday by spaceninja

Copy this bookmark:

to read