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

header (id)

• leader (class)
  

[Skip to main content]

• mid (class)
  

AlpineLinux (or maybe hostname)

• trailer (class)
  
  • (empty for now)
    

main (id)

main.id doesn't have a 'mid(class)' because it holds multiple divs.

• leader (class)
  
  • (empty for now)
    

nav (id)

• leader (class)
  
  • (empty for now)
    
  • (could be heading for the navigation)
    
• mid (class)
  

Navigation (main)

• trailer (class)
  

Where we have been

subnav (id)

• leader (class)
  
  • (empty for now)
    
• mid (class)
  

Navigation (subnav)

• trailer (class)
  
  • (empty for now)
    

content (id)

• leader (class)
  
  • (empty for now)
    
  • (This could be a heading for the content section)
    
• mid (class)
  

Main content of the page.

This is where the interesting information is shown.

• trailer (class)
  
  • (empty for now)
    

• trailer (class) (trailer for main.id)
  
  • (empty for now)
    

footer (id)

Might be that the footer could go inside the 'content.id'

• leader (class)
  
  • (empty for now)
    
  • This could be used for graphics
• mid (class)
  

Made with care by webconf

• trailer (class)
  
  • (empty for now)
    
  • This could be used for graphics

Graphic summary of the DIV(s)

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

Graphic without mid(class)

 ---------------------
/ page
|  -------------------
| / header
| |  -----------------
| | / leader (class)
| | \                  [Skip to main content] 
| |  -----------------
| |                    AlpineLinux (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)
| | | \
| | |  ---------------
| | \
| |  -----------------
| |  -----------------
| | / leader (class)
| | \
| |  -----------------
| \ 
\  -------------------
 ---------------------

Graphic without page(id)

 -------------------
/ header
|  -----------------
| / leader (class)
| \                  [Skip to main content] 
|  -----------------
|                    AlpineLinux (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)
| | \
| |  ---------------
| \
|  -----------------
|  -----------------
| / leader (class)
| \
|  -----------------
\ 
 -------------------