Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

For the best results using Bulma, it's recommended to use the control element as often as possible.

<div class="field">
  <label class="label">Username</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-success" type="text" placeholder="Text input" value="bulma">
    <span class="icon is-small is-left">
      <i class="fas fa-user"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
  <p class="help is-success">This username is available</p>
</div>

Materialize is a modern responsive CSS framework based on Material Design by Google.

When I look around the web, most of the shadows I see are fuzzy grey boxes. It doesn't have to be this way, though! CSS gives us the tools to create rich, lush, lifelike shadows. In this tutorial, I'll show you how.

If you ever wanted to create triangles using CSS, you probably found code samples on stack-overflow or css-tricks. But how do they really work ? Understanding the process behind creating triangles…

https://github.com/kenreilly/css-hover-menu-demo

This project demonstrates how to build various hover menus in pure HTML/CSS.

Examples include:
Standard basic hover menu
Hover menu with nested menus
Radial "pie" menu

In this modern era of web development, we don’t really need a heavy-handed reset, or even a reset at all, because CSS browser compatibility issues are much less likely than they were in the old IE 6 days. That era was when resets such as normalize.css came about and saved us all heaps of hell. Those days are gone now and we can trust our browsers to behave more, so I think resets like that are probably mostly redundant.

https://github.com/andy-piccalilli/modern-css-reset

If you want to make text better stand out against a background image, there’s a little trick: You can use a CSS linear-gradient overlay with a certain opacity on top of the image to improve color contrast.

How to determine the opacity to use for the overlay? The Optimal Overlay Finder helps you find out. You upload an image, enter your text and choose your overlay and text colors, and the tool shows you a preview of what the overlay looks like when applied to your image, as well as the optimal overlay opacity.

https://twitter.com/addyosmani/status/1365735686838493187

Instead of using “Disabling” selectors, you should focus on writing “Enabling” selectors.

a:not(:last-child) {
  margin-bottom: 1rem;
}

or

a + a {
  margin-top: 1rem;
}

Learn how to handle text over images in CSS by taking accessibility in mind

X 0
Y 5
Blur 12
Alpha 8%
Colro #004365

Learn what it takes to ensure your buttons or button-styled links have accessible contrast across all states and surfaces, then use the generator to check and adjust your button palette.

A Free Gallery of Fantastic and Unique CSS Gradients.

2 — Text tooltips

https://codepen.io/beforesemicolon/pen/BaKLeRL

6 — Extend the clickable area

The following example simply extends the type circle dot button click area by 2(two) by positioning a pseudo-element on top and centered.

8 — Frosted glass effect

.container {
   background-color: rgba(255, 255, 255, .15);
   backdrop-filter: blur(5px);
}

9 — Image grid with random height (Mansory Layout)

This is the famous Pinterest layout that you can use the old column property to accomplish quite easily.

10 — Math with Calc

Nothing in this world requires no math and the CSS calc function is magical.

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