solid-blocks

KO | EN

gitlite — search

#javascript #python #hacktoberfest #llm #golang #android #deep-learning #docker #java #kubernetes #vue #pytorch #security #open-source

(★ 86)

UI building blocks for SolidJS.

solid-blocks 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Solid-Blocks

UI building blocks for [SolidJS](https://solidjs.com)

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

```shell
yarn
yarn dev
```

To use the components

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

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

solid-blocks

solid-blocks 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

solid-blocks

solid-blocks 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README