ACF css

= Design/coding questions =
Feel the need of some back-bone tabs that is general for all (or most) acf-modules.<BR>
This results in that a user 'recognizes' the layout and information on every acf-module.<BR>
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<BR>
(H1)(Description of the main function of this program)(/H1)<BR>
(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)<BR>
Above information is same for each tab (expert, status, config, whatever).<BR>
(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.<BR>
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.<BR>
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'.<BR>
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).<BR>
Below you are supposed to use '<' and '>' instead of '(' and ')' when you use P, DL, DD or some other html tag.<BR>
Often you present some information on a row, and on the next row you present the next information.<BR>
* 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.<BR>
This also makes it possible to add new style sheets when needed.<BR>
Try not to specify a width or other graphical settings in your view-files.<BR>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.<BR>
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]<BR>
 Alpine Linux (or maybe hostname)<BR>
==== main (id) ====
===== nav (id) =====
 Navigation (main)<BR>
 Where we have been<BR>
===== subnav (id) =====
 Navigation (subnav)<BR>
===== content (id) =====
 Main content of the page.<BR>
 This is where the interesting information is shown.<BR>
==== 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)
 | \
 | -----------------
 \ 
 -------------------
Category:ACF