Solid-Blocks

UI building blocks for SolidJS

Core concepts

Valuable components instead of components without added value

Wrapping elements like headers, text, or images in custom Components is just wasteful. Components will only be provided if they have added value over their native elements. The added value may be

user experience
accessibility
developer experience
performance

If none of these advantages can be provided, it is preferable to use native HTML elements or SolidJS' abilities like Portal effectively.

Components with style instead of styled components

Directly using CSS is frowned upon nowadays, but not rightfully so. Well crafted CSS will easily outperform styled components. It should do so with

minimal bleeding (class prefix sb-[component], CSS reset, basic styles, theme variables)
semantic class names, i.e. .primary.sb-button
careful consideration of a11y
works as much as possible in non-JS environments (SSR)
theme-able, dark mode, inline mode switch possible
TODO: responsive layout

Usage

yarn
yarn dev

To use the components

import { Accordion, AccordionHeader } from "solid-blocks";

const MyApp = () => {
  return (
    <Accordion>
      <AccordionHeader>Accordion</AccordionHeader>
      <p>Hidden</p>
    </Accordion>
  );
};

milahu/solid-blocks

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Languages

Error
Looks like something went wrong!