The Aldrich templates include a number of styles classes that are available for you to use in WYSIWYG content and in your customizations.
How these work
Using a these styles requires you to apply one or more classes to your desired element.
Applying classes in code / customizations
Add space separated values to the class attribute of your desired element.
...
button
button--outline
button--blue
Applying classes to WYSIWYG content
You can access a list of all available classes in two (very similar) ways:
...
| Info |
|---|
Not all WYSIWYGs offer access to the list of classes (e.g., the footer). This is by design. |
Available styles
Buttons
All buttons require the base class button combined with two modifier classes. One modifier class will define the button as solid vs. outline, and the second modifier class will define the button’s color.
...
Modifier class | What this does | Notes |
|---|---|---|
button--outline | Button type modifier. Defines an outlined button. | Do not combine with other button type modifier classes. |
button--solid | Button type modifier. Defines a solid button. | Do not combine with other button type modifier classes. |
button--blue | Color modifier. Colors the button blue. | Do not combine with other color modifiers. |
button--gold | Color modifier. Colors the button gold. | Do not combine with other color modifiers. |
button--gray | Color modifier. Colors the button gray. | Do not combine with other color modifiers. |
Examples
...
| Code Block |
|---|
<button class="button button--outline button-blue">button</button> |
...
| Code Block |
|---|
<a href="..." class="button button--solid button--gold">link</a> |
Images
Image classes are used to align your images within surrounding content and require the base class image combined with a alignment modifier class.
| Info |
|---|
Image classes can be used with both image and figure elements (<img> and <figure>, respectively) |
Modifier class | What this does | Notes |
|---|---|---|
image--align-center | Centers the image on its own line. | Do not combine with other alignment modifiers. |
image--align-left | Aligns the image left with surrounding content wrapping around the image’s right side. | Do not combine with other alignment modifiers. |
image--align-right | Aligns the image righ with surrounding content wrapping around the image’s left side. | Do not combine with other alignment modifiers. |
Examples
...
| Code Block |
|---|
<img src="..." alt="..." class="image image--align-center"/> |
...
| Code Block |
|---|
<figure class="image image--align-right"> <img src="..." alt="..."/> <figcaption>Caption</figcaption> </figure> |
| Note |
|---|
It can be difficult at times to determine exactly which element you’re applying classes to in WYSIWYGs. When working with figure elements, things will turn out weird if the image classes are applied to the nested image element instead of the figure element itself. To Be sure select a figure element in a WYSIWYG, click on the outside edge of the figure, rather than the image within it or the caption. |
...
Lists
...
the figure and not the image! → Details: Selecting elements in WYSIWYGs |
Lists
...
The Aldrich templates provide a way to stylize lists. Simply add the list class to any list element (<ul> or <ol>).
| Code Block |
|---|
<ul class="list">
...
</ul> |
| Note |
|---|
Lists can be tricky to select in WYSIWYGs. → Details: Selecting elements in WYSIWYGs |
Panels
Panels help content stand out by applying a border and background color. The base class panel is required here along with a color modifier class.
Modifier class | What this does | Notes |
|---|---|---|
panel--gray | Colors the panel gray. | Do not combine with other color modifiers. |
panel--yellow | Colors the panel yellow. | Do not combine with other color modifiers. |
Examples
...
| Code Block |
|---|
<p class="panel panel--gray">...</p> |
...
| Code Block |
|---|
<ul class="panel panel--yellow">
...
</ul> |