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

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)
| \
|  -----------------
\ 
 -------------------