DEV Community

Louis Low
Louis Low

Posted on • Updated on

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

Image
Image

GitHub logo louislow81 / 100DaysOfCode

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


GitHub logo louislow81 / knott.js

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

Knott JS

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

License: MIT npm version npm downloads

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


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,
Enter fullscreen mode Exit fullscreen mode

GitHub logo weavv / weavv-css-documentation

The official WEAVV CSS documentation website

Netlify Status

image

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

Build

clone the repository,

$ git clone https://github.com/weavv/weavv-css-documentation.git
$ cd weavv-css-documentation
Enter fullscreen mode Exit fullscreen mode

install dependencies,

# YARN
$ yarn
# NPM
$ npm i
Enter fullscreen mode Exit fullscreen mode

serve locally,

# YARN
$ yarn dev
# NMP
$ npm run dev
Enter fullscreen mode Exit fullscreen mode

Credits

Nunjunks, Gulp, NodeJS, Sass


MIT


Enjoy!

Top comments (5)

Collapse
 
romankurnovskii profile image
Roman

why knott.js and weavv ?

Collapse
 
louislow profile image
Louis Low • Edited

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
Enter fullscreen mode Exit fullscreen mode
Collapse
 
romankurnovskii profile image
Roman

thank you, will play

Thread Thread
 
louislow profile image
Louis Low

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

Collapse
 
louislow profile image
Louis Low

Just a serious try out both frontend tools built recently.