CSS utility classes

Add CSS utility classes to inputs and content.

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.

An fmd- prefix is added to all class names. However, this can be changed. See the prefix section to learn more.

Composite address input using CSS utility classes

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.

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
)

CSS utility classes for layout

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.

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
)

CSS utility classes for layout

The layout class names will also work in the exact same way for content inside <div> containers.

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

The above classes also have phone-only (< 576px) variants available using the .xs: prefix. For example: .xs:d-flex, .xs:align-items-center, etc.

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

• .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. 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.

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
)