I came across this article by Miguel Nunez about making a flexbox based gallery that’s well thought out and well written, but has one major flaw. The markup reeks of still thinking in the “table…

A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app. Use it with React, Vue, Svelte, or any other JavaScript application.

Imagine you need to create a two-column layout. Yes, the simplest one: a column on the left, a column on the right, and some gap in-between. There’s an obvious modern solution for that:

.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

A lot of things that required hacks, workaround and custom code are now supported natively in all major browsers. We take a look at them. Now that the security and support lifecycle for Internet…

A collection of 24 x 24 dp SVG spinners! (CSS & SMIL) - GitHub - n3r4zzurr0/svg-spinners: A collection of 24 x 24 dp SVG spinners! (CSS & SMIL)

A look at some useful and creative ways to style a list.

Custom markers with ::before #
Styling the ::before pseudo-element was a common way to create custom list markers before ::marker came along. But even now, it can allow us more flexibility, when we need it, for visually complex list styling.

Like ::marker, we can add our own custom bullet styles using the content attribute. Unlike using ::marker, we need to do some manual positioning, as we don't get the automatic benefits offered by list-style-position. But we can position it relatively easily with flexbox, and it does open up a greater number of possibilities for alignment. For instance, we could alternate the position of the marker:

The accent-color CSS property sets the accent color for user-interface controls generated by some elements.

Free loaders & spinners for your next project. Built with HTML, CSS and a soupçon of SVG. Available for copypasta or as a tree-shakeable React component library.

Simple CSS Spinners

2nd selection

See issues for defaults to work in IE11

aspect-ratio is a great example of a humble property that fills a long-awaited need in the CSS community. It’s simple to use and behaves in a way that respects content, without the need for any extra CSS.

Minify JS and CSS online, or include the minifier in your project for on-the-fly compression.

https://medium.com/ux-seo-sem-and-webdev-bitesized/top-7-css-minifiers-comparison-f90e28ea0e20

Normalize.css is a library that helps you build all elements more consistently when displayed in today’s popular browsers. I hope that the article will provide you with useful CSS libraries for web…

https://philipwalton.github.io/solved-by-flexbox/
https://tobiasahlin.com/spinkit/
https://connoratherton.com/loaders
https://github.com/AllThingsSmitty/css-protips
https://csslayout.io/close-button/
https://bansal.io/pattern-css
https://github.com/codrops/PageTransitions
https://lokesh-coder.github.io/pretty-checkbox/#basic-checkbox

Stephanie Eckles

A classless CSS framework that makes semantic HTML look good.

Learn the basics of web design in 4 minutes with this interactive tutorial.

A simple hand drawn HTML/CSS theme.

This stylesheet is heavily inspired by the Hand Drawn Vector UI Kit by Tony Thomas. I wanted a CSS theme that looked just like that, so I drew a bunch of similar components and got them working on the web.

https://medialoot.com/item/hand-drawn-vector-ui-kit/

HTML coverage using HTML Kitchen Sink.

https://github.com/dbox/html5-kitchen-sink/

The font is Short Stack.

In general, the attribute selector can target any attribute that's attached to an HTML element. By default, the selector is case sensitive and has a lower specificity than id's and classes.

CSS attribute ends with

Conversely to looking for matched at the start, we can also look at the very end of an attribute's value by useing the $ operator. We'd match something value but not value something. This is especially interesting because we know that files always have a certain extension and by passing the full name into a data-attribute, we'd be able to match elemenets that represent PDF documents like this a[href$="pdf"].

[data-attribute$="value"] {
  /* ... */
}

Create a set of lush, realistic CSS shadows.

https://www.joshwcomeau.com/css/introducing-shadow-palette-generator/

I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles!

The benefit of a CSS framework is that it helps you create a number of eye-catching layouts without having to start from scratch.

1. For Simple Needs, Use Class-less
   Some examples of classless frameworks include sakura, watercss, holiday.css, bamboo css, attricss, and basic.css.

2. To Build on Mobile, Opt for Very Lightweight
   Examples of very lightweight CSS include pure, chota, and milligram.

3. For an Open-and-Go Solution, Use General Purpose
   Examples of general purpose CSS include bootstrap, primer, foundation, and base.

4. For Niche Needs, Opt for Specialized
   An example of a specialized CSS is bojler, which is used for developing lightweight and responsive email templates. It’s no secret that developing email templates is a pain.

5. Looking to Skip Javascript? Material Design is the Way to Go
   Material design CSS frameworks include newer versions of UI controls such as check boxes, text fields, column layouts ,and typography. MD is can be used across browsers by anyone who wants to create more portable and usable web pages.

6. For Greater Attention to Detail Utility-Based Frameworks Are Best
   Some examples of utility-based frameworks include tachyons and tailwind CSS.

7. For Web App Development and Mobile-First, Look to Base/Reset/Normalize
   Some great examples of base css frameworks include sanitize.css, ress, minireset.css, normalize.css, modern normalize, and natural selection.

8. For More Flexibility, Toolkits Work Well
   An example of a toolkit CSS is Bourbon. Bourbon aims for clarity, is pure Sass and lacks visual opinion.

9. Honorable Mentions Are Those with Stalled Development
   Some examples of stalled development frameworks include flexbox grid, semantic UI, materialize, neat, wing, and propeller.