wired-elements - Collection of elements that appear hand drawn. Great for wireframes.

  •        40

Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look. The elements are drawn with enough randomness that no two renderings will be exactly the same - just like two separate hand drawn shapes.

https://github.com/wiredjs/wired-elements#readme
https://github.com/wiredjs/wired-elements

Dependencies:

@polymer/lit-element : ^0.6.2
@polymer/polymer : ^3.0.5

Tags
Implementation
License
Platform

   




Related Projects

wired-elements - Collection of custom elements that appear hand drawn

  •    TypeScript

Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look. The package (wired-elements) exports all components in the wired category. List of all wired elements can be found here.

lit - Lit is a simple library for building fast, lightweight web components.

  •    Javascript

Lit is a simple library for building fast, lightweight web components. At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive.

rough-notation - Create and animate hand-drawn annotations on a web page

  •    TypeScript

A small JavaScript library to create and animate annotations on a web page. Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration can be configured, or just turned off.

lit-element - LEGACY REPO

  •    TypeScript

LitElement is simple base class for creating fast, lightweight web components with lit-html. LitElement is now part of the Lit library monorepo. Lit 2 includes lit-html 2.x and LitElement 3.x.

lit-element-starter-ts - Sample component project using LitElement with TypeScript

  •    Javascript

This project includes a sample component using LitElement with TypeScript. This sample uses the TypeScript compiler to produce JavaScript that runs in modern browsers.


ui5-webcomponents - UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice

  •    Javascript

The UI5 Web Components are the new offering of UI5 to provide a set of reusable UI elements to you which can be used for your static web sites or for web application using any web framework of your choice with a minimalistic footprint. They allow you to create a consistent user experience aligned to the SAP Fiori Design Guidelines and incorporate the Fiori 3 design. Web Components are a set of features which allow to enhance the HTML vocabulary with custom HTML elements when the standard HTML elements are not sufficient (for example, a Button with an icon or a DatePicker). The custom HTML elements allow to share those features and qualities in a standard way. The complexity of HTML, CSS and components behavior is encapsulated behind a custom HTML element. The interaction with the custom HTML elements is done using the standard DOM API.

vaadin-grid - vaadin-grid is a free, high quality data grid / data table Web Component

  •    HTML

<vaadin-grid> is a free, high quality data grid / data table Web Component, part of the Vaadin components. The Vaadin components are distributed as Bower and npm packages. Please note that the version range is the same, as the API has not changed. You should not mix Bower and npm versions in the same application, though.

ReactiveElements - Allows to use React.js component as HTML element (web component)

  •    Javascript

Original children of a custom element is injected to component as this.props.children. In this case this.props.children is equal to "Hello world".

vaadin-core - An evolving set of free, open source web components for building mobile and desktop web applications in modern browsers

  •    HTML

Vaadin core components is the open source part of the Vaadin standards-based Web Components set, which contains high-quality user interface components commonly needed in modern mobile and desktop business web applications. For more information, see the Vaadin components README.

rough - Create graphics with a hand-drawn, sketchy, appearance

  •    Javascript

Rough.js is a light weight (~9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG.

rough - Create graphics with a hand-drawn, sketchy, appearance

  •    TypeScript

Rough.js is a small (<9 kB) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG.

roughViz - Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

  •    Javascript

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy. Use these charts where the communication goal is to show intent or generality, and not absolute precision. Or just because they're fun and look weird.

sketch-code - Keras model to generate HTML code from hand-drawn website mockups

  •    Python

SketchCode is a deep learning model that takes hand-drawn web mockups and converts them into working HTML code. It uses an image captioning architecture to generate its HTML markup from hand-drawn website wireframes. This project builds on the synthetically generated dataset and model architecture from pix2code by Tony Beltramelli and the Design Mockups project from Emil Wallner.

lion - Fundamental white label web component features for your design system.

  •    Javascript

They provide an unopinionated, white-label layer that can be extended to your own layer of components. Note: Our demos may look a little bland but that is on purpose. They only come with functional stylings. This makes sense as the main use case is to extend those components and if you do you do not want to override existing stylings.

lit-element - An ultra-light custom element base class with a simple but expressive API

  •    TypeScript

LitElement is currently in development. It's on the fast track to a 1.0 release, so we encourage you to use it and give us your feedback, but there are things that haven't been finalized yet and you can expect some changes. LitElement uses lit-html to render into the element's Shadow DOM and Polymer's PropertiesMixin to help manage element properties and attributes. LitElement reacts to changes in properties and renders declaratively using lit-html.

slim.js - Fast & Robust Front-End Micro-framework based on modern standards

  •    Javascript

Slim.js is a lightning fast library for development of native Web Components and Custom Elements based on modern standards. No black magic involved, no useless dependencies. It uses ES6+DOM native API to boosts up HTML elements with superpowers.

custom-elements - A polyfill for HTML Custom Elements v1

  •    Javascript

A polyfill for the custom elements v1 spec. API which might trigger custom element reactions in the DOM and HTML specifications are marked with the CEReactions extended attribute.

stencil - A Web Component compiler for building fast, reusable UI components and Progressive Web Apps 💎 Built by the Ionic Framework team

  •    TypeScript

Stencil is a simple compiler for generating Web Components and progressive web apps (PWA). Stencil was built by the Ionic Framework team for its next generation of performant mobile and desktop Web Components. Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. It takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that runs on both modern browsers and legacy browsers back to Internet Explorer 11.

skatejs - SkateJS is a web component library designed to give you an augmentation of the web component specs focusing on a functional rendering pipeline, clean property / attribute semantics and a small footprint

  •    Javascript

At its core, Skate is about creating Custom Elements. Skate provides a series of mixin functions that enable you to control what your component can do.Calling withComponent() gives you a Custom Element class constructor, which you can then extend to define your own elements.

vue-lit - Proof of concept custom elements "framework"

  •    Javascript

Proof of concept mini custom elements framework powered by @vue/reactivity and lit-html. The "framework" itself is just ~70 lines of code and the two libraries weigh in at ~6kb min + brotli combined. The API is almost identical to Vue Composition API, but defines native custom elements underneath.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.