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,
…weavv / weavv-css-documentation
The official WEAVV CSS documentation website
WEAVV CSS 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
Enjoy!
Top comments (5)
why knott.js and weavv ?
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.
thank you, will play
Yesterday night just released new Knott.js version 0.1.5. Added simple router to it.
Just a serious try out both frontend tools built recently.