tessl/npm-primeflex

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Form Layout Utilities

Name: tessl/npm-primeflex
Author: tessl

Form layout utilities provide specialized classes for organizing form elements, creating consistent spacing, and handling different form field types with proper alignment and structure.

Capabilities

Field Container

Base container for form fields that provides consistent bottom margin and label handling.

.field {
  margin-bottom: 1rem;
}

.field > label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

.field > small {
  margin-top: 0.25rem;
}

Grid-Based Fields

Integration between form fields and the grid system for horizontal form layouts.

.field.grid > label {
  display: flex;
  align-items: center;
}

.field.grid,
.formgrid.grid {
  margin-top: 0;
}

.field.grid .col,
.field.grid .col-1,
.field.grid .col-2,
/* ... all col classes ... */
.field.grid .col-12,
.formgrid.grid .col,
.formgrid.grid .col-1,
/* ... etc ... */ {
  padding-top: 0;
  padding-bottom: 0;
}

Inline Form Groups

Horizontal layout for form elements with proper spacing.

.formgroup-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.formgroup-inline .field,
.formgroup-inline .field-checkbox,
.formgroup-inline .field-radiobutton {
  margin-right: 1rem;
}

.formgroup-inline .field > label,
.formgroup-inline .field-checkbox > label,
.formgroup-inline .field-radiobutton > label {
  margin-right: 0.5rem;
  margin-bottom: 0;
}

Checkbox and Radio Button Fields

Specialized field containers for checkbox and radio button inputs with proper alignment.

.field-checkbox,
.field-radiobutton {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.field-checkbox > label,
.field-radiobutton > label {
  margin-left: 0.5rem;
  line-height: 1;
}

Usage Examples

Basic Vertical Form

<div class="field">
  <label for="username">Username</label>
  <input id="username" type="text" class="w-full p-2 border-1 border-round">
  <small>Enter your username</small>
</div>

<div class="field">
  <label for="email">Email</label>
  <input id="email" type="email" class="w-full p-2 border-1 border-round">
</div>

Horizontal Form with Grid

<div class="field grid">
  <label for="firstname" class="col-12 md:col-3">First Name</label>
  <div class="col-12 md:col-9">
    <input id="firstname" type="text" class="w-full p-2 border-1 border-round">
  </div>
</div>

<div class="field grid">
  <label for="lastname" class="col-12 md:col-3">Last Name</label>
  <div class="col-12 md:col-9">
    <input id="lastname" type="text" class="w-full p-2 border-1 border-round">
  </div>
</div>

Inline Form Group

<div class="formgroup-inline">
  <div class="field">
    <label for="city">City</label>
    <input id="city" type="text" class="p-2 border-1 border-round">
  </div>
  
  <div class="field">
    <label for="state">State</label>
    <input id="state" type="text" class="p-2 border-1 border-round">
  </div>
  
  <div class="field">
    <label for="zip">Zip</label>
    <input id="zip" type="text" class="p-2 border-1 border-round">
  </div>
</div>

Checkbox and Radio Fields

<div class="field-checkbox">
  <input id="newsletter" type="checkbox" class="mr-2">
  <label for="newsletter">Subscribe to newsletter</label>
</div>

<div class="field-radiobutton">
  <input id="option1" type="radio" name="choice" class="mr-2">
  <label for="option1">Option 1</label>
</div>

<div class="field-radiobutton">
  <input id="option2" type="radio" name="choice" class="mr-2">
  <label for="option2">Option 2</label>
</div>

Configuration Variables

Form layout utilities use these configurable variables:

$fieldMargin: 1rem !default;         // Bottom margin for .field
$fieldLabelMargin: 0.5rem !default;  // Bottom margin for field labels
$helperTextMargin: 0.25rem !default; // Top margin for helper text

Install with Tessl CLI