Skip to content

Proof of concept. Develop Web UI's programatically with Semantic UI + Mustache

Notifications You must be signed in to change notification settings

natzar/semantic-ui-builder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Semantic Ui - builder

Proof of concept: Build web ui with Vanilla JS based in Semantic UI CSS.

This is sort of an specific exploration I'm doing. Inspired by iOS applications, Objective C & XCode.

Basic example:

  var container = new Container({ class: "centered aligned text"});
  var header = new Header({ content:'hello!'});
  var btn = new Button({ label: 'hello!', link: 'hello'});
  container.append(header);
  container.append(btn);
  container.render();

With Events:

  el({main class},{element's attributes}, {element's events});

  var list = new el('list',{class:['relaxed']});
  var btn = new el('button',{class:['primary']},{click: function(){ list.append({header: "Text header new item","description": "Whatever", icon:"sample.png" });
  • All elements can have 0 or more children.
  • If you want a sub header, append it to a header element.
  • Order of appends is important (DOM hierarchy)
  • All elements can be rendered
  • Only "View elements" can do document.write (sections, or screens or iOS APP View concept...)

To-do:

  • Keep exploring whatever appeals you.

Documentation

In order to facilitate the understanding and use of the Semantic UI builder, detailed documentation on how to use and extend the system will be developed. This documentation will provide guidelines on element creation and manipulation, event handling, and best practices for constructing user interfaces with Semantic UI builder.

Log

27 Dec - Impossible to work with customized elements with this approach. Thinking on using this as an IDE. Exactly like you would develop an iOS app with Xcode.

23 Dec - Creating elements dynamically. Adding new items to a list. Attaching events.

23 Dec - started TO-DO app example

23 Dec - Added App Super Class.

23 Dec - Refactored. el() function does all the work. Removed Element Class.

15 Dec - Getting it back

9 Sep - Pause with this project

8 Sep - Made first step, example and basic exploration

About

Proof of concept. Develop Web UI's programatically with Semantic UI + Mustache

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published