CSS Integration Options

There are different options for styling inside your Frontastic project. We want to enable you to choose your preferred way to go so we're generally agnostic of your choices. The options we outline in this article are:

  • Central (S)CSS (framework)
  • Tastic or pattern dependent local (S)CSS
  • CSS Modules
  • Styled Components
  • Libraries like Tailwind CSS

Our build systems, based on webpack, try to extract and optimize the CSS if possible, in order to prevent the "flash of unstyled content". We always use PostCSS to make the CSS work in all configured target browsers.

Central (S)CSS

The most obvious extension point is the central file src/scss/app.scss where you can add additional imports or even add your style definitions directly. This is the most important place when you're using semantic class names like advised by BEM (Block Element Modifier) and/or ITCSS. You have access to our generic color variables as long as you include the respective base file.

In this case, your Tastic would look like:

import React from 'react'
import tastify from '@frontastic/catwalk/src/js/helper/tastify'

const MyTastic = ({ data }) => {
    return <div className="my-tastic">
        <h1 className="my-tastic__headline">{data.title}</h1>
    </div>
}

export default tastify()(MyTastic)

And then you can add something like the following to the app.scss file or into some file imported from there:

.my-tastic {
    border: 1px solid $color-primary;
}

.my-tastic__headline {
    font-size: $font-size-xl;
}

Tastic or Pattern Dependent Local (S)CSS

You can always import (S)CSS directly from your Tastic or any other (presentational) component imported from your Tastic. The benefit here is that when used together with deferred Tastics we can also generate chunked CSS files and thus optimize the main CSS bundle further.

You can still use semantic class names like advised by BEM (Block Element Modifier) and/or ITCSS. You also have access to our generic color variables as long as you include the respective base file.

In this case, your Tastic would look like:

import React from 'react'
import tastify from '@frontastic/catwalk/src/js/helper/tastify'

import './my-styles.scss'

const MyTastic = ({ data }) => {
    return <div className="my-tastic">
        <h1 className="my-tastic__headline">{data.title}</h1>
    </div>
}

export default tastify()(MyTastic)

And then you can add something like the following to the my-styles.scss file:

@import "../../../src/scss/settings.scss";

.my-tastic {
    border: 1px solid $color-primary;
}

.my-tastic__headline {
    font-size: $font-size-xl;
}

CSS Modules

We allow you to use CSS Modules by following a certain naming scheme. If your local CSS file ends with .module.css we consider it a CSS module and allow you to use the styles accordingly.

In this case, your Tastic would look like:

import React from 'react'
import tastify from '@frontastic/catwalk/src/js/helper/tastify'

import styles from './my-styles.module.css'

const MyTastic = ({ data }) => {
    return <div className={styles.myTastic}>
        <h1 className={styles.myTasticHeadline}>{data.title}</h1>
    </div>
}

export default tastify()(MyTastic)

And then you can add something like the following to the my-styles.module.css file:

.myTastic {
    border: 1px solid blue;
}

.myTasticHeadline {
    font-size: 2em;
}

Styled Components

You can also use any of the styled components libraries available right now. We might not always be able to extract the CSS from them in the default build process, but you might be able to extend the build process accordingly and depending on the used library.

You'll need to install the library using yarn install in your Project and then, depending on the library, you should be ready to go. Be aware that our PostCSS configuration might not apply, depending on the used libraries.

Libraries (TailwindCSS)

Some libraries like Tailwind CSS, which we're also using for the Boost Theme, require custom pre- or post-processors in webpack. For this we allow you to extend the build process. In the case of Tailwind, a build process extension like the following <project_dir>/config/webpack.post.js will help:

module.exports = (config, PRODUCTION, SERVER) => {
    // Add tailwind configuration to SCSS compilation
    for (let rule of config.module.rules) {
        if (rule.use && Array.isArray(rule.use)) {
            for (let loader of rule.use) {
                if (loader.loader && loader.loader.match('postcss-loader') && loader.options) {
                    loader.options.plugins = () => {
                        return [
                            require('postcss-flexbugs-fixes'),
                            require('tailwindcss')(__dirname + '/tailwind.config.js'),
                            require('autoprefixer'),
                        ]
                    }
                }
            }
        }
    }

    return config
}

This way the SCSS PostCSS compilation step will still use our default PostCSS and autoprefixer configuration but also combine this with the Tailwind specific modifications. This will enable you to use Tailwind theming as well as Tailwinds @apply in the (S)CSS files.


‹ Back to Article List


Still need help? Contact Us Contact Us