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 font-awesome 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).

Pre designed drupal core pages:

Error pages: 404 - page not found, 403 - Access Denied, Maintenance Page
User pages: User login, register, Forgot password
Search: Search result page
Forums: Forums page, Forum topics page
Comments: Listing of comments, comment form
Forms: Contact form, Feedback form, Webforms

Requirements

This theme requires Drupal core >= 9.0. This theme does not require any theme and modules outside of Drupal core.

Installation

Install as you would normally install a contributed Drupal theme. Install with composer composer require 'drupal/flexi_style' then enable the theme.

Configuration

Go to the Administration » Appearance. On the same page "FlexiStyle" theme and click on the install and set as default.

Create subtheme

You can create a subtheme through a shell script.
Install the "FlexiStyle" theme with the composer composer require 'drupal/flexi_style but don't enable it.
Go to the theme folder from shell or command prompt: cd themes/contrib/flexi_style.
Run this command from the shell "Make script executable": chmod +x scripts/subtheme.sh.
Run this command from the shell to launch the script: sh scripts/subtheme.sh or ./scripts/subtheme.sh.
That script will ask the questions for you to create your subtheme.
1. Type machine_name of the theme: my_theme
2. Type Name of the theme: My Theme
Go to the administration -> Appearance and enable the my_theme.

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 rendering 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

Anoop Singh - anoopsingh92