100DaysOfCode: Day 04, UI Design with Knott JS + Weavv CSS

louislow81 / 100DaysOfCode

The 100 Days of Code with HTML, WEAVV CSS, and Vanilla.JS or sometime use Knott.JS to create Web Components

louislow81 / knott.js

A tiny Virtual DOM web component and styling library for the basic web.

A tiny Virtual DOM web component and styling library for the basic web.

Introduction

Knott.JS is a tiny Virtual DOM JavaScript library for creating object-based web components it's called virtual nodes with very basic necessary features to build a simple web application or website.

Menu

• Create Element
• Virtual Node
• Create Component
• Import Component
• Component Properties
• Event Listener
• Mount Component
• UnMount Component
• Data Binding
• Iteration
• Show/Hide Component
• DOM Styling
• Service Worker

---

Web Component

craft

Use craft() to create virtual nodes commonly everywhere in the project. It takes a selector as a new element, props as attributes, text as string to put on the document, html to add custom non-virtual-node element, optional actions as an event listener, tasks as custom function calls, and expands the array of children elements in the same node with expand: [...]. Read more details below.

import { craft } from "knott";
craft(
  selector,

…

View on GitHub

weavv / weavv-css-documentation

The official WEAVV CSS documentation website

WEAVV CSS Documentation

Read the official documentation

Developer Tools

• WEAVV Playground - Online code editor for testing and prototyping UI design with WEAVV.
• WEAVV CLI - Create empty project on-the-go with example template, written with Vanilla JS web component. Optional to use HTML inline CSS class or to use SASS with @extend directive to extract WEAVV CSS classes in semantic way.

Features

• Breakpoints
• Dark/Light Mode
• Variants
• Color Palette
• Gradient Presets
• Custom Gradient
• Animations
• Filters
• Fluids
• Orientation
• Plugin API

Build

clone the repository,

$ git clone https://github.com/weavv/weavv-css-documentation.git
$ cd weavv-css-documentation

install dependencies,

# YARN
$ yarn
# NPM
$ npm i

serve locally,

# YARN
$ yarn dev
# NMP
$ npm run dev

Credits

Nunjunks, Gulp, NodeJS, Sass

---

MIT

View on GitHub

---

Enjoy!

Comments

[Roman]

why knott.js and weavv ?

[Louis Low]

Ah, would you like to give a try to Knott JS? You will amazed the built-in DOM Style CSS utility. It give you an illusion like the project never had CSS payload. Just HTML and JS only. Thanks.

$ npx knott-cli@latest my-new-knott-project

[Roman]

thank you, will play

[Louis Low]

Yesterday night just released new Knott.js version 0.1.5. Added simple router to it.

[Louis Low]

Just a serious try out both frontend tools built recently.