allianceauth/docs/development/custom/css-framework.md
2023-10-24 11:58:34 +02:00

1.0 KiB

CSS Framework

To establish a unified style language throughout Alliance Auth and Community Apps, Alliance Auth is providing its own CSS framework with a couple of CSS classes.

Callout-Boxes

These are similar to the Bootstrap alert/notification boxes, but not as "loud".

Callout-boxes need a base-class (.aa-callout) and a modifier-class (e.g.: .aa-callout-info for an info-box). Modifier classes are available for the usual Bootstrap alert levels "Success", "Info", "Warning" and "Danger".

Alliance Auth Framework: Callout Boxes

HTML

<div class="aa-callout aa-callout-success">
  <p>
    This is a success callout-box.
  </p>
</div>

<div class="aa-callout aa-callout-info">
  <p>
    This is a info callout-box.
  </p>
</div>

<div class="aa-callout aa-callout-warning">
  <p>
    This is a warning callout-box.
  </p>
</div>

<div class="aa-callout aa-callout-danger">
  <p>
    This is a danger callout-box.
  </p>
</div>