​​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