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

Typography

Name: tessl/npm-primeflex
Author: tessl

PrimeFlex provides comprehensive typography utilities for text styling, including alignment, decoration, transformation, font weights, sizes, and line heights. All typography utilities support responsive breakpoints.

Text Alignment

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

Text Decoration

.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

Text Transform

.lowercase { text-transform: lowercase; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

Text Overflow

.text-overflow-clip { text-overflow: clip; }
.text-overflow-ellipsis { text-overflow: ellipsis; }

Font Weight

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-xs { font-size: 0.75rem; }       /* 12px */
.text-sm { font-size: 0.875rem; }      /* 14px */
.text-base { font-size: 1rem; }        /* 16px */
.text-lg { font-size: 1.125rem; }      /* 18px */
.text-xl { font-size: 1.25rem; }       /* 20px */
.text-2xl { font-size: 1.5rem; }       /* 24px */
.text-3xl { font-size: 1.875rem; }     /* 30px */
.text-4xl { font-size: 2.25rem; }      /* 36px */
.text-5xl { font-size: 3rem; }         /* 48px */
.text-6xl { font-size: 3.75rem; }      /* 60px */
.text-7xl { font-size: 4.5rem; }       /* 72px */
.text-8xl { font-size: 6rem; }         /* 96px */

Line Height

.line-height-1 { line-height: 1; }
.line-height-2 { line-height: 1.25; }
.line-height-3 { line-height: 1.5; }
.line-height-4 { line-height: 1.75; }
.line-height-5 { line-height: 2; }
.line-height-6 { line-height: 2.25; }
.line-height-7 { line-height: 2.5; }
.line-height-8 { line-height: 2.75; }

White Space

.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }

Responsive Variants

All typography utilities support responsive breakpoints:

// Small screens (≥576px)
.sm\\:text-center { /* text-align: center at sm+ */ }
.sm\\:text-lg { /* font-size: 1.125rem at sm+ */ }
.sm\\:font-bold { /* font-weight: 700 at sm+ */ }
// ... all typography classes with sm: prefix

// Medium screens (≥768px)
.md\\:text-left { /* text-align: left at md+ */ }
.md\\:text-2xl { /* font-size: 1.5rem at md+ */ }
.md\\:line-height-3 { /* line-height: 1.5 at md+ */ }
// ... all typography classes with md: prefix

// Large screens (≥992px)
.lg\\:text-right { /* text-align: right at lg+ */ }
.lg\\:text-4xl { /* font-size: 2.25rem at lg+ */ }
.lg\\:font-semibold { /* font-weight: 600 at lg+ */ }
// ... all typography classes with lg: prefix

// Extra large screens (≥1200px)
.xl\\:text-center { /* text-align: center at xl+ */ }
.xl\\:text-6xl { /* font-size: 3.75rem at xl+ */ }
.xl\\:uppercase { /* text-transform: uppercase at xl+ */ }
// ... all typography classes with xl: prefix

Usage Examples

Responsive Headings

<div class="text-center mb-6">
  <h1 class="m-0 mb-3 text-2xl md:text-4xl lg:text-6xl font-bold text-primary">
    Responsive Heading
  </h1>
  <p class="m-0 text-base md:text-lg text-color-secondary line-height-3">
    Subtitle that scales with screen size
  </p>
</div>

Article Content

<article class="max-w-4xl mx-auto p-4">
  <header class="mb-6">
    <h1 class="m-0 mb-2 text-3xl md:text-4xl font-bold text-color line-height-2">
      Article Title
    </h1>
    <p class="m-0 text-sm text-color-secondary uppercase font-medium">
      Published on March 15, 2024
    </p>
  </header>
  
  <div class="text-base text-color line-height-3">
    <p class="mb-4">
      This is the article content with proper typography styling. 
      The text uses a comfortable line height for reading.
    </p>
    
    <blockquote class="border-left-3 border-primary pl-4 py-2 my-4 bg-primary-50 text-primary-800 font-medium italic">
      "This is a blockquote with emphasis styling and proper spacing."
    </blockquote>
    
    <p class="mb-4">
      More content continues here with consistent spacing and typography.
    </p>
  </div>
</article>

<nav class="flex align-items-center justify-content-between p-4 bg-white shadow-1">
  <div class="text-xl font-bold text-primary">
    Brand Name
  </div>
  
  <ul class="flex list-none m-0 p-0 gap-4">
    <li>
      <a href="#" class="text-color no-underline font-medium hover:text-primary hover:underline">
        Home
      </a>
    </li>
    <li>
      <a href="#" class="text-color no-underline font-medium hover:text-primary hover:underline">
        About
      </a>
    </li>
    <li>
      <a href="#" class="text-color no-underline font-medium hover:text-primary hover:underline">
        Contact
      </a>
    </li>
  </ul>
</nav>

Card Typography

<div class="p-4 surface-card border-round shadow-2">
  <div class="flex align-items-center gap-3 mb-3">
    <div class="w-3rem h-3rem bg-primary border-circle flex align-items-center justify-content-center">
      <span class="text-white font-bold text-lg">JD</span>
    </div>
    <div>
      <h3 class="m-0 text-lg font-semibold text-color">John Doe</h3>
      <span class="text-sm text-color-secondary">Software Engineer</span>
    </div>
  </div>
  
  <p class="m-0 text-base text-color line-height-3">
    "This is a testimonial with proper typography hierarchy and spacing."
  </p>
  
  <div class="flex align-items-center justify-content-between mt-4">
    <span class="text-xs text-color-secondary uppercase font-medium">
      2 hours ago
    </span>
    <div class="text-yellow-500">
      ★★★★★
    </div>
  </div>
</div>

Form Labels and Text

<form class="p-4 surface-section border-round">
  <div class="mb-4">
    <label class="block mb-2 text-sm font-semibold text-color">
      Full Name *
    </label>
    <input type="text" class="w-full p-3 border-1 border-surface-300 border-round text-base">
    <small class="text-xs text-red-500 mt-1 block">
      This field is required
    </small>
  </div>
  
  <div class="mb-4">
    <label class="block mb-2 text-sm font-semibold text-color">
      Description
    </label>
    <textarea rows="4" class="w-full p-3 border-1 border-surface-300 border-round text-base" 
              placeholder="Enter description..."></textarea>
    <small class="text-xs text-color-secondary mt-1 block">
      Maximum 500 characters
    </small>
  </div>
  
  <button type="submit" class="px-4 py-2 bg-primary text-white border-none border-round font-medium">
    Submit Form
  </button>
</form>

Text Truncation

<div class="p-4 surface-card border-round shadow-1">
  <h3 class="m-0 mb-2 text-lg font-semibold text-color">
    Card with Long Title
  </h3>
  
  <!-- Single line truncation -->
  <p class="m-0 mb-3 text-sm text-color-secondary whitespace-nowrap overflow-hidden text-overflow-ellipsis">
    This is a very long description that will be truncated with ellipsis when it exceeds the container width
  </p>
  
  <!-- Multi-line text with line height -->
  <p class="m-0 text-base text-color line-height-3">
    This is regular paragraph text that wraps normally and maintains proper line spacing for readability.
  </p>
</div>

Status Messages

<div class="flex flex-column gap-3">
  <!-- Success message -->
  <div class="p-3 bg-green-50 border-left-3 border-green-500 text-green-800">
    <span class="font-semibold text-sm uppercase">Success</span>
    <p class="m-0 mt-1 text-sm line-height-3">
      Your changes have been saved successfully.
    </p>
  </div>
  
  <!-- Warning message -->
  <div class="p-3 bg-yellow-50 border-left-3 border-yellow-500 text-yellow-800">
    <span class="font-semibold text-sm uppercase">Warning</span>
    <p class="m-0 mt-1 text-sm line-height-3">
      Please review your input before proceeding.
    </p>
  </div>
  
  <!-- Error message -->
  <div class="p-3 bg-red-50 border-left-3 border-red-500 text-red-800">
    <span class="font-semibold text-sm uppercase">Error</span>
    <p class="m-0 mt-1 text-sm line-height-3">
      An error occurred while processing your request.
    </p>
  </div>
</div>

Code and Monospace Text

<div class="p-4 surface-card border-round shadow-1">
  <h3 class="m-0 mb-3 text-lg font-bold text-color">
    Installation Guide
  </h3>
  
  <p class="m-0 mb-3 text-base text-color line-height-3">
    Install PrimeFlex using npm:
  </p>
  
  <code class="block p-3 bg-surface-100 border-round text-sm font-mono text-color">
    npm install primeflex
  </code>
  
  <p class="m-0 mt-3 text-sm text-color-secondary">
    Then import it in your project's main CSS file.
  </p>
</div>

Pricing Table Typography

<div class="grid">
  <div class="col-12 md:col-4">
    <div class="p-6 surface-card border-round shadow-2 text-center">
      <h3 class="m-0 mb-2 text-xl font-bold text-color">Basic</h3>
      <p class="m-0 mb-4 text-sm text-color-secondary uppercase">For individuals</p>
      
      <div class="mb-4">
        <span class="text-4xl font-bold text-primary">$9</span>
        <span class="text-sm text-color-secondary">/month</span>
      </div>
      
      <ul class="list-none m-0 p-0 text-left mb-6">
        <li class="mb-2 text-sm text-color">✓ 5 projects</li>
        <li class="mb-2 text-sm text-color">✓ 10GB storage</li>
        <li class="mb-2 text-sm text-color">✓ Email support</li>
      </ul>
      
      <button class="w-full p-3 bg-primary text-white border-none border-round font-semibold">
        Get Started
      </button>
    </div>
  </div>
</div>

Install with Tessl CLI