Open-source software for Joomla, Gitea, and web platforms. Home of MokoSuite, MokoGitea, and MokoCLI.

Tennessee

standards/coding-css.-

CSS Standards

CSS conventions for Joomla templates, components, and modules.

BEM Naming

Use Block-Element-Modifier naming:

/* Block */
.moko-backup {}

/* Element */
.moko-backup__header {}
.moko-backup__status {}
.moko-backup__progress-bar {}

/* Modifier */
.moko-backup--running {}
.moko-backup__status--error {}
.moko-backup__status--success {}

All MokoSuite classes are prefixed with moko- to avoid conflicts with Joomla core and third-party styles.

CSS Custom Properties

Define theme variables on :root with the --moko- prefix:

:root {
  /* Brand colors */
  --moko-primary: #2563eb;
  --moko-primary-hover: #1d4ed8;
  --moko-secondary: #64748b;
  --moko-accent: #f59e0b;

  /* Semantic colors */
  --moko-success: #22c55e;
  --moko-warning: #f59e0b;
  --moko-danger: #ef4444;
  --moko-info: #3b82f6;

  /* Surfaces */
  --moko-bg: #ffffff;
  --moko-bg-secondary: #f8fafc;
  --moko-bg-elevated: #ffffff;
  --moko-border: #e2e8f0;

  /* Text */
  --moko-text: #1e293b;
  --moko-text-secondary: #64748b;
  --moko-text-muted: #94a3b8;

  /* Spacing */
  --moko-space-xs: 0.25rem;
  --moko-space-sm: 0.5rem;
  --moko-space-md: 1rem;
  --moko-space-lg: 1.5rem;
  --moko-space-xl: 2rem;

  /* Typography */
  --moko-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --moko-font-size-sm: 0.875rem;
  --moko-font-size-md: 1rem;
  --moko-font-size-lg: 1.25rem;

  /* Borders */
  --moko-radius: 0.375rem;
  --moko-radius-lg: 0.5rem;
}

Dark Mode

Support prefers-color-scheme by overriding custom properties:

@media (prefers-color-scheme: dark) {
  :root {
    --moko-bg: #0f172a;
    --moko-bg-secondary: #1e293b;
    --moko-bg-elevated: #1e293b;
    --moko-border: #334155;
    --moko-text: #f1f5f9;
    --moko-text-secondary: #94a3b8;
    --moko-text-muted: #64748b;
  }
}

MokoOnyx template also supports manual toggle via [data-moko-theme="dark"].

Responsive Breakpoints

/* Mobile first — default styles are mobile */

/* Tablet */
@media (min-width: 768px) { }

/* Desktop */
@media (min-width: 1024px) { }

/* Wide */
@media (min-width: 1280px) { }

Always design mobile-first. Use min-width media queries.

Joomla Web Asset Manager

Register styles via joomla.asset.json:

{
  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
  "name": "com_mokosuitebackup",
  "assets": [
    {
      "name": "com_mokosuitebackup.admin",
      "type": "style",
      "uri": "com_mokosuitebackup/admin.css",
      "dependencies": ["joomla.bootstrap.css"]
    }
  ]
}

Load in views:

$wa = $this->document->getWebAssetManager();
$wa->useStyle('com_mokosuitebackup.admin');

Prohibited

!important — restructure specificity instead
Inline styles in PHP templates — use classes
ID selectors for styling — use classes only
Fixed pixel widths on containers — use max-width + percentages
Vendor prefixes without autoprefixer — let build tools handle it
float for layout — use flexbox or grid

Pages