Tagged “css”
-
Different approaches to fluid typography and layouts
Fluid web page design can be more user-friendly, because it adjusts to the user's set up. There are several approaches to achieving this. -
Hiding side content in responsive design
A trick to hide content in specific responsive layout patterns without the need for media queries. But with a few gotchas. -
Use the child-element count in CSS
A little CSS trick to get a count of child elements on your parent selector. -
A nth-child CSS trick
A little CSS trick that allows you to use nth-child values in the CSS calc() function. -
Creating a stacked bar chart using only CSS
How to make an interactive stacked bar chart using only CSS and HTML -
Dark mode using progressive enhancement
Is it possible to create a light-dark switcher without JavaScript, that takes into account system preferences? Let’s find out. -
An ode to the CSS owl selector
One off the most beautiful CSS selectors is the Lobotomized Owl Selector of Heydon Pickering -
Scalable CSS architecture
In the last two years, I found that my CSS architecture was becoming too complex. But, utility-first frameworks were not doing it for me either. I needed a mix, I needed utility-enabled. Then came CUBE CSS and it all clicked. -
Horizontal centering in CSS
Horizontal centering is an ancient problem in CSS. With CSS Grid we are able enhance this layout pattern. But, this gives us other issues. Let's find a better solution. -
Binding CSS and JavaScript with HTML data-attributes
HTML data-attributes allow you to bind CSS and JavaScript more closely to each other. By utilizing this type of attribute, you can reduce the amount of JavaScript required for styling, and move this responsibility back to CSS. -
Modern CSS grid solutions to common layout problems
Responsive layouts are one of the more complicated problems in CSS. With the addition of CSS grids, we are now able to solve complex problems. -
Fluid interfaces using CSS
Fluid interfaces allow you scale elements of your website based on on the available space, without using media-queries