Styling Guide

This guide helps you write custom HTML for headers, footers, and fragments in Public Skins. You don't need to be a developer to create beautiful, consistent designs - just follow these patterns.

HTML Basics

HTML uses elements to structure content. Elements are written with angle brackets:

<div>This is a container</div>
<p>This is a paragraph</p>
<a href="/about">This is a link</a>
<img src="logo.png" alt="Our logo" />

Elements can have attributes that provide extra information. The most important attribute for styling is class:

<div class="bg-white p-4">Content here</div>

The class attribute contains one or more class names separated by spaces. Each class name applies a specific style to the element. In the example above, bg-white makes the background white, and p-4 adds padding.

Think of classes like labels you stick on an element to describe how it should look.

How Styling Works

Public Skins use Tailwind CSS for styling. Instead of writing separate CSS code, you add class names directly to your HTML elements. These class names describe what the element should look like.

For example, instead of writing:

.my-header {
  background-color: white;
  padding: 16px;
}

You write classes directly on the element:

<div class="bg-white p-4">...</div>

This approach is called "utility-first" styling. Each class does one thing, and you combine them to create your design.

---

Tailwind CSS Crash Course

Understanding Class Names

Tailwind classes follow a pattern: property-value. Here are the most common ones you'll use:

Background Colors

Class	What it does
bg-white	White background
bg-black	Black background
bg-gray-100	Very light gray (almost white)
bg-gray-200	Light gray
bg-gray-300	Medium-light gray
bg-gray-500	Medium gray
bg-gray-700	Dark gray
bg-gray-800	Very dark gray
bg-gray-900	Nearly black

Tip: The number represents darkness. 100 is lightest, 900 is darkest.

Text Colors

Class	What it does
text-white	White text
text-black	Black text
text-gray-500	Medium gray text
text-gray-700	Dark gray text

Text Size

Class	What it does
text-xs	Extra small text
text-sm	Small text
text-base	Normal size (default)
text-lg	Large text
text-xl	Extra large
text-2xl	2x large
text-3xl	3x large

Font Weight

Class	What it does
font-normal	Normal weight
font-medium	Medium weight
font-semibold	Semi-bold
font-bold	Bold

Spacing (Padding and Margin)

Spacing uses numbers that correspond to a scale. Here's what they roughly translate to:

Number	Size
0	0px
1	4px (0.25rem)
2	8px (0.5rem)
3	12px (0.75rem)
4	16px (1rem)
6	24px (1.5rem)
8	32px (2rem)

Padding (space inside an element):

• p-4 = padding on all sides

• px-4 = padding left and right only

• py-4 = padding top and bottom only

• pt-4 = padding top only

• pb-4 = padding bottom only

• pl-4 = padding left only

• pr-4 = padding right only

Margin (space outside an element):

• m-4 = margin on all sides

• mx-4 = margin left and right

• my-4 = margin top and bottom

• mt-4 = margin top only

• mb-4 = margin bottom only

Width

Class	What it does
w-full	100% width
w-1/2	50% width
w-1/3	33% width
w-2/3	66% width
w-auto	Automatic width

Height

Class	What it does
h-full	100% height
h-8	Fixed height (32px)
h-10	Fixed height (40px)
h-auto	Automatic height

Borders

Class	What it does
border	1px border on all sides
border-b	Border on bottom only
border-gray-300	Light gray border color
border-white	White border color

Flexbox Layout

Imagine you're laying out a webpage in Excel. You'd naturally think: "Should these items go across in a row, or stack down in a column?" That's exactly how flexbox works.

In a spreadsheet:

• A row runs left-to-right (cells A1, B1, C1...)

• A column runs top-to-bottom (cells A1, A2, A3...)

Flexbox uses the same concept:

• flex-row arranges items left-to-right, like cells in a spreadsheet row

• flex-col arranges items top-to-bottom, like cells in a spreadsheet column

flex-row (like a spreadsheet row):     flex-col (like a spreadsheet column):
┌───────┬───────┬───────┐              ┌───────┐
│ Logo  │ Title │ Links │              │ Logo  │
└───────┴───────┴───────┘              ├───────┤
                                       │ Title │
                                       ├───────┤
                                       │ Links │
                                       └───────┘

To use flexbox, add the flex class along with either flex-row or flex-col:

<div class="flex flex-row">...</div>  <!-- items side by side -->
<div class="flex flex-col">...</div>  <!-- items stacked -->

Positioning Items Within the Row or Column

Once you've chosen a direction, you'll want to control where items sit. This is where justify-* and items-* come in.

Think of your spreadsheet again:

• In a row, you might want content left-aligned, centered, or right-aligned

• In a column, you might want content at the top, middle, or bottom

Flexbox gives you the same control, but the terminology can be confusing. Here's the simple version:

Class	Items flow...
flex-row	Left to right (horizontal)
flex-col	Top to bottom (vertical)

justify-* controls alignment along the row or column

justify-* is like setting cell alignment in Excel - it positions items along the direction they flow.

With flex-row (horizontal flow), justify controls left/right:

justify-start:    [A][B][C]............
justify-center:   .....[A][B][C].....
justify-end:      ............[A][B][C]
justify-between:  [A]......[B]......[C]

With flex-col (vertical flow), justify controls top/bottom:

justify-start:       justify-end:
[A]                  .
[B]                  .
[C]                  [A]
.                    [B]
.                    [C]

items-* controls the OTHER direction

Back to the spreadsheet: if you have a tall row, you can vertically align the content to the top, middle, or bottom of the cell. That's what items-* does - it controls alignment in the direction that justify-* doesn't.

Think of it this way:

• If justify-* handles left/right (flex-row), then items-* handles top/bottom

• If justify-* handles top/bottom (flex-col), then items-* handles left/right

With flex-row (horizontal flow), items controls top/bottom:

items-start:     [A][B][C]        (items at top)
                 ---------

items-center:    ---------        (items in middle)
                 [A][B][C]
                 ---------

items-end:       ---------        (items at bottom)
                 [A][B][C]

With flex-col (vertical flow), items controls left/right:

items-start:     items-center:     items-end:
[A]                  [A]                  [A]
[B]                  [B]                  [B]
[C]                  [C]                  [C]
(left side)      (centered)        (right side)

Quick Reference

Class	flex-row (horizontal)	flex-col (vertical)
justify-start	Items on left	Items at top
justify-center	Items centered horizontally	Items centered vertically
justify-end	Items on right	Items at bottom
justify-between	First left, last right, others spaced	First top, last bottom, others spaced
items-start	Items at top	Items on left
items-center	Items centered vertically	Items centered horizontally
items-end	Items at bottom	Items on right

Common Patterns

Header with logo left, links right (horizontal):

<div class="flex flex-row justify-between items-center">
  <img src="logo.png" alt="Logo" />
  <!-- pushed to left (start) -->
  <nav>Links</nav>
  <!-- pushed to right (end) -->
</div>

Centered content (horizontal and vertical):

<div class="flex justify-center items-center">
  <span>I'm centered both ways</span>
</div>

Stack items vertically, centered horizontally:

<div class="flex flex-col items-center">
  <img src="logo.png" alt="Logo" />
  <h1>Title</h1>
  <p>Subtitle</p>
</div>

Navigation links pushed to the right:

<div class="flex flex-row justify-end gap-4">
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</div>

Item Widths (Like Merging Cells)

In a spreadsheet, you might merge cells to make one item span wider than others. In flexbox, you control this with width classes:

┌─────────────────────────┬───────────┐
│ Main content (w-2/3)    │ Sidebar   │
│ Takes 2/3 of the space  │ (w-1/3)   │
└─────────────────────────┴───────────┘

<div class="flex flex-row">
  <div class="w-2/3">Main content - takes up 2/3</div>
  <div class="w-1/3">Sidebar - takes up 1/3</div>
</div>

Common width classes:

• w-1/2 - half width (merge 1 of 2 cells)

• w-1/3 - one third / w-2/3 - two thirds

• w-1/4 - one quarter / w-3/4 - three quarters

• w-full - full width (like merging all cells in a row)

You can also let an item grow to fill whatever space is left:

<div class="flex flex-row">
  <img src="logo.png" class="w-auto" />  <!-- stays its natural size -->
  <div class="grow">I expand to fill the remaining space</div>
</div>

Spacing Between Items

Like adding space between columns in a spreadsheet, gap adds consistent spacing between flex items:

Class	What it does
gap-4	Equal space between all items (16px)
gap-gr-1	Golden ratio gap (~26px)

Responsive Design

"Responsive" means your page automatically adjusts to look good on any screen size - from a small phone to a large desktop monitor. Instead of building separate versions for mobile and desktop, responsive design uses flexible layouts that adapt.

We follow a "mobile-first" approach, meaning we design for phones first and then enhance for larger screens. Why? Because over half of online giving happens on mobile devices. A form that's frustrating on a phone means abandoned donations. By starting with mobile, we ensure the core experience works everywhere, then add enhancements for users with more screen space.

This directly impacts conversions: donors who encounter a smooth, easy-to-use form on their phone are far more likely to complete their gift than those fighting with tiny buttons or sideways scrolling.

The form templates (Hero, FiftyFifty, Floating, Vanilla) already handle responsive layout for you. The form automatically stacks on mobile and expands on desktop. You don't need to worry about making the overall page responsive.

However, your fragments need to work at all screen sizes. If you add fixed widths or complex layouts without responsive classes, your fragment could look broken on phones.

How Responsive Classes Work

Tailwind is "mobile-first." Classes without a prefix apply to all screen sizes, starting with mobile. You then add prefixes to change behavior on larger screens:

Prefix	Meaning	Screen Width
(none)	Mobile and up (all screens)	0px+
md:	Medium screens and up	768px+ (tablets)
lg:	Large screens and up	1024px+ (desktops)

Reading Responsive Classes

When you see multiple classes like text-sm md:text-base lg:text-lg, read it as:

• On phones: text-sm (small text)

• On tablets and up: md:text-base (normal text)

• On desktops and up: lg:text-lg (large text)

Common Responsive Patterns

Text that grows on larger screens:

<h1 class="text-xl md:text-2xl lg:text-3xl">Welcome</h1>

• Phone: extra-large text

• Tablet: 2x large text

• Desktop: 3x large text

Padding that increases on larger screens:

<div class="px-4 md:px-8 lg:px-16">...</div>

• Phone: 16px horizontal padding

• Tablet: 32px horizontal padding

• Desktop: 64px horizontal padding

Layout that changes from stacked to side-by-side:

<div class="flex flex-col md:flex-row">
  <div>Left/Top content</div>
  <div>Right/Bottom content</div>
</div>

• Phone: items stack vertically (flex-col)

• Tablet and up: items sit side-by-side (md:flex-row)

Content width that expands on larger screens:

<div class="w-full lg:w-2/3">...</div>

• Phone/Tablet: full width

• Desktop: 2/3 width (centered content)

Elements that hide or show at different sizes:

<span class="hidden md:inline">Full label</span>
<span class="md:hidden">Short</span>

• Phone: shows "Short"

• Tablet and up: shows "Full label"

What Can Break Responsiveness

Avoid these patterns that cause problems on mobile:

Problem	Why it breaks	Better approach
w-[500px] (fixed pixel width)	Too wide for phones	Use w-full or max-w-md
flex-row without flex-col fallback	Items squish on narrow screens	Use flex flex-col md:flex-row
Large fixed padding like p-16	Takes too much space on mobile	Use p-4 md:p-8 lg:p-16
text-3xl without smaller mobile size	Text too large on phones	Use text-xl md:text-2xl lg:text-3xl

---

Golden Ratio Spacing Classes

The golden ratio (φ ≈ 1.618) is a mathematical proportion found throughout nature - in seashells, flower petals, hurricanes, and even galaxies. Our brains are wired to find this ratio visually pleasing, which is why it's been used for centuries in art and architecture, from the Parthenon to the Mona Lisa.

Modern marketers and designers use the golden ratio extensively because it works. Major brands like Apple, Twitter, and Pepsi incorporate it into their logos. Ad agencies use it to structure layouts that keep eyes on the page longer. Studies suggest that designs using golden ratio proportions feel more balanced and trustworthy - exactly what you want when asking someone to make a donation or register for an event.

When spacing on a page follows the golden ratio, elements feel naturally organized rather than arbitrarily placed. The eye flows smoothly from one section to the next instead of jumping around. This reduces cognitive load and keeps visitors focused on your content and calls to action.

We provide utility classes that make it easy to apply golden ratio spacing without doing any math. For more on why this works, see The Golden Ratio in Design from the Interaction Design Foundation.

The Scale

Size	Value	Best for
gr-xs	~6px (0.38rem)	Tiny gaps, icon spacing
gr-sm	~10px (0.62rem)	Small gaps, tight spacing
gr-0	16px (1rem)	Standard spacing
gr-1	~26px (1.62rem)	Comfortable spacing
gr-2	~42px (2.62rem)	Section spacing
gr-3	~68px (4.24rem)	Large sections
gr-4	~110px (6.85rem)	Hero areas
gr-5	~177px (11.09rem)	Major sections

Available Golden Ratio Classes

Padding:

• p-gr-0 through p-gr-4 (all sides)

• px-gr-xs through px-gr-4 (left and right)

• py-gr-xs through py-gr-4 (top and bottom)

• pt-gr-xs through pt-gr-4 (top only)

• pb-gr-xs through pb-gr-4 (bottom only)

• pl-gr-xs through pl-gr-4 (left only)

• pr-gr-xs through pr-gr-4 (right only)

Margin:

• m-gr-0 through m-gr-2 (all sides)

• mx-gr-xs through mx-gr-1 (left and right)

• my-gr-sm through my-gr-2 (top and bottom)

• mt-gr-xs through mt-gr-4 (top only)

• mb-gr-xs through mb-gr-3 (bottom only)

• ml-gr-xs through ml-gr-1 (left only)

• mr-gr-xs through mr-gr-1 (right only)

Gap (for flexbox):

• gap-gr-xs through gap-gr-8

Space between children:

• space-y-gr-xs through space-y-gr-3 (vertical)

• space-x-gr-xs through space-x-gr-2 (horizontal)

Height:

• h-gr-1 through h-gr-5

Width:

• w-gr-4, w-gr-6, w-gr-8

When to Use Golden Ratio Classes

Use golden ratio classes when you want:

• Visual harmony - Elements feel naturally balanced

• Consistent scaling - Each step up is proportionally larger

• Professional appearance - The golden ratio is used in art, architecture, and design

Example comparison:

<!-- Standard Tailwind spacing -->
<div class="p-4 mb-6">...</div>

<!-- Golden ratio spacing (more harmonious) -->
<div class="p-gr-1 mb-gr-2">...</div>

---

Theme Colors

Your organization's brand colors are available as CSS variables. These are configured in System > Public Skin > Colors and using them ensures your headers and footers match your forms.

Our system extends standard Tailwind with semantic color utilities like bg-primary, text-primary, border-primary, and so on. These classes won't work in a vanilla Tailwind project - they're specific to the AlumnIQ public site environment. If you're referencing external Tailwind documentation, note that our color classes (primary, secondary, accent, neutral, base-100, etc.) are additions to the standard Tailwind palette.

Available Color Variables

Color	CSS Variable	Tailwind Class	Purpose
Primary	--color-primary	bg-primary, text-primary	Main brand color, buttons
Primary Content	--color-primary-content	text-primary-content	Text on primary backgrounds
Secondary	--color-secondary	bg-secondary, text-secondary	Secondary brand color
Secondary Content	--color-secondary-content	text-secondary-content	Text on secondary backgrounds
Accent	--color-accent	bg-accent, text-accent	Accent/highlight color
Accent Content	--color-accent-content	text-accent-content	Text on accent backgrounds
Neutral	--color-neutral	bg-neutral, text-neutral	Neutral/muted color
Neutral Content	--color-neutral-content	text-neutral-content	Text on neutral backgrounds
Base 100	--color-base-100	bg-base-100	Page background (lightest)
Base 200	--color-base-200	bg-base-200	Card/section background
Base 300	--color-base-300	bg-base-300	Borders, dividers
Base Content	--color-base-content	text-base-content	Default text color

Status Colors (System Defaults)

These colors are used for alerts and messages:

Color	Class	Purpose
Info	bg-info, text-info	Informational messages
Success	bg-success, text-success	Success states
Warning	bg-warning, text-warning	Warning messages
Error	bg-error, text-error	Error states

Using Theme Colors

For backgrounds:

<div class="bg-primary">Primary colored background</div>
<div class="bg-base-200">Light background</div>

For text:

<span class="text-primary">Primary colored text</span>
<span class="text-base-content">Default text color</span>

Combining background and text:

<div class="bg-primary text-primary-content">
  Text automatically contrasts with primary background
</div>

Theme Colors for Borders

The theme colors work with border utilities too:

<div class="border border-primary">Primary colored border</div>
<div class="border border-secondary">Secondary colored border</div>
<div class="border border-accent">Accent colored border</div>
<div class="border border-base-300">Subtle border using base-300</div>

---

Practical Examples

Simple Header with Logo

A clean header with logo on the left:

<div
  class="flex items-center h-full w-full bg-base-100 border-b border-b-gray-300 px-gr-1"
>
  <a href="/" class="inline-flex items-center" aria-label="Home">
    <img src="YOUR_LOGO_URL" alt="Organization Logo" class="h-gr-2 w-auto" />
  </a>
</div>

Key classes used:

• flex items-center - Flexbox layout, vertically centered

• bg-base-100 - Uses your theme's background color

• border-b border-b-gray-300 - Subtle bottom border

• h-gr-2 - Golden ratio height for the logo

• px-gr-1 - Golden ratio horizontal padding

Header with Contact Link

Logo on left, contact link on right. This uses justify-between to push items to opposite ends:

<div class="w-full h-full border-b border-b-gray-300 bg-gray-800">
  <div class="flex items-center justify-between text-white px-gr-1 py-2">
    <!-- Left side: Logo -->
    <a href="/" class="inline-flex items-center" aria-label="Home">
      <img
        src="YOUR_LOGO_URL"
        alt="Organization Logo"
        class="h-8 md:h-10 w-auto"
      />
    </a>
    <!-- Right side: Contact link -->
    <a
      href="mailto:[email protected]"
      class="hover:underline tracking-wide text-sm md:text-base"
    >
      CONTACT
    </a>
  </div>
</div>

Key classes used:

• flex items-center justify-between - Logo on left, link on right

• bg-gray-800 - Dark background

• text-white - White text for contrast

• px-gr-1 - Golden ratio horizontal padding

• h-8 md:h-10 - Responsive logo height (smaller on mobile, larger on tablets+)

Centered Logo Header

Simple centered design:

<div class="w-full h-full bg-white border-b border-b-gray-300">
  <div
    class="flex items-center justify-center px-gr-2 md:px-gr-3 py-gr-2 md:py-gr-3"
  >
    <a href="/" aria-label="Home">
      <img
        src="YOUR_LOGO_URL"
        alt="Organization Logo"
        class="h-8 md:h-10 w-auto"
      />
    </a>
  </div>
</div>

Key classes used:

• flex items-center justify-center - Centers content both ways

• px-gr-2 md:px-gr-3 - Responsive padding (more on larger screens)

Multi-Tier Header

University-style header with utility bar, sub-nav, and logo:

<div class="w-full h-full">
  <!-- Top utility bar -->
  <div class="flex items-center justify-center text-white bg-gray-700">
    <div class="text-center px-2 py-1">
      <a
        href="/"
        class="no-underline text-[0.7rem] md:text-xs tracking-wider uppercase"
      >
        University Name
      </a>
    </div>
  </div>

  <!-- Secondary navigation -->
  <div
    class="bg-gray-900 text-white flex justify-center px-gr-1 py-[0.35rem] md:py-[0.45rem]"
  >
    <div
      class="w-full lg:w-2/3 flex flex-row justify-end gap-gr-3 md:gap-gr-4 text-[0.7rem] md:text-xs"
    >
      <button class="hover:text-gray-300 hover:underline" type="button">
        Contact Us
      </button>
      <button class="hover:text-gray-300 hover:underline" type="button">
        Search
      </button>
    </div>
  </div>

  <!-- Main logo area -->
  <div
    class="bg-white text-black px-gr-2 md:px-gr-3 py-gr-2 md:py-gr-3 flex justify-center border-b border-b-gray-300"
  >
    <div class="w-full lg:w-2/3 flex items-center">
      <img src="YOUR_LOGO_URL" alt="Campaign Logo" class="h-6 md:h-8 w-auto" />
    </div>
  </div>
</div>

Standard Footer

Multi-column footer with links:

<div class="w-full text-white bg-gray-800">
  <div class="w-full p-gr-4 flex flex-col lg:flex-row gap-gr-4 justify-between">
    <!-- Contact column -->
    <div class="min-w-max">
      <a href="/">
        <img src="YOUR_LOGO_URL" alt="Organization Logo" class="h-10" />
      </a>
      <p>
        123 University Avenue<br />City, State 12345 USA<br />Phone: (555)
        555-5555
      </p>
    </div>

    <!-- Link columns -->
    <div class="flex flex-col md:flex-row gap-gr-3 md:gap-gr-4">
      <!-- Column 1 -->
      <div>
        <h2 class="mb-gr-3 font-semibold text-xl">Campus</h2>
        <ul class="leading-8">
          <li><a class="hover:underline" href="/about">About</a></li>
          <li><a class="hover:underline" href="/directory">Directory</a></li>
          <li><a class="hover:underline" href="/contact">Contact</a></li>
        </ul>
      </div>

      <!-- Column 2 -->
      <div>
        <h2 class="mb-gr-3 font-semibold text-xl">Resources</h2>
        <ul class="leading-8">
          <li>
            <a class="hover:underline" href="/emergency">Emergency Info</a>
          </li>
          <li>
            <a class="hover:underline" href="/accessibility">Accessibility</a>
          </li>
        </ul>
      </div>

      <!-- Column 3 -->
      <div>
        <h2 class="mb-gr-3 font-semibold text-xl">Policies</h2>
        <ul class="leading-8">
          <li><a class="hover:underline" href="/privacy">Privacy</a></li>
          <li><a class="hover:underline" href="/terms">Terms</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Key classes used:

• flex flex-col lg:flex-row - Stacks on mobile, side-by-side on desktop

• gap-gr-4 - Golden ratio spacing between columns

• mb-gr-3 - Golden ratio margin below headings

• leading-8 - Line height for readable link lists

---

Best Practices

Do

• Use theme colors (bg-primary, text-base-content) to match your brand

• Use golden ratio classes for harmonious spacing

• Test on mobile - Use md: and lg: prefixes for responsive designs

• Include alt text on all images for accessibility

• Use semantic HTML - <nav>, <header>, <footer>, <h2> tags help screen readers

Don't

• Don't use inline styles unless absolutely necessary

• Don't use fixed pixel widths - They break on mobile

Accessibility Checklist

• All images have alt text — Writing effective alt text

• Links have descriptive text (not "click here") — Link text best practices

• Color contrast is sufficient — Check with WebAIM Contrast Checker

• Interactive elements have aria-label if their purpose isn't obvious — ARIA labels guide

• Headings use proper hierarchy (<h2>, <h3>, etc.) — Heading structure

---

Quick Reference Card

Most Common Classes

Layout:        flex  items-center  justify-between  gap-4
Width:         w-full  w-1/2  w-auto
Height:        h-full  h-10  h-gr-2
Padding:       p-4  px-gr-1  py-gr-2
Margin:        m-4  mb-gr-3  mt-2
Background:    bg-white  bg-gray-800  bg-primary  bg-base-100
Text Color:    text-white  text-gray-700  text-primary  text-base-content
Text Size:     text-sm  text-base  text-xl
Font:          font-semibold  font-bold
Border:        border  border-b  border-gray-300
Responsive:    md:text-lg  lg:flex-row

Golden Ratio Scale

gr-xs  ≈ 6px    (tiny)
gr-sm  ≈ 10px   (small)
gr-0   = 16px   (base)
gr-1   ≈ 26px   (comfortable)
gr-2   ≈ 42px   (section)
gr-3   ≈ 68px   (large)
gr-4   ≈ 110px  (hero)
gr-5   ≈ 177px  (major)

Theme Colors

Brand:     bg-primary  bg-secondary  bg-accent  bg-neutral
Content:   text-primary-content  text-secondary-content
Base:      bg-base-100  bg-base-200  bg-base-300  text-base-content
Status:    bg-info  bg-success  bg-warning  bg-error