Skip to content
This repository was archived by the owner on Dec 17, 2021. It is now read-only.

Commit d7ef35c

Browse files
author
Oxford
committed
first commit
0 parents  commit d7ef35c

File tree

114 files changed

+11311
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

114 files changed

+11311
-0
lines changed

.gitbook/assets/chtml-2.fw.png

98.5 KB
Loading

.gitbook/assets/chtml-3.fw.png

163 KB
Loading

.gitbook/assets/chtml.fw.png

310 KB
Loading

.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

README.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Docs - Web-Native.Dev
2+
3+
This is the documentation for "web-native" libraries and frameworks.
4+
5+
## Welcome to the Web-Native Project!
6+
7+
The Web-Native Project introduces new ways to solve frontend engineering problems using native language features. This approach will save us of all new markup languages, weird syntaxes and their compile steps and build tools. If you miss how vanilla coding made us feel and the easy "pick-up" and universality of libraries like jQuery, you will be delighted again!
8+
9+
Here are some exciting Web-Native tools that will help you get the most of web-native development:
10+
11+
> [CHTML](chtml/) - _Implement UI components in plain HTML_
12+
>
13+
> [Reflex](reflex/) - _Apply reactivity to any JavaScript object_
14+
>
15+
> [JSEN](jsen/) - _Run JavaScript expressions in user-defined scopes_
16+
17+
Everything in this technology stack is an independent library that can be used alone or together in high cohesion for a better Developer Experience and a happier app.
18+

SUMMARY.md

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# Table of contents
2+
3+
* [Docs - Web-Native.Dev](README.md)
4+
* [CHTML](chtml/README.md)
5+
* [CHTML Guide](chtml/guide/README.md)
6+
* [Installation](chtml/guide/installation.md)
7+
* [Strucutural Concepts](chtml/guide/structural-concepts/README.md)
8+
* [The Component Model](chtml/guide/structural-concepts/the-component-model.md)
9+
* [The Component API](chtml/guide/structural-concepts/the-component-api.md)
10+
* [Behavioural Concepts](chtml/guide/behavioural-concepts/README.md)
11+
* [Reactivity and Binding](chtml/guide/behavioural-concepts/reactivity-and-binding.md)
12+
* [Directives and Bindings](chtml/guide/behavioural-concepts/directives-and-binding.md)
13+
* [Compositional Concepts](chtml/guide/compositional-concepts/README.md)
14+
* [Namespaces and Templates, Layout and Bundling](chtml/guide/compositional-concepts/namespaces-and-templates-layout-and-bundling.md)
15+
* [Imports and Recomposition, Inheritance and Cascading](chtml/guide/compositional-concepts/imports-and-recomposition-inheritance-and-cascading.md)
16+
* [List Composition](chtml/guide/compositional-concepts/list-composition.md)
17+
* [Additional Guides](chtml/guide/extras/README.md)
18+
* [Support Functions](chtml/guide/extras/support-functions-and-classes.md)
19+
* [The Bundler Utility](chtml/guide/extras/the-bundler-utility.md)
20+
* [Server-Side Rendering](chtml/guide/extras/server-side-rendering.md)
21+
* [CHTML Configuration](chtml/guide/extras/configuration.md)
22+
* [Reflex](reflex/README.md)
23+
* [Reflex Guide](reflex/guide.md)
24+
* [Firedom](firedom/README.md)
25+
* [Firedom Guide](firedom/guide.md)
26+
* [Firedom API](firedom/api/README.md)
27+
* [The DOM](firedom/api/dom/README.md)
28+
+ [`DOM/select()`](/firedom/api/dom/select.md)
29+
+ [`DOM/selectAll()`](/firedom/api/dom/selectall.md)
30+
+ [`DOM/el()`](/firedom/api/dom/el.md)
31+
+ [`DOM/appendSync()`](/firedom/api/dom/appendsync.md)
32+
+ [`DOM/appendAsync()`](/firedom/api/dom/appendasync.md)
33+
+ [`DOM/prependSync()`](/firedom/api/dom/prependsync.md)
34+
+ [`DOM/prependAsync()`](/firedom/api/dom/prependasync.md)
35+
+ [`DOM/htmlSync()`](/firedom/api/dom/htmlsync.md)
36+
+ [`DOM/htmlAsync()`](/firedom/api/dom/htmlasync.md)
37+
+ [`DOM/textSync()`](/firedom/api/dom/textsync.md)
38+
+ [`DOM/textAsync()`](/firedom/api/dom/textasync.md)
39+
+ [`DOM/attrSync()`](/firedom/api/dom/attrsync.md)
40+
+ [`DOM/attrAsync()`](/firedom/api/dom/attrasync.md)
41+
+ [`DOM/classSync()`](/firedom/api/dom/classsync.md)
42+
+ [`DOM/classAsync()`](/firedom/api/dom/classasync.md)
43+
+ [`DOM/data()`](/firedom/api/dom/data.md)
44+
+ [`DOM/getTextNodes()`](/firedom/api/dom/gettextnodes.md)
45+
+ [`DOM/mutationCallback()`](/firedom/api/mutationcallback.md)
46+
+ [`DOM/connectedCallback()`](/firedom/api/connectedcallback.md)
47+
+ [`DOM/disconnectedCallback()`](/firedom/api/disconnectedcallback.md)
48+
+ [`DOM/attrChangeCallback()`](/firedom/api/attrchangecallback.md)
49+
* [CSS](firedom/api/css/README.md)
50+
+ [`CSS/cssSync()`](/firedom/api/css/csssync.md)
51+
+ [`CSS/cssAsync()`](/firedom/api/css/cssasync.md)
52+
+ [`CSS/readSync()`](/firedom/api/css/readsync.md)
53+
+ [`CSS/readAsync()`](/firedom/api/css/readasync.md)
54+
+ [`CSS/writeSync()`](/firedom/api/css/writesync.md)
55+
+ [`CSS/writeAsync()`](/firedom/api/css/writeasync.md)
56+
+ [`CSS/readRendering()`](/firedom/api/css/readrendering.md)
57+
+ [`CSS/readInline()`](/firedom/api/css/readinline.md)
58+
+ [`CSS/readStylesheet()`](/firedom/api/css/readstylesheet.md)
59+
+ [CSS/TransformRule](/firedom/api/css/TransformRule/README.md)
60+
+ [`CSS/transaction()`](/firedom/api/css/transaction.md)
61+
* [Animation](firedom/api/ani/README.md)
62+
+ [`ANI/play()`](/firedom/api/ani/play.md)
63+
+ [ANI/Ani](/firedom/api/ani/Ani/README.md)
64+
+ [ANI/Timeline](/firedom/api/ani/Timeline/README.md)
65+
* [Event](firedom/api/evt/README.md)
66+
+ [`EVT/on()`](/firedom/api/evt/on.md)
67+
+ [`EVT/off()`](/firedom/api/evt/off.md)
68+
+ [`EVT/trigger()`](/firedom/api/evt/trigger.md)
69+
+ [Custom Events](/firedom/api/evt/custom-events.md)
70+
* [The UI](firedom/api/ui/README.md)
71+
+ [`UI/coordsAtRect()`](/firedom/api/ui/coordsatrect.md)
72+
+ [`UI/offsets()`](/firedom/api/ui/offsets.md)
73+
+ [`UI/offsetTo()`](/firedom/api/ui/offsetto.md)
74+
+ [`UI/positioningOffsets()`](/firedom/api/ui/positioningoffsets.md)
75+
+ [`UI/rect()`](/firedom/api/ui/rect.md)
76+
+ [`UI/rectAtOffsets()`](/firedom/api/ui/rectatoffsets.md)
77+
+ [`UI/scrollParent()`](/firedom/api/ui/scrollparent.md)
78+
+ [`UI/scrolls()`](/firedom/api/ui/scrolls.md)
79+
+ [`UI/scrollTo()`](/firedom/api/ui/scrollto.md)
80+
+ [`UI/size()`](/firedom/api/ui/size.md)
81+
+ [`UI/translateTo()`](/firedom/api/ui/translateto.md)
82+
+ [`UI/resizeCallback()`](/firedom/api/ui/resizecallback.md)
83+
+ [UI/ProximityObserver](/firedom/api/ProximityObserver/README.md)
84+
* [JSEN](jsen/README.md)
85+
* [JSEN Guide](jsen/guide.md)
86+
* [Rose UI](cui/README.md)
87+
* [RoseUI Guide](cui/guide.md)
88+
* [Commons](commons/README.md)
89+
* [Commons Guide](commons/guide.md)
90+
* [MQL](mql/README.md)
91+
* [MQL Guide](mql/guide.md)
92+

chtml/README.md

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
description: 'An HTML-based, UI design system that’s as simple and universal as HTML Itself!'
3+
---
4+
5+
# CHTML
6+
7+
CHTML is a pure HTML-based, **UI functional design system** that lets you build your UI from smaller html components and have everything work as one wonderful piece of craftsmanship. This is a fundamental shift that finally brings UI development from the **engineering** realm of JavaScript back to the **design** field of HTML \(the original markup language for the web\)!
8+
9+
Build elegant user interfaces without learning a template syntax or a build tool! Share your html-based components around and use them anywhere HTML works and forget about a compile step or a dependency! This is the luxury of an HTML-based design system! CHTML **empowers the design side of you** and enriches your overall design experience by _minimizing your engagement with JavaScript_ on the UI; all that engineering should really be the concern of the application layer.
10+
11+
This project is opensource and [hosted on Github](https://github.com/web-native/chtml).
12+
13+
Take the [Getting Started Guide](guide/) or continue here for an introduction to CHTML.
14+
15+
## Why CHTML
16+
17+
We simply discovered that the sanest way to approach the UI is to take aside the _rigid framework_ and embrace a _design system_! If you're new to the idea of design systems, you will be intrigued at how much order they bring to your design and development process.
18+
19+
### Rich Design Experience
20+
21+
Today's prevailing frameworks have overwhelmed our most-exciting realm of design - the UI - with full application engineering; think the data-fetching logic, routing, and the business logic lurking deep in UI elements. Design has never been this altered! **If you're currently engineering all the way, say** _**Hi**_ **to a design system!**
22+
23+
With CHTML you can regain focus on just the things that matter in the UI: structure, aesthetics, and behaviour. **You should really be working in an overall design experience that's void of the influence a framework exerts!**
24+
25+
* **Play Away**: With components now living as plain HTML files, think how much now gets out of the way! No compiling from language A to language B; no build step; no complex tooling; no overkill.
26+
27+
### The Flexibility of a Design System!
28+
29+
There's much to be said about **the trap of coupling the UI with a full-fledged application framework** \(a la React, Angular, Ember, et al\). For one thing, you have a technology dependency that inherently limits where that UI can go.
30+
31+
With CHTML, you have a **specifications-driven system that's totally implementation-agnostic**! You approach your implementation with a wider variety of technologies, your own design principles \(think style guides, best practices, etc\), and project-specific requirements, and at the end, come off with consistent results! CHTML is how everything - whatever it is - fits together!
32+
33+
* **Evolve Quickly**: Change, growth, and the rest of tomorrow's unknown are the most certain things we know of! How do you want to face the challenge? With a rigid foundation or a flexible one? .
34+
35+
### The Web-Native Advantage!
36+
37+
Tooling is essential to a design system if we must obtain something usable from the specifications - think all the browser-based technologies that translate our HTML, CSS, and JavaScript blueprints into an amazing UI. **But the more generic the design and tooling, the more universal the system gets.** The is the good news with CHTML!
38+
39+
Much like the web platform itself, CHTML has been intentionally designed as a generic foundation on which anyone can build, and thus **sets its limits on vanilla HTML, JavaScript and CSS for structure, behaviour, and presentation respectively**! This makes it easy to leverage platform features and APIs and gives you a zero-abstraction layer from which to take your application to any level of engineering.
40+
41+
* **Meet the Future**: Underpinned on tags and attributes, CHTML helps you secure a future-proof approach to your UI! There can't be a better bet on stability and relevance than a native foundation!
42+
43+
## Getting Started!
44+
45+
We have a 5-minute walk-through that brings you to your first CHTML page - [The Getting Started Guide](guide/).
46+

0 commit comments

Comments
 (0)