gsl-statique-litterateur/var/lib/gsl/help/how-to_CSS_classes.md

98 lines
2.6 KiB
Markdown
Raw Permalink Normal View History

2022-06-14 18:51:19 +02:00
# CSS Classes and IDs
```xxx``` is your choosen CSS acronym for your DOMAIN
Note: if "myclass" or "myID" is not defined, class or ID is not used
## Legacy HTML
### body
myID is set in article with css: myID
TYPE is set in article with type: page|post
- body: xxx_TYPE myID
## Article Content
### Metas (author, date...)
### Titles h1-h6
X is 1 to 6
- xxx_title xxx_title-X
### div between titles
X is 1 to 6 from current title
2022-06-15 16:15:44 +02:00
- xxx_content xxx_content-hX
2022-06-14 18:51:19 +02:00
### Between markers (code, emphasis, strong...)
- bold: xxx_bold
- strong: xxx_strong
- emphasis: xxx_em
2022-06-28 22:56:48 +02:00
- cross: xxx_cross (span)
2022-06-14 18:51:19 +02:00
- inline code: xxx_icode
2022-06-28 22:56:48 +02:00
- del: xxx_del
2022-06-14 18:51:19 +02:00
### Paragraphs
myclass is the content value used (i.e.```( myclass```)
- xxx_p myclass
### Links
- xxx_link
- xxx_link xxx_link-window (if "+" for target)
### Links from file
- xxx_link-file
- xxx_link-file xxx_link-file-window (if "+" for target)
### Image and image link
myclass is from content marker (i.e. _image:1:myclass:90:90:+)
- link: xxx_image-link myclass
- img: xxx_image xxx_image-(left,right,cente)
- - If myclass replace xxx_image-(left...) by myclass
### pre-codes from source file
X is the NAME/NBR registred in header
2022-06-18 18:02:14 +02:00
- pre: xxx_code-block xxx_code-block-X
- span line: xxx_code-line
- span content: xxx_code-content
- div after pre: xxx_code-p
- link source: xxx_code-link
2022-06-14 18:51:19 +02:00
### Liste (ol | ul | li)
X is the item mark nbr (i.e. "+++" = 3, "=" = 1)
myclass is the registred value after << (i.e. << myclass). Only used at
the begining bloc.
- ol: xxx_list xxx_list-ol xxx_myclass xxx_myclass-ol
- ul: xxx_list xxx_list-ul xxx_myclass xxx_myclass-ul
- li: a-lec_li a-lec_li-X
### Quotes
myclass is the registred value after "---" (i.e. --- myclass)
myclass is used on
- ```<blockquote>``` (if no "_cite")
- - blockquote: xxx_quote myclass
- ```<figure>``` if "_cite"
- - figure: xxx_quote-fig myclass
2022-06-28 22:56:48 +02:00
### Write a code in line
If you want to use "`...`" in an inline-code, replace it with ```$(...)```
2022-06-14 18:51:19 +02:00
## Sidebar Content
- aside: xxx_sidebar
- - div: xxx__wrapper
- - - nav: xxx_latest-posts
- - - - h1: xxx_latest-posts
- - - - ul: xxx_latest-posts
- - - - - li: xxx_list-post-item
- - - - - a: xxx_list-post-link
- - - - - - span: xxx_list-post-title
- - - - - - div: xxx__list-post-metas
- - - - - - div: xxx__list-post-info
## Header content
- header: xxx_banner
- - div: xxx_site-logo
- - div: xxx_site-title
- - - h1: xxx_site-name
- - - h2: xxx_site-description
## Footer content
- footer: xxx_footer (ID)
- - div: xxx_footer-infos (ID)
- - div: xxx_footer-about (ID)