STCMS Documentation

Complete guide to building modern, secure React/PHP applications with STCMS framework

Twig Functional Components

Create powerful, reusable UI elements with Twig macros

In STCMS, you can create powerful, reusable, and purely presentational UI elements using Twig's macro feature. We call this pattern "Functional Components."

DRY Code Don't Repeat Yourself - define once, use everywhere

Consistency Visual consistency across your entire site

Tailwind CSS Styled with utility classes

No State Perfect for presentational UI elements

1 Create a Component Macro

Define your components in components/components.twig. Here's a button component:

components/components.twig

{# components/components.twig #}

{% macro button(text, url, variant='primary', extra_classes='') %}
    {% set base_classes = 'inline-block text-white font-bold py-2 px-4 rounded-lg shadow-md ...' %}
    
    {% set variant_classes = {
        'primary': 'bg-red-600 hover:bg-red-700',
        'secondary': 'bg-gray-700 hover:bg-gray-800'
    } %}

    <a href="{{ url }}" class="{{ base_classes }} {{ variant_classes[variant] }} {{ extra_classes }}">
        {{ text }}
    </a>
{% endmacro %}

info: Macros accept parameters like functions, with optional default values.

2 Import and Use the Component

Import the components file at the top of your page:

Usage Example

{% import "components.twig" as components %}

{# Now use the macro like a function #}
{{ components.button('Click Me', '/url', 'primary') }}

Live Button Examples

Primary Button Secondary Extra Large

3 Advanced Example: Card Component

Create more complex components like cards:

Card Macro

{% macro card(title, description, image_url=null) %}
    <div class="bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
        {% if image_url %}
            <img class="w-full h-48 object-cover" src="{{ image_url }}" alt="{{ title }}">
        {% endif %}
        <div class="p-6">
            <h3 class="text-2xl font-bold text-gray-800 mb-2">{{ title }}</h3>
            <p class="text-gray-600">{{ description }}</p>
        </div>
    </div>
{% endmacro %}

Live Card Examples

Reusable Components

Creating components directly in Twig is a great way to keep your templates clean and maintainable for presentational UI.

Powered by Tailwind CSS

All components are styled with utility classes, making them easy to customize without ever leaving your HTML.

Available Components

STCMS comes with many pre-built components in the /components folder:

components.twig Buttons, cards

terminal_code.twig Terminal/bash code blocks

php_code.twig PHP code blocks

tip.twig Tips and info boxes

tag_and_text.twig Feature tags

youtube_box.twig Video thumbnails

learning_card.twig Tutorial cards

feature_showcase_ribbon.twig Feature carousel

Tip: Check the README.md for complete documentation of all available components.

Learn More About STCMS