CSS

Styling in Fortis: A Versatile Approach

Styling in Fortis offers a versatile range of options, allowing you to control the appearance of your web components to suit your design and layout needs. In this article, we'll explore two primary methods for styling in Fortis: the static css property for web components and the style attribute, which functions similarly to React's styling.

The static css Property on Web Components

The static css property is a feature in Fortis similar to Lit (opens in a new tab) that enables you to define encapsulated styles for your web components. This property is static and belongs to the class rather than the instance. By using static css, you can ensure that the styles are contained within the shadow DOM, preventing them from affecting the global scope of your application.

Here's an example of how to use the static css property on a Fortis web component:

class StyledComponent extends Component({
    // Prop definitions here
}) {
    static css = `
        :host {
            display: block;
            padding: 1rem;
            background-color: #e0e0e0;
        }
        
        p {
            font-size: 18px;
            color: #333;
        }
    `;
 
    render() {
        return (
            <div>
                <p>Styled Text</p>
            </div>
        );
    }
}

In this example, the css property defines styles for the shadow DOM within the StyledComponent. The styles are scoped to this component, ensuring that they won't interfere with or be affected by external styles.

The style Attribute

Fortis provides a style attribute that functions similarly to the style attribute in React (opens in a new tab). It allows you to set inline styles for your elements directly within your JSX code. This inline styling is useful when you need to apply dynamic or component-specific styles.

Here's how to use the style attribute in Fortis:

const dynamicColor = "#ff5733";
 
function DynamicStyleComponent() {
    return (
        <div style={{ backgroundColor: dynamicColor, padding: "10px" }}>
            <p>Dynamic Styling</p>
        </div>
    );
}

In this example, the style attribute is used to apply dynamic background color and padding to the <div> element. You can define and modify the inline styles programmatically within your Fortis components, making it easy to adapt the appearance of your elements based on changing conditions or user interactions.

Conclusion

Styling in Fortis provides you with the flexibility and control needed to define the visual aspects of your web components. You can utilize the static css property on web components to ensure encapsulated styles within the shadow DOM. Additionally, the style attribute, which functions similarly to React, allows you to set inline styles directly within your JSX code, enabling dynamic and component-specific styling.

With these styling options, you can create web components in Fortis that not only deliver excellent functionality but also look appealing and seamlessly integrate into your user interface.

Function ComponentsJSX