📯 Goodbye HTML & CSS. Hello Nuggets.
Nuggets is a replacement for HTML & CSS. Written with React & TypeScript, Nuggets was designed to be the easiest way to build a UI. Import it easily into any npm (and yarn) based web app.
npm i --save nuggets
I built nuggets because I realised that regular HTML & CSS had a number of problems. These problems included slow development speeds and a low robustness of code. As such I attempted to build a library which "minimised decisions" as the main goal.
Typing is fast. Decisions are slow.
The reason why we choose TypeScript was because good code editors can provide method previews with TypeScript variables. That way you'll always know what options are available as your begin to type. We also chose to use React because it provides some excellent data structures such as the hook. This powerful tool enables us to build both beautiful and reactive layouts very easily.
Hope you enjoy it as much as I am.
The following demonstrates some of what's possible with the
import * as React from 'react';import Node useBoolean useSchema from 'nuggets';/*** ❤️🔥😻❤️🔥😻❤️🔥😻❤️🔥😻❤️🔥😻❤️🔥😻❤️🔥😻❤️🔥😻* A new way to style components and handle events** ❤️ Only one element... the <Node />!* 🔥 Styles are merged with DOM structure to encourage component based styling over than class based styling.* 😻 Flexible styles which can take multiple data types.*/const StylesAndEventsComponent = childrenconst toggle = ;return<Node==>children</Node>;;/*** 👊🎉😎👊🎉😎👊🎉😎👊🎉😎👊🎉😎👊🎉😎👊🎉😎👊🎉* Use properties instead of different HTML tags** 👊 Easy to use portals.* 🎉 Change an element from editable to static with a boolean.* 😎 Nodes have an internal state or value.*/const LotsOfPropetiesComponent =const personSchema =;const name = personSchemaproperties;return<Node====="Your name"==="same-as-html-id"="same-as-html-class"= // ="popup"==== ///>;;const const MadeForWindowGadgets =<StylesAndEventsComponent><LotsOfPropetiesComponent /></StylesAndEventsComponent>
Made with ❤️ 😅 😂 by Jack.
Powering Window Gadgets.