Share via:

Beamtic HTML Article Layout Guide

HTML Styling Guide for Article-writing on Beamtic

55 views

Edited: 2020-01-18 23:35

When writing raw HTML articles we can use almost any element we want. For custom styling, we can embed style elements in the content immediately above the elements we want to style. Custom IDs and classes may also be used in style blocks.

If something is going to be reused in other articles, it should instead be included in the default template.

Note. all future CSS classes and IDs will be prefixed with the dk_ namespace in order to avoid conflicts with dependencies and plugins. The migration will happen gradually as code is refactored.

When writing articles, text should always be included in p elements, unless creating a HTML list or table.

Classes that can be used in content safely

The following classes are all part of the default template.

Text and inline styling:

  1. indent — applies a text-indent and an italic style to a paragraph element.
  2. inline_example — used for inline code examples, usually on b or i elements.
  3. fire — highlights the text with a fire-like color.

Boxes:

  1. article-img — used on the representative article-image. The image will float to the right and become mobile friendly.
  2. content_image — can be used on images within the content.
  3. center — used to center an element. The element becomes a block and has auto margin. Used primarily on images!
  4. dlbox — used to include download links in articles. Downloadable files should be placed in the "files" directory of the site root.
  5. dk_table — used on a HTML table element. Applies default styling to the table.
  6. dk_note — used to include a "note" box in the content. Typically the word "Note." will also be included at the beginning of the first paragraph, in bold. Use it on a div element.

Code:

  1. CodeC1 — use it on pre elements for code examples that are done right.
  2. CodeC2 — use it on pre elements for code examples that are incorrect.
  3. sh_[language] — used on pre elements to enable syntax highlighting on the server side. I.e: class="CodeC1 sh_php"

Comments