B4J Library Skeleton (CSS + Library)

tchart · Jul 27, 2017

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

billyrudi · Aug 29, 2017

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...

micro · Aug 29, 2017

billyrudi said:
Hi to all,
i have a fast solution to add events to skeleton Button objects.
In short i use a the basic Erel example https://www.b4x.com/android/forum/threads/webapp-hello-world-web-app.39808/
whits some changes in the index.html file

Ok but using b4j_ws.js javascript.
I thing that tchart with skeleton framework not use this javascript.
Thanks anymway.

billyrudi · Aug 29, 2017

micro said:
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 · Aug 30, 2017

@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.

billyrudi · Aug 30, 2017

Hi. See my project in a prevprevious post. Bye

micro · Aug 30, 2017

billyrudi said:
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 · Aug 30, 2017

@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.

tchart · Aug 30, 2017

@micro please see the examples above.

billyrudi · Aug 30, 2017

Hi tchart,
good job!

alwaysbusy · Aug 30, 2017

Nicely done! @tchart a word of caution: this is how it all started with ABMaterial and now, about 2 years later, I don't have a social life anymore...

billyrudi · Aug 30, 2017

Mea culpa!!!

EnriqueGonzalez · Aug 30, 2017

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.

micro · Aug 31, 2017

tchart said:
@micro please see the examples above.

Thanks tchart

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

Yes, very well!

billyrudi · Aug 31, 2017

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?

tchart · Aug 31, 2017

@billyrudi I've put the latest code on GitHub

billyrudi · Aug 31, 2017

Hi, this is my first interface made with skeleton running on raspberrypi

inakigarm · Aug 31, 2017

billyrudi said:
View attachment 59184
Hi, this is my first interface made with skeleton running on raspberrypi

Nice !

billyrudi · Aug 31, 2017

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 · Aug 31, 2017

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 · Sep 1, 2017

how to make a menu responsive?

example:
<nav class="navigation">

B4J Library Skeleton (CSS + Library)

Attachments

Active Member

Well-Known Member

Active Member

Well-Known Member

Active Member

Well-Known Member

Well-Known Member

Attachments

Well-Known Member

Active Member

Expert

Active Member

Expert

Well-Known Member

Active Member

Well-Known Member

Active Member

Well-Known Member

Active Member

Active Member

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency