Drupal 8 base theme
Webmaster Tutorials

How To Produce a Responsive and Simple Drupal 8 Theme

Creating a responsive Drupal 8 base theme from scratch is not that easy especially to those who are new to Drupal. However, if described in a more detail way things will become much easier and you can create the theme in your own. It is always good to know the process of creating a Drupal which eliminate the need to depend on someone else while you can also gather detail knowledge that let you know that how Drupal actually works. The process to create responsive drupal theme is discussed below in detail.

Drupal 8 base theme

Drupal 8 theme contains some common files and keys such as .info.yml, .libraries.yml, breakpoints.yml, CSS, JS, templates etc. And before starting to create the theme it is important to decide the layout of the website such as the position of header, footer, sidebar, content area etc. Once decided, next move on to create the theme from scratch.

The process is discussed in step by step process.

Step 1: Creating theme folder

Whereas the theme folders lies in Sites/all/theme in Drupal 7, thing is different in case of Drupal 8 as the theme folder lies here in core/theme. Also the basic folder will have several sub folders under it such as CSS, JS, templates, includes etc. Actually the basic theme folder created will have the structure like :

Theme

  • CSS
  • JS
  • Template
  • Includes

Step 2: Generating the info.yml file

Drupal 8 base theme

The next step is to create a .info.yml file. This is the most important one that is to be included first. The .info.yml file contains information about your theme. The .info.yml file will include the following keys such as Name, description, version, type, core base theme and region.

The region is important to define. The region can be defined the following way.

Headline: Headline

Header: header

Footer: footer

Sidebar: sidebar

If the regions are not declared the default regions will be used in the Drupal 8 base theme. Also, the Drupal templating machine is to be notified that the regions are been included. They should be mentioned in the page.html.twig file otherwise they will not show up.

Step 3: describe the libraries file

The libraries such CSS, script etc. should be defined in a different file named .libraries.yml and not in the info file.  For example, you can make use of style.css for styling in your theme while the Bootstrap library is to be used for responsive display feature. The style.css file will lie in the core/css folder while the bootstrap will lie in the includes/libraries/css directories.

Step 4: Theme region creation

First, understand the Drupal template files. The html in the D8 is rendered in the template files. They are now called as .html.twig. The tpl.PHP files in D7 are now changed in D8 as the PHP engine is being replaced with Twig. These files are stored in the template folders. The default page look and HTML can always be changed in case you want to make the theme look your way.

However, page.html.twig is the most important file that all want to alter as it defines how the html layout of the page will look like. Here is how to create a page.html.twig file.

Creation of page.html.twig file:

This file has three main content and these are:

  • Html mark up of the theme you will be creating
  • Regions
  • Variables of other content items

If you are eager to create a html region for the page that includes a headline, header, footer and main, then all of those should be included in the .info.yml file. The code will look like:

Next, as the theme will be responsive so all the regions is to be added in the Bootstrap container of your page. So, you are required to add the code

<div class=’container’></div> between each section.

Next, comes the main content and sidebar region. For those, we will be using the column class of Bootstrap so that they can be divided in the following way.

Main content-75% of the width and sidebar-25% of the width

Here is how the main section code will look like:

This is a conditional statement that indicates if the headline has anything in it. The same code is to be added in the header, content, sidebar and footer.

Step 5: content creation

  • After defining the content they are to be created to enable the theme.
  • The theme is to be activated first for it to work. For this go to admin/appearance and then search for the base theme to set it as default.
  • Next, the contents are to be placed in the right region so that the website look the way you want. Each and every section in Drupal is called block and every block should be placed in the right region so that they appear in the perfect area. Various regions are already been created such as headline, header, footer, main, So head towards basis/admin/structure and block. From there you can place the right block in right region.
  • Logo creation is the next task. You need to create a logo and then enable it as Drupal will look for logo.svg in the file for logo display.
  • The screenshot is to be created then which will show up in the admin interface admin/appearance. And if you want to create a screenshot then place an image file screenshot.png in the theme directory.

Step 6: styling the theme

This is the Drupal 8 base theme creation. You can make use of your creativity to make the website look attractive. Bootstrap can be used for responsiveness while you can use SAAS for styling purpose.

Leave a Reply

Your email address will not be published. Required fields are marked *