FlexiStyle

FlexiStyle is a pure CSS-based Drupal base theme. This theme is fully compatible with Drupal 10. It is a dynamic and modern custom theme designed specifically for Drupal. Its theme completely overwrites standard root twig templates. This theme is based on custom and flex box-based CSS. This theme seamlessly integrates aesthetics with functionality, offering a visually striking and user-friendly.

This theme is lightweight because we are attaching all the CSS and JS libraries based on the components and disabling unnecessary libraries. theme performance, best practices, and SEO scores are high in a lighthouse.

The theme is fully responsive and mobile-first. In this theme, we have added the latest version of the Fontawesome and Google material libraries for icons.

"Flexi Style" theme settings are manageable, You can change the header, navbar, footer, and maintenance mode time settings and styles from the theme appearance.
Flexi Style theme is fully supportable with Progressive web application (PWA).

Other Drupal base themes

FlexiStyle Bootstrap FlexiStyle Bootstrap SCSS

✔ Installation

• Download the FlexiStyle theme from drupal.org manually, or by composer composer require 'drupal/flexi_style'.
• Install the FlexiStyle theme.
• Configure the defined theme settings.

✔ Create subtheme

1. You can create a subtheme through a shell script.
2. Install the FlexiStyle theme with the composer composer require 'drupal/flexi_style' but don't enable it.
3. Go to the theme folder from shell or command prompt: cd themes/contrib/flexi_style.
4. Run this command from the shell "Make script executable": chmod +x script/subtheme.sh.
5. Run this command from the shell to launch the script: sh script/subtheme.sh or ./script/subtheme.sh.
6. That script will ask the questions for you to create your subtheme.
   • The machine name of your custom theme? [e.g. mytheme_flexistyle]: mytheme_flexistyle.
   • The theme name of your custom theme? [e.g. Mytheme FlexiStyle]: Mytheme FlexiStyle
7. Go to the administration -> Appearance and enable the Mytheme FlexiStyle.

✔ Features

• This theme is fully compatible with Drupal 10.
• User-defined column widths.
• Container and container-fluid (full width) layout.
• Flexbox CSS property for the layout and structure.
• The theme layout and structure are fully flexible.
• Easy to customize twigs and templates.
• Unique body classes are rendered based on the entities, users, roles, and header styles for the different UI.
• Global styling editor provided for instant changes on your page without modifying any CSS file from the server.
• Separate variable file for changing the sitewide theme color and sizes.
• Create a new Drupal custom theme with the subtheme folder.
• Completely overwrites standard root twig templates.
• Predefined Google Fonts.
• Predefined Fontawesome and Google material icons.
• Customize Header and footer custom classes.
• Multiple header styles are available.
• Header position changeable from UI.
• Change the header, navbar, footer, and maintenance mode time settings and styles from the theme appearance.
• This theme is based on atomic design patterns and classes.
• The theme follows the components-based twig and libraries.
• The theme follows mathematical functions in the CSS to manage the colors and sizes.
• The theme is Lightweight.
• The theme performance, best practices, and SEO scores are high in a lighthouse.
• The theme is fully support Progressive Web Apps (PWA).
• The theme is fully responsive and mobile-friendly.
• The theme is Cross-browser-compatible.
• Pre-designed error pages like 403 access denied, 404 page not found, and maintenance page.
• Dismissable alert messages.
• Use predefined classes for the perfect UI.

Maintainers of this theme

• Anoop Singh