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
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.
header (id)
- leader (class)
[Skip to main content]
- mid (class)
AlpineLinux (or maybe hostname)
- trailer (class)
- (empty for now)
- (empty for now)
main (id)
main.id doesn't have a 'mid(class)' because it holds multiple divs.
- leader (class)
- (empty for now)
- (empty for now)
- leader (class)
- (empty for now)
- (could be heading for the navigation)
- (empty for now)
- mid (class)
Navigation (main)
- trailer (class)
Where we have been
- leader (class)
- (empty for now)
- (empty for now)
- mid (class)
Navigation (subnav)
- trailer (class)
- (empty for now)
- (empty for now)
content (id)
- leader (class)
- (empty for now)
- (This could be a heading for the content section)
- (empty for now)
- mid (class)
Main content of the page.
This is where the interesting information is shown.
- trailer (class)
- (empty for now)
- (empty for now)
- trailer (class) (trailer for main.id)
- (empty for now)
- (empty for now)
Might be that the footer could go inside the 'content.id'
- leader (class)
- (empty for now)
- This could be used for graphics
- (empty for now)
- mid (class)
Made with care by webconf
- trailer (class)
- (empty for now)
- This could be used for graphics
- (empty for now)
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) | \ | ----------------- \ -------------------