Styling and Branding

The Storefront Boilerplate is built using Vue components on top of the Nuxt framework. Tailwind CSS is used to style components, eliminating the need for CSS preprocessors.

For showcase purposes, SCAYLE branding is used throughout the Boilerplate. However, the design is fully customizable to reflect your brand. You can easily update branding elements such as the logo, favicon, color scheme, typography, and icons. Additionally, you can modify main component blocks like buttons, chips, and dropdowns, as well as larger "molecules" like sliders and modals. The responsive layout breakpoints are also adjustable to meet your specific requirements.

Prerequisite

To see changes locally immediately, make sure to disable caching in the .env file:

sh

Copy

PAGE_CACHE_DISABLED=TRUE

Branding

Replace logo

The main application logo used throughout the application is defined in the AppLogo component located in the components/AppLogo.vue file.

By default, this comes with a SCAYLE branded logo but can be easily adjusted to fit your brand's logo.

To do so, open the components/AppLogo.vue and replace the existing SVG code with your logo.

svg

Copy

<svg
      v-bind="{ height, width }"
      xmlns="http://www.w3.org/2000/svg"
       <!-- Add your SVG logo here -->
</svg>

Using an Image

In case you don't have an SVG logo, you can also easily use an image instead for this.

To do so, first place your logo in the public folder of the project and then replace the svg component in AppLogo.vue with the following snippet:

markup

Copy

<template>
  <SFLink :to="routeList.home" raw>
    <NuxtImg src="/{fileName}" />
  </SFLink>
</template>

The fileName should be the full path to the file you want to use in your public folder but without the public/ prefix.
For example, if my logo is under the path public/logo.png, we just need to use /logo.png here in the component.

Replace favicon

By default, the Storefront comes with a SCAYLE-branded favicon.ico located in the public folder.

This can be easily replaced with your brands favicon.ico.

Styling

Storefront uses TailwindCSS to style the whole application, which makes it easy to have consistent and customizable styling through theming.

Tailwind config viewer

Tailwind viewer is a local UI tool for visualizing your Tailwind CSS configuration file.

It is enabled by default during local development mode and not available in the production build.

To view your local Tailwind config, go to localhost:3000/_tailwind/.

Base color scheme

To adjust the basic color scheme of the Storefront, open the tailwind.config.ts file and find the colors object.

Here we define all colors used within the project, primarily the primary, secondary and accent colors are used throughout the project:

css

Copy

    extend: {
      colors: {
        primary: {
          DEFAULT: '#171717',
        },
        secondary: {
          DEFAULT: '#666666',
        },
        accent: {
          DEFAULT: '#ff7df4',
        }
      }
    }

The primary color is the most used throughout the project and ranges from most texts, borders and some backgrounds.

The secondary color is mainly used for less important text and elements which are shown a bit more muted compared to the primary color.

The accent color is a vibrant alternative which is used sparsely to give the shop a bit more color and highlight certain elements. For example, if a product is on the wishlist, the wishlist icon will be shown in the accent color, selected filters and to highlight selections.

We use abstract names to make it easy to change these colors based on your requirements and allow for easy and consistent customization.
That way you can replace any of our three primary colors without being limited in a specific color spectrum, for example, you can make your accent color red if this fits your shop.

Each color also has a set of shades that define lighter and darker shades of the default colors. To generate the shades for the three colors, you can use a tool like UIColors to help you get started.

Typography

To change the base font family used throughout the project, adjust the fontFamily property in tailwind.config.ts:

typescript

Copy

    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },

Font Sizes

To customize the font sizes throughout the app, you can modify the font-size, line-height and letter-spacing in the fontSize config from Tailwind.

Similar to colors, we also don't use specific font sizes in the app but use generic sizes such as S, M, and L, allowing you to easily change the sizing throughout the application.

To learn more about font sizes in Tailwind, check out their official documentation.

Responsive Design

Storefront comes with a responsive design, meaning based on the viewport the UI will adjust to fit the best to the user's screen.

To do this, we define a list of breakpoints in config/breakpoints.ts which are used throughout the application.

typescript

Copy

export default {
  xs: 320,
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  '2xl': 1440,
}

Customize Icons

Storefront comes with a set of SVG Icons located in the assets/icons folder. The icons are loaded through the nuxt-svgo module so they can be easily used within the project.

The icons are then easily accessible as Vue components prefixed with Icon, for example, a file called basket.svg will be available in the project as the IconBasket component.

To adjust the icons, you can simply replace the content of the existing ones and also easily add more depending on your needs.