ACF css: Difference between revisions

From Alpine Linux
(→‎DIV CLASS=...: header(class))
Line 31: Line 31:
By adding class='hide' to some object, you could hide it.
By adding class='hide' to some object, you could hide it.


==== mute (class) ====
==== 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".
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) ====
==== selected(class) ====

Revision as of 18:31, 6 January 2008

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

H1,H2,H3

DL,DT,DD

DIV

  • ID
    • This attribute assigns a name to an element.
    • This name must be unique in a document
  • 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.

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