Styling Frontastic starter components

Now that you've copied over the Frontastic starter componentsFrontastic starter components - Frontastic components that come with each Frontastic project that can be copied into your own project to use. Known in code as `boost theme`., you can make some style changes to make them fit your brand.

project.yml

In your project.yml (found in your config folder), you can adjust colors, font sizes, border radius, and shadow to match your brand. For example:

data:
  layout:
    theme:
      colors:
        primary:
          100: "#EBF4FF"
          200: "#C3DAFE"
          300: "#A3BFFA"
          400: "#7F9CF5"
          500: "#667EEA"
          600: "#5A67D8"
          700: "#4C51BF"
          800: "#434190"
          900: "#3C366b"
        secondary:
          100: "#E6FFFA"
          200: "#B2F5EA"
          300: "#81E6D9"
          400: "#4FD1C5"
          500: "#38B2AC"
          600: "#319795"
          700: "#2C7A7B"
          800: "#285E61"
          900: "#234E52"
        neutral:
          100: "#F7FAFC"
          200: "#EDF2F7"
          300: "#E2E8F0"
          400: "#CBD5E0"
          500: "#A0AEC0"
          600: "#718096"
          700: "#4A5568"
          800: "#2D3748"
          900: "#1A202C"
        system:
          error: "#C53030"
          warning: "#ECC94B"
          green: "#38A169"
        background:
          primary: "#FFFFFF"
      box:
        borderRadius: {}
        shadow: {}
      font:
        baseSize: 16px
        size: {}
        face: sansserif
        color: "#000000"

🚧

You'll need to adjust the fields that are already here, you can't add in extra fields.

This will then automatically update your settings.scss file in the src folder.

Styling Tailwind

When you copied over the starter components, you should've also created a Tailwind configuration file in your config folder, such as below:

const paths = require('@frontastic/catwalk/config/paths')
const plugin = require('tailwindcss/plugin')
const {
    colors,
    borderRadius,
    baseFontSize,
    fontSize,
    fontColor,
    fontFamily,
    boxShadow,
} = require('../src/js/themes/defaultTheme')

module.exports = {
    theme: {
        extend: {
            /* PART OF THEME */
            colors,
            borderRadius,
            fontSize,
            fontFamily,
            boxShadow,
            /* END OF PART THEME */
            borderWidth: {
                '2px': '2px',
                '3px': '3px',
            },
            flex: {
                '0-0-05': '0 0 50%',
            },
            gridColumnEnd: {
                'span-2': 'span 2',
            },
            gridTemplateColumns: {
                '1-340': '1fr 340px',
                '120-1xfr': '120px 1fr',
                '120-2xfr': '120px 1fr 1fr',
                '1fr-2fr': '1fr 2fr',
                '1.25rem-1fr-1.25rem-1fr-1.25rem': '1.25rem 1fr 1.25rem 1fr 1.25rem',
            },
            gridTemplateRows: {
                'auto-1fr': 'auto 1fr',
                'auto-1fr-auto': 'auto 1fr auto',
            },
            height: {
                'fix-120px': '120px',
                'fix-240px': '240px',
                'full-84px': 'calc(100vh - 84px)',
            },
            inset: {
                full: '100%',
                3.3: '3.3rem',
            },
            margin: {
                center: '0 auto',
            },
            maxHeight: {
                0: '0',
                '316px': '316px',
                '736px': '736px',
            },
            maxWidth: {
                '124px': '124px',
                '192px': '192px',
                '960px': '960px',
                '1240px': '1240px',
                '3/4': '75%',
            },
            minHeight: {
                '354px': '354px',
                '400px': '400px',
                inherit: 'inherit',
            },
            spacing: {
                '2px': '2px',
                100: '25rem',
                160: '40rem',
                '1/2': '50%',
                '3/2': '150%',
                '1/3': '33.333333%',
                '2/3': '66.666667%',
                '4/3': '75%',
                '1/4': '25%',
                '2/4': '50%',
                '3/4': '75%',
                '1/5': '20%',
                '2/5': '40%',
                '3/5': '60%',
                '4/5': '80%',
                '1/6': '16.666667%',
                '2/6': '33.333333%',
                '3/6': '50%',
                '4/6': '66.666667%',
                '5/6': '83.333333%',
                '16/9': '56.25%',
                '21/9': '42.85%',
                '1/12': '8.333333%',
                '2/12': '16.666667%',
                '3/12': '25%',
                '4/12': '33.333333%',
                '5/12': '41.666667%',
                '6/12': '50%',
                '7/12': '58.333333%',
                '8/12': '66.666667%',
                '9/12': '75%',
                '10/12': '83.333333%',
                '11/12': '91.666667%',
            },
            transitionProperty: {
                visibility: 'visibility',
                height: 'height',
                'max-height': 'max-height',
            },
            transitionDuration: {
                20: '0.2s',
                30: '0.3s',
            },
            transitionTimingFunction: {
                'ease-out-expo': 'cubic-bezier(0.39, 0.58, 0.57, 1)',
            },
            width: {
                'fix-488px': '488px',
            },
        },
        // The breakpoints have to match with boost/src/js/config/breakpoints.jsx
        screens: {
            xsm: '420px',
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1280px',
        },
    },
    plugins: [
        plugin(function ({ addUtilities }) {
            const utilities = {
                /* PART OF THEME */
                '.font-family': {
                    fontFamily: fontFamily,
                },
                '.base-font-size': {
                    fontSize: baseFontSize,
                },
                '.font-color': {
                    color: fontColor,
                },
                '.stroke-font-color': {
                    stroke: fontColor,
                },
                '.fill-font-color': {
                    stroke: fontColor,
                },
                '.button-loader-color-themed': {
                    border: '3px solid',
                    borderColor: `${colors.primary.main} transparent ${colors.primary.main} transparent`,
                },
                /* END OF PART OF THEME */

                '.bg-transparent-50': {
                    backgroundColor: 'rgba(253, 250, 250, 0.5)',
                },
                '.border-bottom-solid': {
                    borderBottomStyle: 'solid',
                },
                '.border-bottom-system-error': {
                    borderBottomColor: colors.system.error,
                },
                '.border-x-transparent': {
                    borderLeftColor: 'transparent',
                    borderRightColor: 'transparent',
                },
                '.justify-self-center': {
                    justifySelf: 'center',
                },
                '.justify-self-end': {
                    justifySelf: 'end',
                },
                '.justify-items-center': {
                    justifyItems: 'center',
                },
                '.translate-right': {
                    transform: 'translateX(0)',
                },
                '.translate-left': {
                    transform: 'translateX(-135%)',
                },
                '.webkit-transition': {
                    transitionProperty: '-webkit-transform',
                },
                '.self-baseline': {
                    alignSelf: 'baseline',
                },
            }

            addUtilities(utilities)
        }),
    ],
    variants: {
        borderWidth: ['responsive', 'hover', 'focus'],
        textColor: ['active'],
    },
    purge: {
        content: [
            paths.appSrc + '/**/*.tsx',
            paths.appSrc + '/**/*.jsx',
            paths.appSrc + '/**/*.scss',
        ],
    },
}

You can update any of the fields in the file to match your brand.

Atoms, molecules, organisms

In your src/js/patterns folder, you'll find a folder each for atoms, molecules, and organisms. It's here that you can add more styling to the different elements that are included within each starter component.


Did this page help you?