137 — CSS building methodology

Markdown → cheat-sheet

101 master

• set the fonts
• call all the css for specific media
• call javascript
• navigation header (optional)
• a slot, where to inject material
• footer (optional)

101.2 define the css variables

• can be done in the master or blog.css
• use :root selector for global definitions

102 body

• set background color, image.
• set as vbox flex → align-items:center

102.1 body (mobiles)

• no need for background, fully covered by abox

103 abox (art box)

• automatically center in the parent
• set width, margin, background color for abox
• set default font (family, size, weight)
• choose how to align items horizontally in the vbox. Options are left, right, center, stretch.

103.1 abox (mobiles)

1. set a background image (optional)
2. Note: abox covers the viewport.

104 Paragraphs

• set or inherit the font (size, family, weight)
• according to font-size, set the width for the paragraph. In order to get 10-12 words per line, set width to 40em-50em.
• if the vbox container have halign left, you can still center the paragraph by using align-self:center
• mobiles : consider using text-size-adjust:none → kilianvalkhof. Can also be done globally using html selector, seems that it cannot be undone later.

105 List Items

1. similar to paragraphs.
2. set or inherit the font (size, family, weight)
3. according to font-size, set the width for the paragraph. In order to get 10-12 words per line, set width to 40em-50em.
4. if the vbox container have halign left, you can still center the paragraph by using align-self:center
5. remove first top-margin using css selector li:first-child
6. do not forget ol

106 code inside paragraphs, lists

• set font used for code, according to paragraph font.
• set color, background-color, character spacing.
• set display to inline-block, disabling word breaking with white-space:nowrap.

107 Headlines

• They will be ql, qr, qc according to container setting. For a vbox container it is defined by align-items.
• The vbox align-item style can be changed for each headline, using align-self
• set the font, color, padding, margin, background.
• Headline should be inline-block, or inline-flex.

108 Collapsing margins

• Reduce top margin on sibling headlines.
• use css selectors h1+h1, h1+h2, h1+h2, h4+ul, etc...

109 Images

• center images in the abox container.
• adjust size, using object-fit

110 Links

• Use :any-link to select an element independent of whether it has been visited or not.
• set font (size,family,weight) for the text in anchor.

111 Table Of Content

• define a class toc.
• set a frame, padding and center in abox.