I think the folks building Tailwind are talented and nice people. But at a pure technical level, I simply don't like Tailwind. Whoever it was built for, it was not built for me.

• Reason 1: Tailwind promotes ugly-ass HTML.
• Reason 2: @apply is fundamentally incompatible and non-standard (and largely unnecessary).
• Reason 3: Tailwind's focus on design systems and tokens could mostly be replaced by CSS Custom Properties (aka variables)—which IS a standard.
• Reason 4: Tailwind forgets that web components exist.
• Reason 5: Finally, Tailwind encourages div/span-tag soup.

...using <div> and <span> tags everywhere in your markup is an anti-pattern. We live in a world where custom elements (aka <whatever-you-can-dream-of>) are fully supported and enabled by modern browsers.

Looking for a lighter framework for your next project? Here's a list of some of the best minimal CSS frameworks out there.

https://hakanalpay.com/bahunya/
Dark mode based on tacit

https://github.com/yegor256/tacit

https://purecss.io/
Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. It’s what you need, without the cruft.

🔗 https://picturepan2.github.io/spectre/index.html
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.

https://andybrewer.github.io/mvp/
MVP styles your root HTML elements, so you don’t need to learn a new CSS framework or naming conventions.
It’s like an amped up CSS reset that you can toss into any project to get decent styling.

https://newcss.net/
new.css is a classless CSS framework to write modern websites using only HTML.

https://github.com/oxalorg/sakura
Wonderful for people not really good or interested with design as sakura is nothing but a set of reasonable defaults

https://watercss.kognise.dev/
Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.

https://jenil.github.io/chota/
Magical 12 column grid
Comes with a handful of components & utilities

http://getskeleton.com/
You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has ~200 lines of custom CSS (half of which is the docking navigation).

CSS Animations is an amazing and powerful tool to make your website stand out among the competition. Learn how to do it and improve your user experience.

Back in the day, there was a gold-standard website layout that everyone strived to create, but that was notoriously difficult to get right…

I recently discovered an elegant solution to this problem using CSS Grid. In this post, we'll learn how it works!

There are lots of other things we can target beside viewport width. That might be screen resolution, device orientation, operating system preference, or even more among a whole bevy of things we can query and use to style content.

new.css

A classless CSS framework to write modern websites using only HTML. It weighs 4.8kb.

All it does is set some sensible defaults and styles your HTML to look reasonable. It's perfect for:

• A dead-simple blog
• Collecting your most used links
• Making a simple "about me" site
• Rendering markdown-generated HTML

• img is inline by default
• Difference between nth-child and nth-of-type

Dynamic centered layout

We all know margin: 0 auto to center a layout. Ideal for article pages, right? But what if you want elements like images to exceed the maximum width of the article?

*10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be. [Watch the Video]

Let’s quickly go over the basics. The default position value of any HTML element is static. Any element with the default value of static is a non-positioned element.

• Positioned elements with positive z-index values are placed in front of non-positioned elements.
• Positioned elements with negative z-index values are placed behind non-positioned elements.
• A z-index can be any positive (or) negative number including zero. It has no effect on a non-positioned element — position value of static.

Here is the key part - a child’s z-index has no effect outside its group. div3’s z-index determines its position in the stacking order only among its siblings and has no effect outside its group. This is the reason setting even a large value like 99999 to div3 won't place it in front of div1.

Hanna Laakso documents the problems for GOV.UK. This is what they landed on:

 <input type="text" inputmode="numeric" pattern="[0-9]*">

The inputmode attribute is pretty great, and we have a deep dive on that.

Phil Nash came to (almost) same exact conclusion, and blogged about improving the experience of a two-factor auth code input on the Twilio blog:

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

That last attribute is interesting and new to me. It means you get this super extra useful experience on browsers that support it:

CSS Comparison Functions (min(), max(), clamp()) become supported in Firefox on 8 April 2020, which means that they are now supported in all major browsers. Those CSS functions will provide us with ways to have dynamic layouts and more flexible design components. They can be used for container sizes, font-size, padding. and a lot more. Even more, web designers might need to think differently while designing layouts because of these exciting CSS functions.

You are probably already familiar with CSS box model for regular elements. Let’s begin with a similar “bird’s eye view” representation for the CSS Grid:

To solve that issue, we need to give the title a minimum font size that it can’t go below it. CSS calc() to the rescue!

.title {
font-size: calc(14px + 2vw);
}
The calc() CSS function will have a base 14px value, and it will add 2vw to it. With that in hand, the font-size value won’t become too small.

I’m not sure how I arrived at this rule, but I’m really glad I did and I would likely never ever change it. The basic premise is that you should try and define all your margins in one direction. This means always use margin-bottom to push items down the page, and margin-left to push them across the page. I’m going to focus mainly on margin-bottom throughout this article as it’s the most obvious to explain, but this can be applied to both directions (top/bottom, right/left).

Are you ready to learn how box alignment works for CSS Grid and Flexbox? This article is for you.

Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. But plenty of times I’ve opened up a web project and found that SVG assets could be made significantly smaller with some straightforward optimisations. In this article I’ll share my process for optimising SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web.

In the first article in this series, I took a look at how to create a grid container and the various properties applied to the parent element that make up your grid. Once you have a grid, you have a set of grid lines. In this article, you will learn how to place items against those lines by adding properties to the direct children of the grid container.

Learn how to bring animation to your web projects https://cssanimation.rocks