While ABMaterial is fantastic, I find it overkill for simple (mostly static) websites. A while back I came across the Skeleton CSS framework;
http://getskeleton.com/
Skeleton is a grid based mobile responsive CSS boiler plate.
It worked fine for a couple of projects but I still had to hand craft HTML. So I decided to create a B4J library to automate the creation of HTML pages using the Skeleton CSS. I've tried to keep it as generic as possible and I have not introduced any direct changes to the Skeleton CSS but have extended it using additional CSS like Fontawesome and a 3rd part notification CSS for Skeleton. I take no credit for any of the CSS libraries.
The B4J library can actually be used to generate generic HTML code as it has a helper class which is used to generate the Skeleton specific markup. The Skeleton CSS can also be replaced by other CSS.
IMPORTANT NOTE: This isnt a replacement for ABMaterial. This is for simply mostly static web pages with a bit of dynamic content being generated by jServer. There is no bi-directional comms and any interaction with the server back-end is through RESTful API's that you have to write. This does involve coding on the client side (JavaScript) and back-end handlers in B4J. If you just need a simple web page then this will probably suit your needs, if not it can be extended however if you need more then you should probably look at ABMaterial.
The examples below show server handlers but as the Render method simply returns a string (of HTML) you can use it to write out HTML files (I use this for a reporting product I wrote).
Quick Start Tutorial
Skeleton uses rows and columns for its grid. These are contained within containers.
The hierarchy for a page goes like this:
Skeleton Page
- Skeleton Container
-- Skeleton Row
---Skeleton Column(s)
-- Skeleton Row
---Skeleton Column(s)
Columns are where content is added.
So a quick example looks like this.
This gives us a simple page with one container, one row and one column.
Following on from this we can add a second column to the row.
The demo app has additional demos including use of images and font awesome icons.
Demo website; https://ope.nz/skeleton/demo
Anyway the library is attached, together with a demo web server.
Source code (B4J) is on GitHub - https://github.com/ope-nz/Skeleton
Library Update 04/08/2017
http://getskeleton.com/
Skeleton is a grid based mobile responsive CSS boiler plate.
It worked fine for a couple of projects but I still had to hand craft HTML. So I decided to create a B4J library to automate the creation of HTML pages using the Skeleton CSS. I've tried to keep it as generic as possible and I have not introduced any direct changes to the Skeleton CSS but have extended it using additional CSS like Fontawesome and a 3rd part notification CSS for Skeleton. I take no credit for any of the CSS libraries.
The B4J library can actually be used to generate generic HTML code as it has a helper class which is used to generate the Skeleton specific markup. The Skeleton CSS can also be replaced by other CSS.
IMPORTANT NOTE: This isnt a replacement for ABMaterial. This is for simply mostly static web pages with a bit of dynamic content being generated by jServer. There is no bi-directional comms and any interaction with the server back-end is through RESTful API's that you have to write. This does involve coding on the client side (JavaScript) and back-end handlers in B4J. If you just need a simple web page then this will probably suit your needs, if not it can be extended however if you need more then you should probably look at ABMaterial.
The examples below show server handlers but as the Render method simply returns a string (of HTML) you can use it to write out HTML files (I use this for a reporting product I wrote).
Quick Start Tutorial
Skeleton uses rows and columns for its grid. These are contained within containers.
The hierarchy for a page goes like this:
Skeleton Page
- Skeleton Container
-- Skeleton Row
---Skeleton Column(s)
-- Skeleton Row
---Skeleton Column(s)
Columns are where content is added.
So a quick example looks like this.
B4X:
Sub Handle(req As ServletRequest, resp As ServletResponse)
Dim S As SkeletonPage
Dim skc1 As SK_Column
skc1.Initialize(12)
skc1.AddHeader(1,"Header 1")
skc1.AddHeader(2,"Header 2")
skc1.AddHeader(3,"Header 3")
skc1.AddHeader(4,"Header 4")
skc1.AddContent("Lorem Ipsum is simply dummy text of the printing and typesetting industry.")
Dim r As SK_Row
r.Initialize
r.Columns.Initialize
r.Columns.Add(skc1)
Dim c As SK_Container
c.Initialize
c.Rows.Initialize
c.Rows.Add(r)
S.Initialize
S.AddContainer(c)
resp.Write(S.Render)
End SubThis gives us a simple page with one container, one row and one column.
Following on from this we can add a second column to the row.
B4X:
Sub Handle(req As ServletRequest, resp As ServletResponse)
Dim S As SkeletonPage
Dim skc1 As SK_Column
skc1.Initialize(7)
skc1.AddHeader(1,"Header 1")
skc1.AddHeader(2,"Header 2")
skc1.AddHeader(3,"Header 3")
skc1.AddHeader(4,"Header 4")
skc1.AddContent("Lorem Ipsum is simply dummy text of the printing and typesetting industry.")
Dim skc2 As SK_Column
skc2.Initialize(5)
skc2.AddHeader(1,"Header 1")
skc2.AddHeader(2,"Header 2")
skc2.AddHeader(3,"Header 3")
skc2.AddHeader(4,"Header 4")
skc2.AddContent("Lorem Ipsum is simply dummy text of the printing and typesetting industry.")
Dim r As SK_Row
r.Initialize
r.Columns.Initialize
r.Columns.Add(skc1)
r.Columns.Add(skc2)
Dim c As SK_Container
c.Initialize
c.Rows.Initialize
c.Rows.Add(r)
S.Initialize
S.AddContainer(c)
resp.Write(S.Render)
End SubThe demo app has additional demos including use of images and font awesome icons.
Demo website; https://ope.nz/skeleton/demo
Anyway the library is attached, together with a demo web server.
Source code (B4J) is on GitHub - https://github.com/ope-nz/Skeleton
Library Update 04/08/2017
Attachments
Last edited:
