B4J Library Skeleton (CSS + Library)

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.

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 Sub

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.

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 Sub

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
 

Attachments

  • 2017-07-27 14_51_00-Title.png
    2017-07-27 14_51_00-Title.png
    35.8 KB · Views: 622
  • 2017-07-27 14_50_49-Title.png
    2017-07-27 14_50_49-Title.png
    70.9 KB · Views: 613
  • Skeleton Dist.zip
    142 KB · Views: 528
Last edited:

billyrudi

Active Member
Licensed User
Longtime User
if we add the id in any skeleton objects

we can execute jquery and for example remove objects...

ws.Eval("$(arguments[0]).remove()", Array As Object("#" & "test"))

or change some attributes...
 

billyrudi

Active Member
Licensed User
Longtime User
Ok but using b4j_ws.js javascript.
I thing that tchart with skeleton framework not use this javascript.
Thanks anymway.
Excuse me but i don't understand how you can build an interactive website without javascript.
b4j_ws.js is need to fire b4j code... also tchart suggest to use
B4X:
S.AddScript($"<script>
function httpGetAsync(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous
    xmlHttp.send(null);
}
</script>"$,True)
regards Paolo
 

tchart

Well-Known Member
Licensed User
Longtime User
@billyrudi you are correct you have to use JavaScript if you want interactive websites.

My two approaches are submit forms (to a b4j handler) or use JavaScript.

I've just started a new job so I am a bit short of time for demos. I will try post something soon.
 

micro

Well-Known Member
Licensed User
Longtime User
Excuse me but i don't understand how you can build an interactive website without javascript.
b4j_ws.js is need to fire b4j code... also tchart suggest to use
I'm sorry, I have explained wrong.
Of course we must use javascript but tchart not use b4j_ws.js javascript to interact with B4J.
I will try to integrate the b4j_ws.js script with AddScript function of Skeleton.

Thanks to all
 

tchart

Well-Known Member
Licensed User
Longtime User
@billyrudi thanks for your input - I didn't know about b4j_ws.js - it is very cool.

So here are some more demos;

http://ope.nz:8080/demo2 - pure JavaScript (no jQuery)
http://ope.nz:8080/demo3 - web sockets, jQuery and b4j_ws.js

Source code for demo is attached.

For demo2 look at the source code for the web page, there is lots of JavaScript - but in reality there are several double ups of code to illustrate the examples. The buttons call a b4j web server handler that returns the server date time (ie DateTime.Now). This is returned as a JSON object and dsplayed as an alert or sets an edit text field.

For demo3 there is less JavaScript but uses web sockets and jQuery. The button calls a b4j web socket handler that adds the numbers together and sets the result to an edit text field.

So I guess it depends what you are most comfortable with.

If people are keen on jQuery and b4j_ws.js I can add these as built in options to the Skeleton library.
 

Attachments

  • SkeletonDemo.zip
    60.6 KB · Views: 307

EnriqueGonzalez

Well-Known Member
Licensed User
Longtime User
Hi! i am currently working with this amazing lib!

So far so good, i create my web completly from the jar file so i can deploy with just pasting the jar to my vps.

My only issue right now is that when i inject HTML to my webpage i have to create it manually with HTML. like this:

(this is runtime, not compiling time)
B4X:
    Dim rowHeader As String= $"
                                <thead>
                                    <tr>
                                        <th>Secuencia</th>
                                        <th>Pregunta</th>
                                        <th>Tipo</th>
                                        <th>Observacion</th>
                                        <th>Acción</th>
                                    </tr>
                                </thead>
                            "$
   
    insideTable.Append(rowHeader).Append("<tbody>")

This is because each class of the skeleton class doesnt have a RENDER function. I wanted to modify the library itself to include this but i may not have time in the near future.
 

billyrudi

Active Member
Licensed User
Longtime User
hi tchart,
can you implement in your library the long click for buttoms?
somthing like
B4X:
var pressTimer;

$("a").mouseup(function(){
  clearTimeout(pressTimer);
  // Clear timeout
  return false;
}).mousedown(function(){
  // Set timeout
  pressTimer = window.setTimeout(function() { ... Your Code ...},1000);
  return false;
});

or
with taphold event of jQuery mobile API.

regards.

p.s. can you update gitub with letest release?
 

billyrudi

Active Member
Licensed User
Longtime User
to change buttoms colors or text use
B4X:
Sub SetCss(Property As String, Value As String, id As String)
    ws.GetElementBySelector("#" & id).SetCss(Property, Value)
End Sub

B4X:
ws.GetElementBySelector("#" & "data").SetText ($"Current time is $DateTime{DateTime.Now}"$)
 

billyrudi

Active Member
Licensed User
Longtime User
i have made some changes in skeleton.css to obtain this result
B4X:
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222;
  background-color:#000;}


B4X:
@media (min-width: 300px) {
  .container {
    width: 100%;
    padding: 0; }
     .three.columns                  { width: 25%;            }
      .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 10%;            }
   .six.columns                    { width: 50%;            }
     .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 0%;            }
}
B4X:
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 40px;
  padding: 0 1px;
  color: #555;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 0px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box;
   width: 99%;}
 

tuhatinhvn

Active Member
Licensed User
Longtime User
how to make a menu responsive?

example:
<nav class="navigation">
 
Last edited:
Top