How can I go about adding/altering web app styles via a CSS framework (e.g. Bootstrap)?

Let me explain, just for the records: You can pass either a single CSS file to the 'html' function

   (html 0 "Project" "my.css" NIL

or a list of files.

   (html 0 "Project" '("@lib.css" "my1.css" "my2.css") NIL

In the latter case, definitions in later CSS files override the earlier ones. So "my.css" can, for example, redefine things in "@lib.css".



Normally, you'll set a global in your main pogram

   (setq *Css '("@lib.css" "my1.css" "my2.css"))

and use that in the individual pages.

   (html 0 "Project" *Css NIL

HTML functions

Most low-level HTML functions accept an style attribute argument, e.g.:

   (de <div> (Attr . Prg)  # In @lib/xhtml.l

You call it like,

   (<div> NIL
      (<p> NIL
         "Text" ) )

This 'Attr' argument may be:

1) A single atom, specifying a class name

   (<div> "myCls1"
      (<p> "myCls2"
         ... ) )

2) A cons pair, specifying an HTML attribute

   (<div> '(id . "myId")

or

   (<div> '(style . "margin: 60px;")

3) An arbitrarily nested combination of the above

   (<div> '("myClass" (style . "margin: 60px;") ..)

Finally (back to your original question)

If you have a 'gui' component like

   (gui '(+E/R +Cue +TextField) '(key : home obj) "Test" 20)

then you can pass styles in a dynamical environment via:

1) The <style> function

   (<style> "myClass"
      (gui '(+E/R +Cue +TextField) '(key : home obj) "Test" 20) )

or

   (<style> '("myClass" (style . "margin: 60px;") ..)
      ...
      (gui '(+E/R +Cue +TextField) '(key : home obj) "Test" 20)
      ... )

2) via the +Style prefix class

   (gui '(+Style +E/R +Cue +TextField)
      "myClass"
      '(key : home obj)
      "Test" 20 ) )

Note that using +Style is the most powerful way, because the argument is evaluated whenever needed while the form is executing, so the style can change dynamically depending on the situation and the form contents:

   (gui '(+Style +E/R +Cue +TextField)
      '(cond
         ((someCondition1) "myClass")
         ((someOtherCondition "someOtherClass"))
         (T "somethingElse) )
      ... )

With that, the style will be adjusted upon arbitrary XMLHttpRequests from the "@lib/form.js" functionality.

https://picolisp.com/wiki/?css

19mar16

erik