Pala CSS

Overview

The Pala CSS system provides a consistent, themeable foundation for building blocks. This guide covers the core components, naming conventions, and theming capabilities of the system.

Usage

You can use Pala CSS by including the cdn link for both the reset and the component styles.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pala-css@latest/reset.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pala-css@latest/components.css">

Core Components

Block Container (.pala-block-container)

A wrapper component that provides consistent spacing and width constraints.

<div class="pala-block-container">
  <!-- Block content -->
</div>

Customization:

• --block-container-max-width: Maximum width (default: 1200px)
• --block-container-padding-block: Vertical padding (default: 5rem)
• --block-container-padding-inline: Horizontal padding (default: 2rem)

Heading (.pala-heading)

Consistent typography for headings with balanced text wrapping.

<h1 class="pala-heading">Page Title</h1>

Customization:

• --heading-font-family: Font family
• --heading-font-size: Font size (default: 2.5rem)
• --heading-line-height: Line height (default: 1)
• --heading-font-weight: Font weight (default: 600)
• --heading-color: Text color

Button (.pala-button)

Versatile button component with solid and outline styles.

<button class="pala-button">Click Me</button>
<a class="pala-button -outline">Outline Button</a>

Customization:

• --button-gap: Content spacing (default: 0.5rem)
• --button-color: Text color
• --button-background: Background color
• --button-border: Border style
• --button-border-radius: Border radius
• --button-padding-block: Vertical padding
• --button-padding-inline: Horizontal padding

Prose (.pala-prose)

Rich text container with consistent typography and spacing.

<div class="pala-prose">
  <h1>Article Title</h1>
  <p>Content...</p>
</div>

Customization includes variables for:

• Paragraphs
  • --prose-p-color: Text color
  • --prose-p-margin-block: Vertical margin
  • --prose-p-line-height: Line height
• Headings (h1-h6)
  • --prose-h1-color: Text color
  • --prose-h1-font-family: Font family
  • --prose-h1-font-size: Font size
  • --prose-h1-line-height: Line height
  • --prose-h1-font-weight: Font weight
  • --prose-h1-margin-bottom: Bottom margin
• Unordered Lists
  • --prose-ul-list-style: List style
  • --prose-ul-margin-block: Vertical margin
  • --prose-ul-padding-left: Left padding
• Ordered Lists
  • --prose-ol-list-style: List style
  • --prose-ol-margin-block: Vertical margin
  • --prose-ol-padding-left: Left padding
• Blockquotes
  • --prose-blockquote-margin-block: Vertical margin
  • --prose-blockquote-border: Border
  • --prose-blockquote-padding: Padding
  • --prose-blockquote-box-shadow: Shadow
  • --prose-blockquote-border-radius: Border radius
• Code blocks
  • --prose-pre-background: Background color
  • --prose-pre-border: Border
  • --prose-pre-border-radius: Border radius
  • --prose-pre-margin-block: Vertical margin
  • --prose-pre-padding: Padding
  • --prose-pre-font-family: Font family
  • --prose-pre-font-size: Font size
  • --prose-pre-line-height: Line height
  • --prose-pre-color: Color
• Horizontal rules
  • --prose-hr-margin-block Vertical margin
  • --prose-hr-border-color Border color

CSS Naming Conventions

Component Structure

<div class="card -large">
    <div class="_content">
        <div class="_header">
            <h1 class="_title">Title</h1>
        </div>
    </div>
</div>

Rules

Root Components

• No prefix: card, button-group
• Can use modifiers
• Represent main UI elements

Child Elements

• Underscore prefix: _content, _header
• Must be nested within parent
• Represent component parts

Modifiers

• Hyphen prefix: -large, -outline
• Only on root components
• Represent variants

CSS Structure

.card {
    /* Base styles */

    &.-large {
        /* Modifier styles */

        ._header {
            /* Nested element styles when modified */
        }
    }

    ._header {
        /* Element styles */
    }
}

Theming

Site-Level Customization

:root {
    /* Design Tokens */
    --primary-color: #ff6b6b;
    --radius: 8px;
    --shadow: 0 2px 4px rgba(0,0,0,0.1);
    --heading-font: 'Playfair Display';
    --body-font: 'Inter';

    /* Component Themes */
    --button-border-radius: 9999px;
    --prose-blockquote-border: 2px solid var(--primary-color);
}

Responsive Theming

:root {
    --block-container-max-width: 800px;
    --block-container-padding-inline: 1rem;
}

@media (min-width: 768px) {
    :root {
        --block-container-max-width: 1000px;
        --block-container-padding-inline: 2rem;
    }
}

Dark Mode

:root {
    --primary-color: #6c5ce7;
    --prose-p-color: #2d3436;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #a29bfe;
        --prose-p-color: #dfe6e9;
    }
}

Best Practices

Using CSS Variables

• Use variables for themeable properties
• Reference design system tokens where appropriate
• Consider responsive adjustments
• Plan for dark mode support

Component Integration

• Use Pala components for consistent styling
• Follow naming conventions for custom components
• Maintain proper nesting structure
• Consider component evolution

Responsive Design

• Use CSS variables for breakpoint adjustments
• Plan mobile-first layouts
• Test across device sizes
• Consider container queries where appropriate

Tips and Techniques

Component Evolution

As components grow, consider breaking out complex sections:

<!-- Before -->
<div class="card">
    <div class="_header">
        <h1 class="_title">Title</h1>
    </div>
</div>

<!-- After -->
<div class="card">
    <div class="card-header">
        <h1 class="_title">Title</h1>
    </div>
</div>

Context-Specific Styling

Use CSS variables for different contexts:

/* Global styles */
:root {
    --button-background: var(--primary-color);
}

/* Section-specific */
.hero-section {
    --button-background: white;
    --button-color: black;
}