What is a Component?

A component is a self-contained building-block. As such, each component is kept within its own folder which contains everything it requires; the layout, the Advanced Custom Fields field setup, all necessary WordPress filter and hook logic, scripting, styles, and images.

  ExampleComponent/
  ├── assets/
  |   ├── exampleImage.jpg
  |   └── exampleIcon.svg
  ├── fields.json
  ├── functions.php
  ├── index.twig
  ├── preview-mobile.jpg
  ├── preview-desktop.jpg
  ├── README.md
  ├── script.js
  ├── style.styl

Building components is a sustainable process, meaning every component you develop can be reused within a project, or in another; increasing your head-start with every new Flynt project.

To quickly and easily build new components, we recommend using the Flynt Yeoman Generator.

What is an Area?

Since components are self-contained, areas provide a way to stack our building-blocks together. An area is simply a location within a component where it is possible to add other components.

Areas are most often defined inside page templates and are output using the helper function area in the view template of a component.

For example, the DocumentDefault component renders the layout area in DocumentDefault/index.twig:

<!DOCTYPE html>
<html class="flyntComponent {{ body_class }}" lang="{{ site.language }}" dir="{{ dir }}" is="flynt-document-default">
  <head><!--...--></head>
  <body role="document">
    {{ area('layout') }}
    {{ wp_footer }}
  </body>
</html>

The area helper function is created by the TimberLoader feature using the renderComponent filter provided by Flynt Core.

Organizing Components into Categories

Components are always categorized according to their predominant use case. This helps to clarify the purpose of a component and in quickly identifying an appropriate component to re-use. The name of every component is prefixed with one of the following categories:

  • Accordion
    For collapsible content, e.g. FAQs.
  • Block
    The fallback for full width components. Use only when there is no better, more specific category.
  • Calendar
    For a component where the main feature is a calendar.
  • ComponentLoader
    For a component used only to load other components into it.
  • Document
    An HTML document.
  • Form
    For when entering user data is the main purpose.
  • Grid
    Its elements will be arranged in a multi-column and multi-row grid.
  • Hero
    A component that attracts a lot of attention and takes up significant space.
  • Layout
    Page or post layouts.
  • List
    Its elements typically have a fixed width, align horizontally and will flow into a new row.
  • Map
    A graphical map (like a Google Map).
  • Modal
    It opens like a dialog.
  • Navigation
    A series of links used as a navigation.
  • Sidebar
    Typically part of a layout that holds other components.
  • Slider
    No matter if it slides, fades, or explodes; it displays a series of content.
  • Table
    For a component that displays tabular data.
  • Tabs
    Uses horizontally or vertically aligned buttons to change content in a target container.