DOCSEARCHbyAlgolia
Submit Docs

Fomantic UI Documentation

website·Indexed 35 days ago

https://fomantic-ui.com/

A community-driven fork of Semantic UI providing a comprehensive framework of UI components and behaviors. Documentation covers modules such as Popup, Progress, Sticky, Toast, Slider, and Transition, as well as behaviors for Form Validation, State management, Visibility, and API integration. Includes guides on getting started, theming, and responsive design examples.

Tokens
96K
Snippets
518
Records
803
Agent score
72%

What's inside Fomantic UI

  1. Overview of Fomantic-UI Item view

    The Item view is designed to display large collections of content. It is inherently responsive, meaning that elements like images will automatically stack at mobile resolutions to maintain readability.

  2. Overview of Fomantic UI Theming Philosophy

    Fomantic UI uses a system based on 'progressive truthfulness,' allowing developers to modify existing components rather than building them from a blank canvas. Instead of writing full CSS from scratch, developers specify how components should differ from the default theme using CSS variables. The default theme is designed to be neutral and elegant, using the Lato sans-serif font.

  3. Overview of Fomantic UI Flyout

    A Flyout is an overlay container used to display contextual information, confirmations, or additional content that slides in from the edge of the viewport.

  4. Overview of Fomantic-UI

    Fomantic-UI is an open-source development framework (a community fork of Semantic-UI) designed to create responsive layouts using human-friendly HTML. It treats CSS classes as natural language concepts (noun/modifier relationships) to reduce the complexity typically associated with naming conventions like BEM or SMACSS.
    <div class="ui three buttons">
  <button class="ui active button">One</button>
  <button class="ui button">Two</button>
  <button class="ui button">Three</button>
</div>

  5. Create a standard or indicating progress bar

    Fomantic UI provides two primary types of progress bars:

    • Standard: A basic progress bar used to show the progression of a task.
    • Indicating: A progress bar that visually indicates the current level of progress of a task.

  6. Search module types overview

    Fomantic UI Search supports several implementation types:

    • Standard: Displays a set of results (can be combined with ui input for icon inputs).
    • Clearable: Includes a remove icon to clear the search term.
    • Category: Displays results from remote content ordered by categories.
    • Horizontal Category: Displays category names horizontally on top of results.
    • Local Search: Searches through a static local data source.
    • Local Category Search: Searches through a static local data source with categorized results.

  7. Create a content placeholder to simulate loading

    A placeholder is used to reserve space for content that will soon appear in a layout. It allows developers to emulate the structure of the content being loaded using various elements like paragraphs, headers, and images.

  8. Understand Fomantic-UI descriptive classnames

    Fomantic-UI uses descriptive classnames added to HTML nodes to style components. The ui class serves as a namespace to prevent conflicts with custom CSS. Multiple variations can be combined on a single component to achieve specific effects (e.g., combining size and color).
    <!-- Basic primary button -->
<div class="ui primary button">Button</div>

<!-- Huge primary button -->
<div class="ui huge primary button">Button</div>

  9. Use Fomantic UI Containers to limit content width

    A container is used to restrict page elements (such as grids or menus) to a reasonable maximum width based on the user's screen size. Containers responsively adjust their maximum width according to the device breakpoint.

  10. Create a basic activity feed

    A feed is used to present user activity chronologically. A standard feed consists of a series of events, where each event typically includes a label (such as an avatar, icon, or text), the activity description, a date, and optional additional information (like images or likes).

  11. Fomantic-UI Framework Integrations

    Fomantic-UI provides integrations for several popular frontend frameworks to help organize the UI layer alongside application logic, including React, Angular, Meteor, and Ember.

  12. Implement responsive embeds with Fomantic UI

    The Embed module uses an intrinsic aspect ratio, allowing content to resize responsively without fixed widths or heights. To optimize page load performance, Fomantic UI prevents iframes from loading until a user interacts with the embed's placeholder content, avoiding the significant initial payload associated with services like Google Maps (~237kb) or YouTube (~380kb).