ACF css

Draft

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.

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.

DIV ID=...

header (id)

[Skip to main content]

AlpineLinux (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)AlpineLinux(/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)
| \
|  -----------------
\ 
 -------------------