Class names and attributes
Learn how to add class names and attributes, see the full list of available CSS utility classes, and find out how you can use Tailwind CSS.
Add class names and attributes
Add class names and other attributes (such as IDs, WAI-ARIA tags, etc.) to any block-level element by putting them inside [...]
and placing this at the very start of the element's syntax. IDs start with #
, class names start with .
, and other attributes can be added as-is, for example, style="..."
.
Here's how you can add class names and attributes to all the elements that support it:
<div>
element and data-binding
<div>
element and data-bindingCreate wrapping <div>
elements by putting content inside pairs of :::
. The content inside can be any valid Markdown, such as headings, paragraphs, lists, form fields, etc. Class names and other attributes are supported via [...]
. Moreover, you can bind one or more fields to a <div>
element by adding the names of the fields inside {$...$}
(separated by spaces), and placing this within the [...]
. This means that whenever the value of a binded field changes, the content inside the <div>
will be automatically re-rendered.
Learn more about data-binding.
Available CSS utility classes
The following CSS utility classes are included by default in blocks.md:
Layout
The content in blocks.md uses a grid based, 12-column system. This means you can add a .col-{value}
class to any block-level element to have it occupy only a portion of the full width of the row. These class names come in the following formats:
.col-{value}
(only for non-phone devices,≥ 576px
).xs:col-{value}
(only for phones,< 576px
)
The {value}
can be any integer between 1
to 12
(included) or auto
. So for example, .col-4
would span 4 columns.
You can also push and pull each column using the following classes:
.col-start-{value}
/.xs:col-start-{value}
(setsgrid-column-start: {value}
).col-end-{value}
/.xs:col-end-{value}
(setsgrid-column-end: {value}
)
Here, the {value}
can be any integer between 1
to 13
(included) or auto
.
<div>
elements created using :::
can also be given .col-{value}
classes. Moreover, each <div>
element is also a 12-column grid, so these classes can also be used on sub-elements within the <div>
.
Color
Class | Description |
---|---|
|
|
| Sets |
Display (and flex)
Class | Description |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Heading
Class | Description |
---|---|
| Match the appearance of |
| Match the appearance of |
| Match the appearance of |
| Match the appearance of |
| Match the appearance of |
| Match the appearance of |
| Adds an anchor link to the heading ( |
Font size
Class | Description |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
Font weight
Class | Description |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Form
Class | Description |
---|---|
| Match the appearance of a form field question |
| Match the appearance of a form field description |
Light/dark mode
Class | Description |
---|---|
|
|
|
|
List
Class | Description |
---|---|
|
|
|
|
LTR/RTL
Class | Description |
---|---|
|
|
|
|
Spacing
The class names for the margin
and padding
utilities come in the following formats: .m{sides}-{size}
and .p{sides}-{size}
.
{sides}
{sides}
| Description |
| Sets |
| Sets |
| Sets |
| Sets |
{size}
{size}
| Description |
| Sets |
| Sets |
| Sets |
| Sets |
| Sets |
Text alignment
Class | Description |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
Visibility
Class | Description |
---|---|
|
|
Use with Tailwind CSS or other frameworks
blocks.md adds a bmd-
prefix to all CSS classes. This prefix comes from the #! css-prefix = bmd-
setting. You can see how all of the available utility classes discussed on this page have this prefix in blocksmd.css
. This makes sure that there are no collisions with other CSS frameworks that you may choose to use.
Therefore, if you want to use Tailwind CSS with your forms and pages, you would need to do the following:
Set prefix to
none
by adding the#! css-prefix = none
line.Include Tailwind CSS in your
base.html
.
After that, you can add Tailwind classes in [...]
and everything should work as expected when you build your forms and pages by running the blocksmd
command.
Last updated