Wired Elements

Wired-elements هي مكتبة مكونات ويب مرسومة باليد توفر مجموعة من عناصر HTML المنمقة لبناء الهياكل السلكية (wireframes) والنماذج الأولية. تعمل كإطار عمل لواجهة مستخدم للهيكلة السلكية يتيح إنشاء نماذج أولية منخفضة الدقة بجمالية تخطيطية يدوية.

توفر المكتبة مكونات لتصميم الويب المرسوم باليد والنماذج الأولية السريعة لواجهة المستخدم. تم تصميم هذه العناصر لدعم الهيكلة السلكية منخفضة الدقة لتخطيط واجهات المستخدم واختبار التخطيطات قبل التطوير عالي الدقة.

يستخدم المشروع بنية مكونات ويب مع رسومات متجهة قائمة على SVG للحفاظ على مظهر مرسوم باليد متسق. ويدعم التكامل في أطر عمل JavaScript مختلفة ويستخدم متغيرات CSS لتصميم سمات سمك الخط والألوان.

Features

Hand-Drawn - Provides a collection of pre-built custom elements with a sketched, hand-drawn appearance for wireframing.
SVG-Based Vector Rendering - Uses SVG-based vector graphics to render a consistent hand-drawn aesthetic across various screen sizes.
UI Prototyping - Provides tools for rapidly constructing user interface layouts to validate design ideas without polished styling.
Wireframing Component Frameworks - Provides a set of interface components specifically designed to create low-fidelity prototypes that look like manual sketches.
Wireframing Software - Enables the creation of low-fidelity structural blueprints and sketches to plan user interfaces.
Web Component Libraries - Encapsulates styles and behavior within custom HTML elements for framework-agnostic integration into any web project.
CSS Variable Theming - Provides a theming system using CSS variables to customize stroke thickness and colors across all components.
Shadow DOM Utilities - Uses Shadow DOM to isolate hand-drawn styles and prevent CSS leakage between components and the global scope.
Frontend Component Integration - Allows for the rapid integration of pre-styled interface components into web projects to speed up layout prototyping.
UI Component Frameworks - Provides a set of pre-built user interface elements that can be integrated into various JavaScript frameworks.
Component Libraries - Hand-drawn style UI components.

سجل النجوم

rough-stuffwired-elements

Name: rough-stuff/wired-elements
Author: rough-stuff

View on GitHub

10,802 نجوم338 تفرعاتTypeScriptMIT3 مشاهداتwiredjs.com

Wired Elements

Features

Hand-Drawn - Provides a collection of pre-built custom elements with a sketched, hand-drawn appearance for wireframing.
SVG-Based Vector Rendering - Uses SVG-based vector graphics to render a consistent hand-drawn aesthetic across various screen sizes.
UI Prototyping - Provides tools for rapidly constructing user interface layouts to validate design ideas without polished styling.
Wireframing Component Frameworks - Provides a set of interface components specifically designed to create low-fidelity prototypes that look like manual sketches.
Wireframing Software - Enables the creation of low-fidelity structural blueprints and sketches to plan user interfaces.
Web Component Libraries - Encapsulates styles and behavior within custom HTML elements for framework-agnostic integration into any web project.
CSS Variable Theming - Provides a theming system using CSS variables to customize stroke thickness and colors across all components.
Shadow DOM Utilities - Uses Shadow DOM to isolate hand-drawn styles and prevent CSS leakage between components and the global scope.
Frontend Component Integration - Allows for the rapid integration of pre-styled interface components into web projects to speed up layout prototyping.
UI Component Frameworks - Provides a set of pre-built user interface elements that can be integrated into various JavaScript frameworks.
Component Libraries - Hand-drawn style UI components.

بدائل مفتوحة المصدر لـ Wired Elements

مشاريع مفتوحة المصدر مشابهة، مرتبة حسب عدد الميزات المشتركة مع Wired Elements.

wiredjs/wired-elements
wiredjs/wired-elements
10,800عرض على GitHub
Wired Elements is a hand-drawn web component library and custom element UI kit. It provides a set of low-fidelity visual building blocks designed to produce a rough, non-polished aesthetic for early-stage design iterations. The framework enables the creation of rapid UI prototypes, low-fidelity wireframes, and conceptual UX mappings. It uses a sketched appearance to help focus iterations on layout and functionality rather than final visual polish. The library utilizes SVG-based path rendering and web component encapsulation to deliver its hand-drawn style. Visual states are managed through e
TypeScript
عرض على GitHub10,800
shoelace-style/shoelace
shoelace-style/shoelace
13,860عرض على GitHub
Shoelace is a web component UI library consisting of a suite of accessible, framework-agnostic user interface elements. It provides a collection of custom element components and reusable HTML tags that encapsulate style and behavior to work across any JavaScript framework or plain HTML pages. The system is designed as a themable UI component system, utilizing CSS variables to manage visual themes and dark mode support. This allows for the implementation of custom design systems and a consistent visual language across web environments. The library covers broader capabilities in accessible int
TypeScript
عرض على GitHub13,860
franken-ui/ui
franken-ui/ui
2,587عرض على GitHub
This project is a design system toolkit and component library that provides a framework-agnostic approach to building web interfaces. It centers on an HTML-first development model, utilizing standard markup and utility-based CSS classes to construct consistent, responsive layouts. The library is built upon the UIkit 3 framework, allowing for the integration of pre-styled interface elements while maintaining control over the underlying markup structure. It further extends these capabilities through web component encapsulation, using custom elements to provide modular and isolated interface log
TypeScriptcomponentcssdesign-system
عرض على GitHub2,587
lukilabs/beautiful-mermaid
lukilabs/beautiful-mermaid
7,187عرض على GitHub
This project is a renderer and theme engine for Mermaid.js that converts diagram syntax into styled SVG graphics and ASCII text. It provides a type-safe diagram editor and a pipeline for transforming diagram source code into scalable vector graphics or plain text visuals. The system features a dedicated theme engine that maps editor colors and CSS variables to diagram elements. It enables dynamic diagram theming through CSS custom properties for real-time color updates and supports index-based styling to override the appearance of specific nodes and edges. The tool covers a range of visualiz
TypeScript
عرض على GitHub7,187

عرض جميع البدائل الـ 30 لـ Wired Elements

الأسئلة الشائعة

ما هي وظيفة rough-stuff/wired-elements؟

ما هي الميزات الرئيسية لـ rough-stuff/wired-elements؟

الميزات الرئيسية لـ rough-stuff/wired-elements هي: Hand-Drawn, SVG-Based Vector Rendering, UI Prototyping, Wireframing Component Frameworks, Wireframing Software, Web Component Libraries, CSS Variable Theming, Shadow DOM Utilities.

ما هي البدائل مفتوحة المصدر لـ rough-stuff/wired-elements؟

تشمل البدائل مفتوحة المصدر لـ rough-stuff/wired-elements: wiredjs/wired-elements — Wired Elements is a hand-drawn web component library and custom element UI kit. It provides a set of low-fidelity… shoelace-style/shoelace — Shoelace is a web component UI library consisting of a suite of accessible, framework-agnostic user interface… franken-ui/ui — This project is a design system toolkit and component library that provides a framework-agnostic approach to building… lukilabs/beautiful-mermaid — This project is a renderer and theme engine for Mermaid.js that converts diagram syntax into styled SVG graphics and… zdhxiong/mdui — mdui is a framework-agnostic UI library and design system based on Material Design 3 standards. It provides a… argyleink/open-props — Open Props is a CSS custom property library and design token set providing reusable variables for colors, typography,…