# CSS utility classes

## Add class names to inputs and content

Use the `classNames` parameter to add CSS utility classes to inputs and other content. In the example below, the available classes are used to create a composite address input.

{% hint style="info" %}
An `fmd-` prefix is added to all class names. However, this can be changed. [See the prefix section](#prefix) to learn more.
{% endhint %}

<figure><img src="/files/6uzzAZoehcBdRPb0xU9X" alt=""><figcaption><p>Composite address input using CSS utility classes</p></figcaption></figure>

```javascript
import { Composer } from "formsmd";

const composer = new Composer({
  id: "my-form"
});

composer.h1("Enter your address", {
  classNames: ["form-question"]
})

composer.numberInput("house", {
  question: "House #",
  required: true,
  subfield: true,
  classNames: ["col-6"]
})

composer.numberInput("road", {
  question: "Road #",
  required: true,
  subfield: true,
  classNames: ["col-6"]
})

composer.textInput("city", {
  question: "City",
  required: true,
  subfield: true
})
```

Generates the following Markdown-like syntax:

```
#! id = my-form

# [.form-question] Enter your address

[.col-6]
house* = NumberInput(
  | question = House #
  | subfield
)

[.col-6]
road* = NumberInput(
  | question = Road #
  | subfield
)

city* = TextInput(
  | question = City
  | subfield
)
```

***

## Available CSS utility classes

The following CSS utility classes are available by default:

### Layout

All of the content uses a grid based, 12-column system. Add a `.col-{value}` class to any block-level element to have it occupy only a portion of the full width of the row. The layout class names come in the following formats:

* `.col-{value}` (only for tablets and desktops, `≥ 576px`)
* `.xs:col-{value}` (only for phones, `< 576px`)

The `{value}` can be any integer between `1` to `12` (included) or `auto`. For example, `.col-4` would span 4 columns.

```javascript
composer.numberInput("price", {
  question: "Price",
  labelStyle: "classic",
  classNames: ["col-4", "xs:col-6"],
  attrs: [
    {
      "name": "style",
      "value": "border: 1px solid;"
    }
  ]
})

composer.numberInput("quantity", {
  question: "Quantity",
  labelStyle: "classic",
  classNames: ["col-4", "xs:col-6"],
  attrs: [
    {
      "name": "style",
      "value": "border: 1px solid;"
    }
  ]
})
```

Generates the following Markdown-like syntax:

```
[.col-4 .xs:col-6 style="border: 1px solid;"]
price = NumberInput(
  | question = Price
  | labelStyle = classic
)

[.col-4 .xs:col-6 style="border: 1px solid;"]
quantity = NumberInput(
  | question = Quantity
  | labelStyle = classic
)
```

<figure><img src="/files/CciDpAb7udYfZca8ecrC" alt=""><figcaption><p>CSS utility classes for layout</p></figcaption></figure>

Push and pull each column using the following classes:

* `.col-start-{value}`/`.xs:col-start-{value}` (sets `grid-column-start: {value}`)
* `.col-end-{value}`/`.xs:col-end-{value}` (sets `grid-column-end: {value}`)

Here, the `{value}` can be any integer between `1` to `13` (included) or `auto`.

```javascript
composer.numberInput("price", {
  question: "Price",
  labelStyle: "classic",
  classNames: ["col-4", "xs:col-6"],
  attrs: [
    {
      "name": "style",
      "value": "border: 1px solid;"
    }
  ]
})

composer.numberInput("quantity", {
  question: "Quantity",
  labelStyle: "classic",
  classNames: ["col-4", "col-start-9", "xs:col-6"],
  attrs: [
    {
      "name": "style",
      "value": "border: 1px solid;"
    }
  ]
})
```

Generates the following Markdown-like syntax:

```
[.col-4 .xs:col-6 style="border: 1px solid;"]
price = NumberInput(
  | question = Price
  | labelStyle = classic
)

[.col-4 .col-start-9 .xs:col-6 style="border: 1px solid;"]
quantity = NumberInput(
  | question = Quantity
  | labelStyle = classic
)
```

<figure><img src="/files/fYcFd1HCglhjbJJPZlmy" alt=""><figcaption><p>CSS utility classes for layout</p></figcaption></figure>

{% hint style="info" %}
The layout class names will also work in the exact same way for content inside `<div>` containers.
{% endhint %}

### Color

| Class            | Description                                                                      |
| ---------------- | -------------------------------------------------------------------------------- |
| `.text-emphasis` | `color: var(--fmd-emphasis-color)` (`black` in light mode, `white` in dark mode) |
| `.text-accent`   | Sets `color` to `accent`                                                         |

### Display and flex

| Class                      | Description                   |
| -------------------------- | ----------------------------- |
| `.d-inline`                | `display: inline`             |
| `.d-inline-block`          | `display: inline-block`       |
| `.d-block`                 | `display: block`              |
| `.d-inline-flex`           | `display: inline-flex`        |
| `.d-flex`                  | `display: flex`               |
| `.align-items-center`      | `align-items: center`         |
| `.justify-content-start`   | `justify-content: flex-start` |
| `.justify-content-center`  | `justify-content: center`     |
| `.justify-content-end`     | `justify-content: flex-end`   |
| `.justify-content-stretch` | `justify-content: stretch`    |
| `.d-none`                  | `display: none`               |

{% hint style="info" %}
The above classes also have phone-only (`< 576px`) variants available using the `.xs:` prefix. For example: `.xs:d-flex`, `.xs:align-items-center`, etc.
{% endhint %}

### Heading

| Class       | Description                        |
| ----------- | ---------------------------------- |
| `.h1`       | Matches the appearance of `<h1>`   |
| `.h2`       | Matches the appearance of `<h2>`   |
| `.h3`       | Matches the appearance of `<h3>`   |
| `.h4`       | Matches the appearance of `<h4>`   |
| `.h5`       | Matches the appearance of `<h5>`   |
| `.h6`       | Matches the appearance of `<h6>`   |
| `.anchored` | Adds an anchor link to the heading |

### Font size

| Class             | Description                                              |
| ----------------- | -------------------------------------------------------- |
| `.fs-lead`        | `font-size: var(--fmd-font-size-lg)` (`18px` by default) |
| `.specific-fs-12` | `font-size: 12px`                                        |
| `.specific-fs-14` | `font-size: 14px`                                        |
| `.specific-fs-16` | `font-size: 16px`                                        |
| `.specific-fs-18` | `font-size: 18px`                                        |
| `.specific-fs-20` | `font-size: 20px`                                        |

### Font weight

| Class          | Description            |
| -------------- | ---------------------- |
| `.fw-lighter`  | `font-weight: lighter` |
| `.fw-light`    | `font-weight: 300`     |
| `.fw-normal`   | `font-weight: 400`     |
| `.fw-medium`   | `font-weight: 500`     |
| `.fw-semibold` | `font-weight: 600`     |
| `.fw-bold`     | `font-weight: 700`     |
| `.fw-bolder`   | `font-weight: bolder`  |

### Form

| Class               | Description                                        |
| ------------------- | -------------------------------------------------- |
| `.form-question`    | Matches the appearance of a form field question    |
| `.form-description` | Matches the appearance of a form field description |

### Light/dark mode

| Class      | Description                        |
| ---------- | ---------------------------------- |
| `.hide-lm` | `display: none` only in light mode |
| `.hide-dm` | `display: none` only in dark mode  |

### List

| Class            | Description                                         |
| ---------------- | --------------------------------------------------- |
| `.list-inside`   | `padding-left: 0` and `list-style-position: inside` |
| `.list-unstyled` | `padding-left: 0` and `list-style: none`            |

### LTR/RTL

| Class       | Description                 |
| ----------- | --------------------------- |
| `.hide-ltr` | `display: none` only in LTR |
| `.hide-rtl` | `display: none` only in RTL |

### Spacing

The class names for the `margin` and `padding` utilities come in the following formats:

* `.m{sides}-{size}` for `margin`&#x20;
* `.p{sides}-{size}` for `padding`

#### {sides}

| {sides}     | Description                                              |
| ----------- | -------------------------------------------------------- |
| `t`         | Sets `margin-top` or `padding-top`                       |
| `b`         | Sets `margin-bottom` or `padding-bottom`                 |
| `s` (start) | Sets `margin-left` or `padding-left` (inverted in RTL)   |
| `e` (end)   | Sets `margin-right` or `padding-right` (inverted in RTL) |

#### {size}

| {size} | Description                                    |
| ------ | ---------------------------------------------- |
| `0`    | Sets `margin` or `padding` to `0`              |
| `1`    | Sets `margin` or `padding` to `4px`            |
| `2`    | Sets `margin` or `padding` to `8px`            |
| `3`    | Sets `margin` or `padding` to `16px`           |
| `auto` | Sets `margin-left` or `margin-right` to `auto` |

### Text alignment

| Class             | Description                                          |
| ----------------- | ---------------------------------------------------- |
| `.text-start`     | `text-align: left` (inverted in RTL)                 |
| `.text-center`    | `text-align: center`                                 |
| `.text-end`       | `text-align: right` (inverted in RTL)                |
| `.xs:text-start`  | `text-align: left` only on phones (inverted in RTL)  |
| `.xs:text-center` | `text-align: center` only on phones                  |
| `.xs:text-end`    | `text-align: right` only on phones (inverted in RTL) |

### Visibility

| Class        | Description          |
| ------------ | -------------------- |
| `.invisible` | `visibility: hidden` |

***

## Prefix

By default, an `fmd-` prefix is added to all class names when the `classNames` parameter is used. This is mainly used for scoping and avoiding collisions with other CSS that may be present. However, this can be changed using the `cssPrefix` [form setting](/getting-started/settings.md). For example, setting `cssPrefix` to `"none"` would remove the prefix altogether. This means that you can use your own CSS utility classes, even the ones available in frameworks like Tailwind.

```javascript
const composer = new Composer({
  cssPrefix: "none",
  id: "my-form"
});

composer.emailInput("email", {
  question: "Join our mailing list",
  required: true,
  classNames: ["text-blue-500"]
});
```

Generates the following Markdown-like syntax:

```
#! css-prefix = none
#! id = my-form

[.text-blue-500]
email* = EmailInput(
  | question = Join our mailing list
)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.forms.md/content/css-utility-classes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.