Skip to content

Latest commit

 

History

History
82 lines (66 loc) · 5.02 KB

README.md

File metadata and controls

82 lines (66 loc) · 5.02 KB
Raw

Tamarack

Tamarack is collection of modern, easy to use JavaScript classes for designing rich user interfaces, working with color, and many other useful functions It has no hard dependencies (jQuery free!) other than a modern browser (so no IE support). Think of it as an AppKit, GTK, or QT, but for the web. Because tamarack takes care of the UI part of your app, you can focus solely on app-specific features.

Here are some of the things tamarack supports:

  • Modern design, using ES6 classes and the latest JS features
  • 30+ views inheriting from the TkView base class
  • Automatic dark mode support
  • Desktop-class color and font support with TkColor, TkColorChooser, TkFont, and TkFontChooser
  • Easy integration with existing apps
  • Styled with CSS variables so that the default colors can easily be overriden

Dependencies

While tamarack has no hard dependencies, there are a few soft dependencies that are needed for a small subset of functionality:

  • Hammer.JS for supporting touch gestures, such as pull to refresh and swiping to open a sidebar on mobile. It is exposed by TkView.gestureRecognizer(), which automatically creates a Hammer.Manager for the TkView's element.
  • Ionicons for using TkIcon, which is a simple TkView wrapper around an element, which lets you add icons to your app in an easy way.

Note: Tamarack is still under development, so it isn't quite ready to be used in production.

Examples

The Gradient Maker App provides a good starting point for using tamarack. In about 90 lines of code, it provides a UI for building a CSS gradient, with options for editing the angle and adding, editing, moving, and removing colors:
Gradient Maker

Another good starting point for cross-platform web apps is the Detect Platform App, which shows how to implement platform-specific styles and detect the current app platform in JavaScript: Platform Detector

Files

  • core.js: Contains functionality used by all of the other scripts
  • color.js: A class to make it simple to manage nearly every type of CSS color and easily convert between them: hex, hex w/ alpha, named CSS, HSL, HSLA, RGB, RGBA colors. Useful for building color pickers or other things that involve manipulating color.
  • font.js: A class to make it simple to manage fonts.
  • view.js: Contains a collection of views, or wrappers for HTML elements that inherit from a class called 'TkView' that can be entirely manipulated through JavaScript, requiring no HTML boilerplate.

Views

view.js is a collection of views which are wrappers around HTML elements, such as TkButton, which wraps around <button> or TkImage, which wraps around <img>. All of these widgets inherit from TkView, which provides them with basic functionality such as making the view full-screen, adding/removing child views, attaching/triggering events, and other functionality. In addition, there are also composite views that represent multiple html elements in one single class, cutting down the need for massive amounts of boilerplate code for simple tasks. One of these is TkNotebook, which provides a notebook widget with tab pages that can be added and removed.

Examples

Hello world:

new TkText("p", { parent: "body", text: "Hello World!" });

Interacting with plain HTMLElements:
While you can build your entire application in nothing but tamarack, tamarack works cleanly with other components in webpages, such as HTMLElements and CSS selectors for them:

// Add a TkView as a child of an HTMLElement with the id "someElement"
new TkText("p", { parent: "#someElement", text: "An HTMLElement is my parent" });

// Add an element with the id "someOtherElement" as a child of a TkView:
new TkView({ parent: "body", children: ["#someOtherElement"] });

Add progress bars:

for(let i of [0, 25, 50, 75, 100])
   new TkProgress({ parent: "body", value: i });

Create a button that makes a video fullscreen when clicked:

let fullscreenButton = new TkButton({ parent: "body", text: "Go Fullscreen" });
let video = new TkVideo({ parent: "body" });
fullscreenButton.on("click", () => video.isFullscreen = true);

Create a two page notebook:

let notebook = new TkNotebook({ parent: "body" });

let page1 = new TkPage({ 
   parent: notebook, 
   title: "Hello",
   content: [new TkText("p", { text: "Hello" })]
});

let page2 = new TkPage({ 
   parent: notebook, 
   title: "World",
   content: [new TkText("p", { text: "World" })]
});

See more examples here