FlexiStyle

FlexiStyle is a pure CSS-based Drupal base theme. 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.

Installation:

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

Features:

• User-defined column widths
• Container and container-fluid (full width) layout.
• Flexbox CSS property for the layout and structure.
• Easy to customize twig templates.
• Body classes for entities, users, and roles
• Custom styling editor (`Custom CSS`) from UI.
• Variable file to change the theme color and other components UI.
• Subtheme overrides and replaces every CSS from Drupal.
• Override common and recommended twig templates and pre-process functions.
• Theme-settings file for managing the setting of the theme.
• This theme is based on atomic design patterns and classes.
• The theme follows the components-based twig and CSS.
• Mathematical functions in the CSS to manage the color and sizes.
• Lightweight.
• Breakpoints.
• Fully responsive and mobile-friendly.
• Cross-browser-compatible.
• Progressive Web Apps (PWA) capability support.
• 403 access denied and 404 page not found pages designed accordingly.
• Mantainence page design capability.
• Custom scrollbar
• Flexibility to change the sitewide theme color from variable.css.
• Dismissable alert messages.
• Use predefined classes for the perfect UI.
• The performance score is 90+.
• Attach libraries based on the components.

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 scripts/subtheme.sh.
5. Run this command from the shell to launch the script: sh scripts/subtheme.sh or ./scripts/subtheme.sh.
6. That script will ask the questions for you to create your subtheme.
   • Type machine_name of the theme: my_theme
   • Type Name of the theme: My Theme
7. Go to the administration -> Appearance and enable the My Theme.