Extending your package

You will have just about everything you need in the basic Typetura package, however you may want to add a new component or modify an existing one to suit your unique needs. Fortunately, you already have Typetura installed and ready to use.

Creating new components

To create new components, follow the guide on creating with Typetura. This will walk you through how Typetura components are structured, and how to build them.

Modifying an existing component

Typetura components are styled using the CSS animation API. As a result, it will override all CSS properties, even ones with !important. There are a few options you have to overwrite these styles.

Removing Typetura styles from an element

If you wish to remove Typetura styles from an element, you can add --tt-key: none;, then write your own styles for that element.

CSS
.my-custom-headline {
    --tt-key: none;
    font-size: 4rem;
}

If you are using the WordPress plugin with the auto typesetter enabled, all selectors will need a specificity of 0.11.0 or higher to overwrite the Typetura styles. One way to do this is to add :root:root:root:root:root:root:root:root:root:root:root before your selector if you need to avoid using !important.

Overwriting Typetura styles

Typetura information is stored in CSS Keyframes. You can author your own keyframes to overwrite Typetura’s styles. Documentation as to how these keyframes are structured is contained in the component styles section.

Typetura keyframes use a hyphen-separated all-lowercase naming convention identical to that of the component name. Overwriting the primary headline component’s styles would look like the following:

CSS
@keyframes primary-headline {
    0% {
        font-size: 1rem;
    }
    100% {
        font-size: 4rem;
    }
}

Last updated