Utiliser WebP:

• png : 477,8 KiB
• jpg : 103,9 KiB
• webp : 51,0 KiB
• webp : 40,3 KiB (avec flou gaussien appliqué de 0,5px)

Les services en lignes permettent de gagner quelques pourcentages grâces à des presets plus aggressifs.

• png : 171,1 KiB (-61%) via https://tinypng.com/
• jpg : 97,5 KiB ( -6%) via https://tinyjpg.com/
• webp : 49,5 KiB ( -3%) via https://ezgif.com/optiwebp
• webp : 38,8 KiB ( -4%) (avec flou gaussien appliqué de 0,5px)

Mdash is a new kind of UI library. It's 100% standards-based and it's tiny.

Mdash components are comprised of standard HTML, custom HTML, and Custom Elements. As such, Mdash works with any framework (or no framework) and works with all types of web projects: SSR, SPA, PWA, static site, and even popular email clients.

Only 6.8kB. It uses a minimal appearance but adds components that are used everywhere such as switch buttons-

It provides examples: https://siimple.xyz/examples

Also available on NPM for a 7.8kB minified and gzipped package.

This system makes it easy to build digital services that meet the needs of Californians.

Stylo is an open source WYSIWYG interactive editor for JavaScript. Its goal is to bring great user experience and interactivity to the web, for everyone, with no dependencies. Stylo is a Papyrs project.

Source code: https://github.com/papyrs/stylo

Make a wrapper for Vue 3?

Metallic look to HML elements.

Source code: https://github.com/MikaeI/metallicss (available as npm package)

A bootstrap similar library

Copy/Paste the most used media query

Our tools are the best, with features that impress

🎶

We build relationships, with developers we meet
And together, we make the product complete

An HTML and CSS only tree.
The final CSS-snippet is also available at the end.

It uses only <ul>, <li>,

Seamlessly visualize your JSON data instantly into graphs.

100 buttons that feature styles and hover effects you may not have seen elsewhere.

Micro CSS util class for applying inflated fluffy 3D claymorphism styles to elements. Fully customizable and extensible with CSS variables. SASS mixin is also included for even more styling options.

From the https://design.wonderflow.ai/, here are the Stories of each component.

Alternative to google fonts, if we must avoid to host the fonts...

Build HTML elements visually

Source code: https://github.com/components-ai/css.gui

Generate animations with the mouse :D

Github: https://github.com/panphora/animatize

Manual-writing styled forms with a CSS only file.

The font Short Stack should also be used. It is available as NPM package.

1. Le nombre de vente
2. La dernière vente
3. L'avis des clients
4. Le nombre de visiteurs sur la page de vente
5. La quantité limitée
6. La durée limitée

Cela repose sur deux principes:

• créer une forte valeur au produit ou service
• donner l'impression que le produit or l'offre associée va bientôt disparaître

Pour aller plus loin, le code en lui-même n’est peut-être pas si critique, mais ce que l’on a appris en le concevant et l’utilisant l’est bien davantage. C’est cette transmission qu’il est important de rendre possible au sein de l’équipe.

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Source code: https://github.com/htmlstreamofficial/preline

One status code, one http code.
Similar to Htto Status Cats... for dogs.

All in one resource that includes dozens of tools and utilities useful for web developers and programmers.

It seems well designed :)

Generate beautiful mesh gradients

Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.

Paper Prototype CSS is CSS framework that mimics paper prototyping, sort of like a handdrawn look but a little more ransom-note-ish, with the help of two informal-looking free fonts.

And the blog post related: https://shkspr.mobi/blog/2022/06/paper-prototype-css/

The design system of Goldman Sachs.