Infima Styling Framework

Infima is a modern styling framework designed for content-driven websites. It is built using modern CSS methodologies, including CSS variables, PostCSS, and BEM naming conventions.

Key features include:

• Theming: Built-in support for theming and dark mode.
• Modern CSS: Leverages CSS variables and PostCSS.
• Modular Architecture: Allows you to import only the specific CSS for the components you need, reducing bundle size.

Infima is a styling framework designed specifically for content-driven websites (such as documentation sites). It provides ready-to-use styles for common UI components like grids, buttons, and forms.

Key features include:

• Modern Theming: Built using CSS variables as first-class citizens.
• Dark Mode: Native support out-of-the-box.
• Interoperability: Because it relies heavily on CSS variables, third-party components can easily adopt Infima's styling by reading its variables, ensuring visual consistency across your site.
• Low Overhead: Designed to provide the minimal CSS and JS required to build a modern, responsive website.

The Navbar component supports different item alignments using modifier classes on the navbar__items container:

• navbar__items--right: Aligns items to the right side of the navbar.
• navbar__items--center: Aligns items to the center (often used for branding in complex layouts).

Example of a navbar with centered branding and right-aligned utility items:

<nav class="navbar navbar--primary">
  <div class="navbar__inner">
    <div class="navbar__items">
      <a class="navbar__item navbar__link" href="#url">Docs</a>
    </div>
    <div class="navbar__items navbar__items--center">
      <a class="navbar__brand">Infima</a>
    </div>
    <div class="navbar__items navbar__items--right">
      <a class="navbar__item navbar__link" href="#url">GitHub</a>
    </div>
  </div>
</nav>

Adjust the size of a button or make it span the full width of its container using modifier classes.

Sizes

• Small: button--sm
• Default: No size class
• Large: button--lg

Block Layout

• Block Button: Use button--block to make the button a block-level element that fills the container width.

<!-- Sizes -->
<button class="button button--sm button--primary">Small Button</button>
<button class="button button--primary">Default Button</button>
<button class="button button--lg button--primary">Large Button</button>

<!-- Block -->
<button class="button button--block button--primary">Block Button</button>

Alerts are used to provide contextual feedback to users. They are implemented using a div with the base class alert and a modifier class for color. For accessibility, always include role="alert".

To include a dismissible alert, add a button with the classes clean-btn close and an aria-label="Close" inside the alert container.

<div class="alert alert--primary" role="alert">
  <button aria-label="Close" class="clean-btn close" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
  Alert message goes here.
</div>

Infima provides utility classes to apply different levels of shadow elevation to elements, helping to create a sense of depth and hierarchy in your UI. Use the following classes depending on the intended elevation level:

• shadow--lw: Low Elevation. Use this for a slight sense of depth above the page.
• shadow--md: Medium Elevation. Use this for components like dropdowns and mobile navigation.
• shadow--tl: Tall Elevation. Use this for high-priority elements like modals.

<!-- Low Elevation -->
<div class="shadow--lw">Low Elevation</div>

<!-- Medium Elevation -->
<div class="shadow--md">Medium Elevation</div>

<!-- Tall Elevation -->
<div class="shadow--tl">Tall Elevation</div>

Infima provides a twelve-column grid system. To use it, wrap your content in a .container, define rows with .row, and specify column widths using the .col class combined with a sizing modifier like .col--[number], where [number] is between 1 and 12.

Common modifiers include:

• .col--1 through .col--12 to define the span of the column.

<div class="container">
  <div class="row">
    <div class="col col--6">
      <!-- Content spanning 6 columns -->
    </div>
    <div class="col col--6">
      <!-- Content spanning 6 columns -->
    </div>
  </div>
</div>

The Breadcrumbs component provides a navigation trail to help users understand their location within a hierarchy. It is structured as a <nav> element containing a <ul> with the class breadcrumbs. Each step in the trail is a <li> with the class breadcrumbs__item. The current page should be marked with the breadcrumbs__item--active class on its list item.

<nav aria-label="breadcrumbs">
  <ul class="breadcrumbs">
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="#url">Infima</a>
    </li>
    <li class="breadcrumbs__item breadcrumbs__item--active">
      <a class="breadcrumbs__link" href="#url">Breadcrumb</a>
    </li>
  </ul>
</nav>

Badges in Infima are used to display small labels or status indicators. You can apply different color themes by adding a modifier class to the base badge class using the --<color> syntax.

Available color modifiers:

• badge--primary: Primary theme color
• badge--secondary: Secondary theme color
• badge--success: Success/Positive state
• badge--info: Informational state
• badge--warning: Warning state
• badge--danger: Danger/Error state

<!-- Primary Badge -->
<span class="badge badge--primary">Primary</span>

<!-- Success Badge -->
<span class="badge badge--success">Success</span>

<!-- Danger Badge -->
<span class="badge badge--danger">Danger</span>

Infima provides shorthand utility classes to apply margin and padding to elements. You can apply spacing to all sides, specific sides, or axis-aligned groups (vertical/horizontal).

/* Example usage of spacing classes */

/* Sets margin-top to 0 */
.margin-top--none

/* Sets margin-left to 0.25rem */
.margin-left--xs

/* Sets both padding-top and padding-bottom to 0.5rem */
.padding-vert--md

/* Sets padding on all sides to 2rem */
.padding--lg

If you want columns to share the available space equally without specifying a fixed number of columns, use the .col class without a sizing modifier (e.g., omit --6, --4, etc.). The grid will automatically distribute the width among all .col elements within a .row.

<div class="container">
  <div class="row">
    <div class="col">
      <div>Equal width col</div>
    </div>
    <div class="col">
      <div>Equal width col</div>
    </div>
    <div class="col">
      <div>Equal width col</div>
    </div>
  </div>
</div>