ACF css

This material is work-in-progress ... This is just a place where I want to write down some notes on css issues for Alpine. Don't consider this as a Alpine documentation until/if this heading saids otherwise. (Last edited by Sertonix on 25 Sep 2023.)

Design/coding questions

Feel the need of some back-bone tabs that is general for all (or most) acf-modules.
This results in that a user 'recognizes' the layout and information on every acf-module.
This way user easy finds what he is looking for and feels that he doesn't accidentally change something that he doesn't want to change.

View-files

Status tab

Display information in this order
(H1)(Description of the main function of this program)(/H1)
(H2)SYSTEM INFO(/H2)

• Status of the current program/process
• Version of program (if applicable)

(H3)PROGRAM SPECIFIC(/H3)

• (Some program specific information)
• (Some program specific information)

Config tab

(H1)(Description of the main function of this program)(/H1)
Above information is same for each tab (expert, status, config, whatever).
(H2)CONFIGURATION(/H2) (H3)GENERAL SETTINGS(/H3)

• Enable/Disable this process [ ]enable [x]disable
• (Some general settings)
• (Some general settings)

(H3)(Some other category of settings)(/H3)

• (Some specific settings)
• (Some specific settings)

(H3)(Some other category of settings)(/H3)

• (Some specific settings)
• (Some specific settings)

(H2)APPLY CHANGES(/H2)

• Apply above changes [Apply]

Expert tab

Show the config file(s) in plain text and let the 'expert' modify them as he wants (and hope that the 'expert' knows what he's doing)

CSS

BR

I think that the use of BR is not that big.
Instead you could do...

(P) your text (/P) (P) some other text (/P)

H1,H2,H3

These headings are (as most other things) defined by the css.
By using these you can split your page into sections that handle different parts of functions or data.

• H1 (Main data under the 'main' heading)
  • H2 (Data related to the 'main' heading, but is sectioned into a sub-heading)
    • H3 (A sub-heading to previous heading)

PRE

PRE is used to display data 'as it comes out from the system'.
PRE doesn't change the linefeed and other things.

DL,DT,DD

When you want to present some data, your are limited to the (DIV ID=content).
Below you are supposed to use '<' and '>' instead of '(' and ')' when you use P, DL, DD or some other html tag.
Often you present some information on a row, and on the next row you present the next information.

• If you want to use 100% of available width you could...

(P) Whatever your text is that you want to present (/P)

In some cases you want to specify some description on what your data is (like a heading). Then you could...

• Use DT/DD fileds...

(DT)The value is:(/DT) (DD)1235(/DD)

The use of (DL) is still not defined.
By using these above types of presenting data, you let the style sheet (css) present your output in a nice way.
This also makes it possible to add new style sheets when needed.
Try not to specify a width or other graphical settings in your view-files.
Let the css do it for you (and if the css can't handle it for the moment... then we just fix the css)

DIV

• ID
  • This attribute assigns a name to an element.
  • This name must be unique in a document
    • w3.org
• CLASS
  • This attribute assigns a class name or set of class names to an element.
  • Any number of elements may be assigned the same class name or names.
  • Multiple class names must be separated by white space characters.
    • w3.org

DIV CLASS=...

leader/tailer(class)

Would it be a good idea to have a leader/tailer class inside every (DIV ID)?

• leader(class)
• Main content
• tailer(class)

The leader/tailer(class) could be used ether to display information or could be used for graphical changes (with the CSS)?!?!

hide(class)

By adding class='hide' to some object, you could hide it.

mute(class)

The mute class could be used to show "quiet" items that aren't quite hidden. Perhaps smaller font, greyed out, etc... "extra info".

header(class)

Could be used to decorate header rows in a table (e.g. colored background and bold text).

selected(class)

This could mark tabs/menus which is selected/current.

error(class)

This could mark text/background/whatever so your attention is drawn to this.
Could indicate that you are forced to take some action or change something.

attention(class)

This could mark text/background/whatever so your attention is drawn to this.

DIV ID=...

header (id)

[Skip to main content]

Alpine Linux (or maybe hostname)

main (id)

nav (id)

Navigation (main)

Where we have been

subnav (id)

Navigation (subnav)

content (id)

Main content of the page.

This is where the interesting information is shown.

footer (id)

Made with care by webconf

Graphical presentation

 -------------------
/ header
|  -----------------
| / leader (class)
| \                  [Skip to main content] 
|  -----------------
|                    (H1)Alpine Linux(/H1) (or maybe hostname)
|
|  -----------------
| / trailer (class)
| \
|  -----------------
\
 -------------------
 -------------------
/ main
|  -----------------
| / leader (class)
| \
|  -----------------
|  -----------------
| / nav
| |  ---------------
| | / leader (class)
| | \
| |  ---------------
| |                  Navigation (main) (and its items)
| |
| |  ---------------
| | / trailer (class)
| | \                Where we have been
| |  ---------------
| \
|  -----------------
|  -----------------
| / subnav
| |  ---------------
| | / leader (class)
| | \
| |  ---------------
| |                  Navigation (subnav) (and its items)
| |
| |  ---------------
| | / trailer (class)
| | \
| |  ---------------
| \
|  -----------------
|  -----------------
| / content
| |  ---------------
| | / leader (class)
| | \
| |  ---------------
| |                  Main content of the page.
| |
| |  ---------------
| | / trailer (class)
| | \
| |  ---------------
| \
|  -----------------
|  -----------------
| / footer
| |  ---------------
| | / leader (class)
| | \
| |  ---------------
| |                  Made with care by webconf
| |
| |  ---------------
| | / trailer (class)
| | \
| |  ---------------
| \
|  -----------------
|  -----------------
| / tailer (class)
| \
|  -----------------
\ 
 -------------------