B4J Library [BANanoHTML] - A framework-less library for the adventurous BANanoNinjas

Ola

Download

For those who are adventurous and would rather write their own HTML, CSS in developing their website, this 50KB b4xlib is for you.

DISCLAIMER: This library is purely for those who want to learn how to use HTML5 and CSS3 to build their websites and are prepared to go all the way to create their own magic without depending on any framework.

NB: ONLY PURE HTML and CSS via BANano will be entertained, no UX frameworks. #LearningWebsites

Features:

1. One single HTMLElement custom view to base all your other custom views and create layouts.
2. A very small library footprint (included day.js, numeral.js, bootstrap.grid.css).
3. If you don't want to use the bootstrap grid, just remove it from the library and re-compile the project. It would also help if you can open the file to learn how the css to build the bootstrap grid is defined. This will help you learn CSS, I did!


Example of a grid from a layout file in Demo 01.

Do:

1. Get yourself a book on HTML5 and CSS3 and see if you can create your own eye candy.
2. Check the www3schools how to section on how to use pure HTML and CSS3 to design stuff. Other website related content that does not use a framework would also be helpful.
3. Use your imagination
4. You can ask questions

Don't

1. DO NOT get yourself a book on VueJS, Bootstrap, Material or any frameowork. etc to use this library, it will be point-less. This library is to encourage one to create their own magic without depending on any framework, thus boosting your own knowledge and learning how to use BANano "outside the box". After all, BANano is outside the box.

Expect to use

#if css

#end if

.SetStyle(?)
.AddClass(?)
.SetAttr
.SetText
.Append
'
etc etc

#if javascript

#end if

Enjoy!

#PureHTMLCSS3

 

[Mashiane]

As an example, we have added a div called div2 inside a container using our custom component. We use the abstract designer

We then rotate the child div 45deg, via banano code.

Sub Init
    app.Initialize
    banano.LoadLayout("#body", "div1")
    '
    div2.Initialize("#div2")
    div2.SetStyle(banano.ToJson(CreateMap("transform": "rotate(45deg)")))
  
End Sub

Explore for yourself and goodluck.

#Demo 02