Global Components

Terra GC is a comprehensive library of reusable and customizable web layout components. Designed for scalability and error-free integration, it offers a robust collection of thoroughly tested styles and mixins that can be easily incorporated into any project.

Installation and Usage

Thunderfoot UI can be installed via npm. Once installed and set up, you can refer to the detailed documentation to copy and paste the necessary SCSS code and basic HTML structure for each component.

Customization and Flexibility

Each component comes with style options for its primary state and can be easily modified. For instance, the button component allows for customization of transitions. In some cases, additional functionality may require external libraries or packages (JavaScript).

How do we use them

The entire library is designed to be used in a straightforward manner. The mixins should be imported based on the environment you’re working in, as indicated in the documentation.

Once imported, you can create the components in your SCSS file and paste the code provided in the Readme for each component.

Typically, each component will have at least two mixins. The first one is used to create the basic styles of the component, while the second one is used for modifications. The second mixin includes style and interaction modifications, all of which are commented out by default to prevent them from being applied.

If you need to create a “—second” or “—third” variation of the component, you can simply call the second mixin with the necessary parameters. All mixins parameters are named in a way that makes it easy to visually identify their purpose, such as font modifications, color changes, or image adjustments in the initial state or an interactive state like hover.

Example

For example, we can easily create the image card by copying the HTML and SCSS provided in the readme. You can see all the global components here.

<a href="#" target="_blank" rel="noopener noreferrer" class="g--card-07">
    <div class="g--card-07__ft-items">
        <h3 class="g--card-07__ft-items__item-primary">Smart CRE</h3>
        <div class="g--card-07__ft-items__list-group">
            <p class="g--card-07__ft-items__list-group__item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
    </div>
</a>

.g--card-07 {
    @include make-card-07();
    @include make-card-07-modifier(
        $card-options: (
            "back-items": no
        ),
        $background-options: (
            "background-color": #fff,
        ),
        $border-options: (
            "border-color": rgba(map-get($color-options, a), 0.2) rgba(map-get($color-options, a), 0.2) map-get($color-options, d)
                rgba(map-get($color-options, a), 0.2),
            "border-width": 2px,
            "border-style": solid,
            "border-radius": 4px,
        ),
        $item-primary-options: (
            "className": f--font-c f--color-a,
        ),
        $list-group-item-options: (
            "className": f--font-d f--color-a,
            "text-decoration": underline,
            "text-decoration-color": transparent,
        ),
        $list-group-item-hover-options: (
            "text-decoration-color": map-get($color-options, a),
        ),
        $hover-options: (
            "transform": translateY(0),
            "border-color": map-get($color-options, d),
            "box-shadow": none,
        )
    );
}