Which Drupal core theme you should try for your next assignment!

Alphons Jaimon — Tue, 10 Nov 2020 05:40:25 +0000

As of writing this post Drupal 8/9 were in stable.

Bartik theme - Default theme in drupal.

Bartik is the default user-facing theme, or the theme you first see when you install Drupal using the standard profile.
Plain and enough for basic sites.

Seven theme - Default admin theme

Default admin theme baked into the Drupal core.
Looks quite plain and old. :)

Claro theme - An experimental admin theme.

This is an administrator theme built into the Drupal core.
Looks like some inspiration from a mix of Material and Flat UI's

Stark theme - A classic representation of Mark 1 by Tony Stark. ;) Only for demonstrative purpose.

The Stark theme is provided for demonstration purposes; it uses Drupal’s default HTML markup and CSS styles. It can be used as a troubleshooting tool to determine whether module-related CSS and JavaScript are interfering with a more complex theme, and can be used by designers interested in studying Drupal’s default markup without the interference of changes commonly made by more complex themes.
It's probably unsurprising to learn that the Stark theme provides the absolute minimal amount of markup and CSS. It's primarily for demonstration purposes, or for sites that have very strict markup and semantic requirements. Unless you plan to implement a custom version of each of Drupal's default templates, Stark probably isn't a good choice for a base theme. But it can be incredibly helpful in tracking down module-related markup and CSS bugs.

Classy theme - A subtheme of Stable and base for Bartik and Seven.

Classy is a subtheme of Stable that adds many helpful classes that make it easier to quickly achieve a modern look with Drupal.
Classy provides the rich markup familiar to users of previous versions of Drupal. Its markup provides many classes as well as an attempt at basic styling of core's markup. Classy is used as the base theme for both the Bartik and Seven themes. Its markup attempts to provide defaults that will be helpful to the majority of sites.

Stable theme - Base theme for many different themes

Stable theme aggregates all of the CSS from Drupal core into a single theme. Stable theme is designed to be a fence for backward compatibility. The Stable theme markup and CSS will not change so any sub-theme of Stable will know that updates will not cause it to break.
Stable is Drupal's "clean" base theme. It provides minimal markup and a small handful of CSS classes. The intent is that this Stable base theme will be used as a backwards compatibility layer protecting your theme against changes to core's markup and styling. If you're looking to build a custom theme with complete control over all of the markup and styling you should take a look at using Stable as your base theme.

Resources:

Exploring a fresh composer managed Drupal site's composer.json

Alphons Jaimon — Tue, 10 Nov 2020 03:51:09 +0000

Let's explore a fresh composer managed Drupal site's 'composer.json' file, doesn't it look quite overwhelming yeah BUT no its just too easy to understand and modify if needed!

Json files are build with "key":"value" pairs just like an associative array or dictionary.

Here I have used a 'recommended-project' template from Drupal.

$ composer create-project drupal/recommended-project <project-folder-name>

`$ cat composer.json` 👀

{
    "name": "drupal/recommended-project",

first key says 'name' which is basically the name of the whole Drupal package.

    "description": "Project template for Drupal 9 projects with a relocated document root",

As the key itself says 'description' of the project, here it says this is a template project with the document root relocated to a different folder called 'web/'

    "type": "project",

Here type indicates what type of composer package , this Drupal package is a huge project, while modules will have 'drupal-module' and themes will have "drupal-theme" there are many more we will explore later in this blog post.

    "license": "GPL-2.0-or-later",

as you would be knowing every software has its own license, Drupal is under General Public License 2.0

    "homepage": "https://www.drupal.org/project/drupal",

Homepage link of the Drupal project.

    "support": {
        "docs": "https://www.drupal.org/docs/user_guide/en/index.html",
        "chat": "https://www.drupal.org/node/314178"
    },

Documents and forum links you can get support in case of any doubts or issues.

    "repositories": [
        {
            "type": "composer",
            "url": "https://packages.drupal.org/8"
        }
    ],

Composer retrieves information from packagist.org to download packages, Drupal projects are not listed on Packagist, instead, Drupal.org provides its own repository of composer metadata for Drupal projects.

    "require": {
        "composer/installers": "^1.9",
        "drupal/core-composer-scaffold": "^9",
        "drupal/core-project-message": "^9",
        "drupal/core-recommended": "^9",
        "drush/drush": "^10.3"
    },

These are the packages on which this composer based drupal project depends on.
composer/installers This will install their package to the correct location based on the specified package type.
drupal/core-composer-scaffold This project provides a composer plugin for placing scaffold files (like index.php, update.php, …) from the drupal/core project into their desired location inside the web root.
drupal/core-project-message This Composer plugin displays a configurable message after Composer installation processes have finished.
drupal/core-recommended This project is for use with a Composer-managed Drupal site. It is recommended that all Composer-managed Drupal sites use this project.
drush/drush This is contributed module which I installed using composer require. Drush is a command line shell and scripting interface for Drupal, a veritable Swiss Army knife designed to make life easier for those of us who spend some of our working hours hacking away at the command prompt.

    "conflict": {
        "drupal/drupal": "*"
    },

This key is used to avoid further auto upgrading of Drupal project. By default composer tries to change version of the dependencies for the module being installed and drupal is a dependency for every module its better not to upgrade or downgrade based on the requirement of the module as that could cause stability issues for other modules. A better explanation can be found here.

    "minimum-stability": "dev",
    "prefer-stable": true,

This simply specifies the minimum and recommended stability of any new modules being installed. Known flags which can be replaced with dev in minimum-stability
- stable (most stable)
- RC (release candidate)
- beta
- alpha
- dev (least stable) More explanation about stability key can be found here

    "config": {
        "sort-packages": true
    },

config key is used to do any custom configuration to the project, like "sort-packages": true just means to sort packages after installation in the directory. config section can be used to specify any tests to be run after any installation of the packages. More details around config can be found here

    "extra": {

extra is again kind of like config which basically specifies some configuration which will be used by other modules or packages.

        "drupal-scaffold": {
            "locations": {
                "web-root": "web/"
            }
        },

Drupal scaffold just specifies that the Drupal project's web-root is at 'web/'. This setting could be referred by other modules and packages for proper installation. This is being done by drupal/core-composer-scaffold.

        "installer-paths": {
            "web/core": [
                "type:drupal-core"
            ],
            "web/libraries/{$name}": [
                "type:drupal-library"
            ],
            "web/modules/contrib/{$name}": [
                "type:drupal-module"
            ],
            "web/profiles/contrib/{$name}": [
                "type:drupal-profile"
            ],
            "web/themes/contrib/{$name}": [
                "type:drupal-theme"
            ],
            "drush/Commands/contrib/{$name}": [
                "type:drupal-drush"
            ],
            "web/modules/custom/{$name}": [
                "type:drupal-custom-module"
            ],
            "web/themes/custom/{$name}": [
                "type:drupal-custom-theme"
            ]
        },

This config specifies the respective path for respective type of packages like drupal-core should be placed in web/core and a drupal-library should be placed in web/libraries/<name-of-library> and so on.

    "drupal-core-project-message": {

Post installation message by drupal/core-project-message.

        "include-keys": [
                "homepage",
                "support"
        ],

Tells to specifies these predefined keys from the json. check out line number 6-7 in this same composer.json.

        "post-create-project-cmd-message": [
                "<bg=blue;fg=white>                                                         </>",
                "<bg=blue;fg=white>  Congratulations, you’ve installed the Drupal codebase  </>",
                "<bg=blue;fg=white>  from the drupal/recommended-project template!          </>",
                "<bg=blue;fg=white>                                                         </>",
                "",
                "<bg=yellow;fg=black>Next steps</>:",
                "  * Install the site: https://www.drupal.org/docs/8/install",
                "  * Read the user guide: https://www.drupal.org/docs/user_guide/en/index.html",
                "  * Get support: https://www.drupal.org/support",
                "  * Get involved with the Drupal community:",
                "      https://www.drupal.org/getting-involved",
                "  * Remove the plugin that prints this message:",
                "      composer remove drupal/core-project-message"
            ]
        }
    }
}

This the post installation message displayed by drupal/core-project-message

That's it we just covered each and every line of Drupal projects composer.json. If I have missed anything feel free to reach out.

DEV Community: Alphons Jaimon