An Interest In:
Web News this Week
- March 5, 2024
- March 4, 2024
- March 3, 2024
- March 2, 2024
- March 1, 2024
- February 29, 2024
- February 28, 2024
September 8, 2022 04:26 pm GMT
Original Link: https://dev.to/louislow/100daysofcode-day-04-ui-design-with-knott-js-weavv-css-1d08
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 weightless virtual DOM javascript micro web component library for the basic web.
A weightless javascript micro web component 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.
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.
craft( selector, { props { id: "", class: "", style: "", // any... }, text: "TEXT", html: `<p></p>`, data: [
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!
Original Link: https://dev.to/louislow/100daysofcode-day-04-ui-design-with-knott-js-weavv-css-1d08
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To