Every HTML element styled for BaseFrame — headings, lists, tables, code blocks, blockquotes, alerts, and more.
Typography Showcase
Every HTML element styled for BaseFrame.
Headings
Heading 1 — The Main Title
Heading 2 — Section Title
Heading 3 — Subsection
Heading 4 — Detail Header
Heading 5 — Minor Header
Heading 6 — Smallest
Paragraphs & Inline Elements
This is a standard paragraph with bold text, italic text, inline code, highlighted text, and a hyperlink. Here is small text and here is abbr.
A second paragraph to show spacing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Blockquote
Design is not just what it looks like and feels like. Design is how it works.
Lists
Unordered List
- First item in the list
- Second item with a link inside
- Third item with bold text
- Nested list:
- Nested item one
- Nested item two
Ordered List
- Install BaseFrame
- Choose your CSS framework
- Deploy to production
Code
Inline: php cli/joomla.php cache:clean
// BaseFrame adapter loading
$this->addStyleSheet($mediaBase . '/css/base.css');
$this->addStyleSheet($mediaBase . '/css/lib/' . $fw['lib']);
$this->addStyleSheet($mediaBase . '/css/adapters/' . $fw['css']);
Table
| Framework | Type | Size | Dark Mode |
|---|---|---|---|
| Bulma | Full | 200KB | No |
| DaisyUI | Full | 140KB | Yes |
| Halfmoon | Dark-first | 90KB | Yes |
| Pico CSS | Classless | 10KB | Yes |
| NES.css | Retro | 45KB | No |
Alerts
Buttons
Horizontal Rule
Content after a horizontal rule.
Details / Accordion
Click to expand this section
This content is hidden by default and revealed when the user clicks the summary.
Another collapsible section
More hidden content here. Useful for FAQs, changelogs, and documentation.
Images