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)
  • Frontastic component 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.jsx 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;
}

Frontastic component or pattern dependent local (S)CSS

You can always import (S)CSS directly from your Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. or any other (presentational) component imported from your Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code.. The benefit here is that when used together with deferred Frontastic components we can also generate chunked CSS files and so can 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.jsx 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.jsx 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. See the using styled components in Frontastic components article for more information.

Libraries (TailwindCSS)

Some libraries like Tailwind CSS, which we're also using for our FRONTASTIC STARTER COMPONENTS, 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.


Did this page help you?