​​A set of common UI elements with a hand-drawn, sketchy look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

https://wiredjs.com/

#css #js

​​Have you ever wanted to stransform #json to #ts or #go struct? Maybe even to #kotlin or #rust.

Well, http://transform.tools allows you to do just that!

It is even not limited to json, but also works with #svg, #graphql, #css, and many other tools.

Using TailwindCSS with Vue functional components.

In this article, we identify potential pitfalls when using utility-first #css frameworks and how to avoid them. Most importantly, we find out how to use #vue functional components to create abstractions for repeating patterns like cards and headlines, for example.

https://markus.oberlehner.net/blog/reusable-functional-vue-components-with-tailwind-css/

​​Mint: The programming language for writing single page applications.
Mint has all the tools you need to write error free, easily readable and maintainable applications in record time.

Language features:

- Reusable components
- Styling
- Routing
- Global and local state handling
- Synchronous and asynchronous computations that might fail

Docs: https://www.mint-lang.com/
Playground: https://sandbox.mint-lang.com/

Personal opinion: I love programming languages. And I really respect people who build them. And I know that it is fun. But, a new language to color and move your buttons on web pages? Use #elm it has all the things you might need.

#js #css #html

​​Design tokens at your fingertips.

Classy-UI is CSS properties abstracted to design tokens. This abstraction does not only make your design consistent, but also discoverable and documented at your fingertips in the IDE.

Features:

- No runtime in production
- The application starts without a single line of CSS. Based on the API usage Classy-UI will automatically generate the CSS they represent
- Add decorators (pseudo selectors and media queries) directly on your tokens, and again Classy-UI will automatically build the necessary CSS
- Classy-UI completely gets rid of specificity issues
- When you write tokens you can search them right in the code. You also get documentation of what CSS the token produces, even without Typescript
- An excellent developer experience as your IDE writes the tokens for you, you just select them from the intellisense
- If you use invalid tokens Classy-UI will yell at you
- When adding themes that overrides tokens, they automatically become CSS variables
- In production Classy-UI will shorten all the CSS classnames, group media queries and themes, creating a highly optimized bundle

https://classy-ui.io/

#js #css #html

Interesting take on margin:

> We should ban margin from our components. Hear me out. Margin breaks component encapsulation. A well-built component should not affect anything outside itself. Margin makes reusability harder. Good components are usable in any context or layout.

#css #rant

> You’re creating a patient registration flow and your user is partway through the form wizard and needs more information on how to find and fill out their “insurance certificate number” in order to continue. Some users need to know what this means. Others need to know where to find it (hint: it’s on another piece of paper).

> You’ve come to a crossroads. Do you interrupt the flow? Add a page? A modal? How do you decide what to do?

This article offers a decision making framework: what component you should use and when.

#css

​​A minimalist stylesheet for #html elements.
No class names, no frameworks, just semantic HTML and you're done.

Example: https://andybrewer.github.io/mvp/mvp.html

https://github.com/andybrewer/mvp/

#css

pattern.css: #css only library to fill your empty background with beautiful patterns.

This library works with most of the frameworks including bootstrap. Supported by most browsers.

https://bansal.io/pattern-css

​​animate.css is a bunch of cool, fun, and cross-browser #css animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

https://github.com/daneden/animate.css

A ridiculously small responsive #css framework. lit is 395 bytes small.

Features:
- 12 Column Responsive Grid
- Typography for h1-h6, and body text
- Three types of buttons
- Cards
- Inputs
- Table Styles

https://github.com/ajusa/lit

​​A #css framework for building faithful recreations of operating system GUIs. XP.css is an extension of 98.css. A CSS file that takes semantic HTML and makes it look pretty. It does not ship with any JavaScript, so it is compatible with your frontend framework of choice.

https://botoxparty.github.io/XP.css/

​​Numl (nude elements) unity of design and code.

Your code is your design system.
Markup language to create modern high-quality interfaces with any look.

Features:
- A single language to describe styles and behaviour of your app
- Numl is not bound to the framework and is based on modern web standards, and also uses code generation techniques, which allows you to use the most advanced technologies and practices, as well as update them, updating the design system, rather than rewriting your entire codebase
- Numl can be integrated with vue.js, react, angular, and svelte
- With Numl you will be able to create high-quality web interfaces with the power of a small team of frontend engineers with the middle level of expertise

https://numl.design/

#js #css

​​Tabler Icons: 558 Fully customizable free SVG icons.

https://tablericons.com

#css #html

​​Flipping how we define typography in #css.

Features:
- It uses font metadata to crop space from text nodes above capital letters and below the baseline.
- It adjusts font-size so that the height of capital letters is a multiple of your grid.

https://seek-oss.github.io/capsize/

#html

​​The adaptive interface system for modern web experiences by Microsoft.

Features:
- Create reusable UI components based on web component standards.
- Use our standard library of pre-built web components in your apps.
- Choose between two adaptive design systems: Fluent Design and FAST Frame.
- Build your own design system without re-implementing component logic.
- Integrate with any front-end framework or build system.

FAST is a collection of JavaScript packages centered around web standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development.

Have you ever needed a reusable set of UI components that you could drop into your app and have an amazing experience? That's FAST.

Have you ever needed to create your own components, and share them across your company, including across groups that use different, incompatible front-end frameworks? That's FAST.

Have you ever needed to implement a branded experience or a design language like Microsoft's Fluent UI or Google's Material Design? That's FAST.

Have you ever wanted to improve your app's startup time, render speed, or memory consumption? That's FAST.

Have you ever wanted to adopt more web standards and build your site or app on a native web foundation that's immune to the shifting sands of the modern JavaScript front-end landscape? That's FAST.

https://github.com/microsoft/fast

#ts #html #css

​​Futuristic Sci-Fi and Cyberpunk graphical user interface framework for web apps

Arwes is a web framework to build user interfaces for web applications based on futuristic science fiction and cyberpunk styles, animations, and sound effects. The concepts behind are opinionated and try to inspire advanced space technology and alien influence. It is built on top of #react, JSS, Anime, and Howler.

https://github.com/arwes/arwes

#js #css #html

​​The modern #css in #js styling library: near-zero runtime, server-side rendering, multi-variant support, and a best-in-class developer experience.

Features:
- Performant: Stitches avoids unnecessary prop interpolations at runtime, making it significantly more performant than other styling libraries.
- Lightweight: Both @stitches/core and @stitches/react libraries combined weigh in at around 6.5kb gzipped.
- Server-Side Rendering: Stitches supports cross-browser server-side rendering, even for responsive styles and variants.
- Variants: Variants are a first-class citizen of Stitches, so you can design composable component APIs which are typed automatically.
- Theming: Define multiple themes with CSS variables, then expose them to any part of your app.
- Developer experience: With a fully-typed API, token-aware properties, and custom utils, Stitches provides a fun and intuitive DX.
- Critical Path CSS: Stitches only injects the styles which are actually used, so your users don't download unnecessary CSS.
- Specificity. No more specificity issues due to the atomic output. Even extended components (via the as prop) won't contain duplicate CSS properties.
- Polymorphic as prop: Included in Components returned from the styled function.
- Easy overrides: Stitches provides a css prop, which allows style overrides to be applied in the consumption layer.

https://stitches.dev/

​​Generate color scheme from photos and use them in #css.

Upload your image and our tool will generate the right palettes for you.
Best with TailwindCSS.

https://palette-generators.vercel.app/

#html #css

​​Beautiful colour gradients for design and code.

uiGradients is a community contributed collection of beautiful multi-color #css gradients. This is an effort to give back to the community, by the community. Hopefully this will help you draw inspiration and serve as a resource for picking gradients for your own projects.

https://uigradients.com

#css only library to apply color filters.

Features:
- Only CSS. No JavaScript!
- ~1KB minified and gzipped!
- Supports all modern browsers
- Built with SCSS.
- Hover support.

https://github.com/bansal/filters.css