Belgrade

Belgrade is a Bootstrap based Drupal theme made for Drupal Commerce 2.x.
Build around Commerce Kickstart and Layout Builder.

Commerce Kickstart Live Demo

The theme incorporates fully customized Bootstrap 5 and Bootstrap Icons, providing a wide range of theming best practice examples. With the Belgrade theme, you have extensive configuration options to adjust layouts, change fonts, handle status messages, manage icons, add classes, and utilize predefined product teaser designs. To streamline front-end tooling, the theme integrates Laravel Mix, an API on top of Webpack. Additionally, it leverages PostCSS Autoprefixer and SVG inline icons to enhance development efficiency.

INSTALLATION

Install as you would normally install a contributed Drupal theme.
Visit https://www.drupal.org/node/1897420 for further information.

CONFIGURATION

The Belgrade theme offers various configuration options to customize its appearance. To access the theme settings:

1. Log in to your Drupal administration panel.
2. Go to Appearance in the admin menu.
3. Find the Belgrade theme and click on the Settings link.

Customization Options

Font Settings

You can easily change the font used throughout your site with the Belgrade theme. Follow these steps to adjust the font:

1. Go to Appearance and click on the Settings link for the Belgrade theme.
2. Look for the Font Settings section.
3. Choose the desired font from the available options.

Region/Layout Adjustments

The theme provides flexibility in adjusting the layout of your site. To make layout adjustments:

1. Go to Appearance and click on the Settings link for the Belgrade theme.
2. Locate the Regions section.
3. Use the options provided to modify the layout, including extened configuration for the offcanvas navigation region.

- Change the direction of the offcanvas navigation.
- Control the visibility of the logo within the offcanvas navigation.
- Configure body scrolling behavior when the offcanvas menu is open.
- Choose backdrop options for the offcanvas navigation.

Message Styling

Customize the messages displayed to users with the Belgrade theme. To style the messages:

1. Go to Appearance and click on the Settings link for the Belgrade theme.
2. Find the Message Styling section.
3. Customize the message styles according to your preference.

SVG Integration

The theme offers advanced support for scalable vector graphics (SVG), allowing you to utilize SVG seamlessly within your site.

BUILD TOOLS

Theme utilizes the following build tools to streamline frontend development:

PostCSS Autoprefixer

PostCSS Autoprefixer is a plugin that automatically adds vendor prefixes to CSS properties.

SVG Inline Icons

The theme also includes PostCSS Inline SVG plugin, which allows you to reference an SVG file and control its attributes using CSS syntax. You can inline an SVG file in CSS and manage its colors without modifying the original file.

Build Tools Usage

# Compiling and autoprefixing CSS
npm run build

# Watch Assets for Changes and compile.
npm run watch

# Create an SVG sprite from all SVGs in the `icons` folder.
npm run icons-sprite

To access additional documentation on the theme, including build tools installation and usage please refer to the README.md file.