Top 10 best practices for designing a perfect UX for your mobile app

Drupal 8 gives developers and site owners the flexibility of creating bespoke components that can be put together to build compelling digital experiences. Themes are Drupal’s design blocks that represent the visual appearance of a website. Drupal 8 comes with choices of core themes and third-party themes. However, if none of them cut it for you, you should probably be looking at Drupal 8 custom theme development. With Drupal 8 custom themes, you can tailor-fit your design to the exact requirements.

Drupal 8 provides Bartik as the frontend theme, but if you need a Drupal 8 custom theme then you can create your own Drupal 8 theme development, thus improving your Drupal theming skills. The easiest way to really understand Drupal 8 theme development is to practice and create one from the ground up.

Getting Started with Custom Drupal 8 Theme Development

Let’s get started with creating a Drupal 8 custom theme for our Drupal website.
STEP 1 : First, we need to create a custom theme under ‘web/themes/custom’ folder. We will name the folder as custom_theme.  

STEP 2 :Next, we will need to create an info.yml file. We need to specify the basic keys for it. Let us specify it over here.

CODE:
name: Custom Theme
type: theme
description: 'Custom Theme for My Website.'
package: Other
core: 8.x

STEP 3 : Now,let’s create alibraries.yml file to specify all the libraries we need (CSS AND JS) for our custom Drupal 8 theme.We will also create CSS and JS directory and its files to link it in here. We are going to name the library as global-styling.

CODE:
global-styling:
version: 1.x
 js:
js/script.js: {}
 css:
theme:
css/style.css: {}

STEP 4 : After creating the libraries.yml file, we need to link it to our theme.For this, we are going to add it in the info.yml file which will then apply it to the whole theme. 
 

CODE:
libraries:
- custom_theme/global-styling

So, the key will be libraries and path will be the theme name - ‘custom_theme’ / library name - ‘global-styling’.

STEP 5 : Next, we need to inherit the ‘Base Theme’.In our case, we will inherit ‘classy’ theme which is a Drupal core theme. So, the key will be base theme in info.yml. 

CODE:
base theme: classy

STEP 6 : Now, we will define the‘regions’ for our theme. In info.yml, we have to define under the ‘regions’ key.

CODE:
regions:
branding: Branding
navigation: Main navigation
search: Search
featured: Featured
content: Content
right_sidebar: Right sidebar
footer_first: Footer First
footer_second: Footer Second
footer_third: Footer Third
footer_bottom: Footer Bottom

Under ‘regions’ key you can define your regions for the custom theme. Here,
branding: Is the id of the region which should be lowercase letter.
Branding: Is the name of the region which can be Uppercase letter.

STEP 7 : After we have defined our regions for our custom theme, we need to override page.html.twig to grab our ‘regions’instead ofthe classy theme’s. We will create templates/system directory under which we will create the page.html.twig.

CODE:
header aria-label="Site header" class="header" id="header" role="banner">
     {{ page.branding }}
     {{ page.navigation }}
     {{ page.search }}
header>
section class="featured" id="featured" role="complementary">
   {{ page.featured }}
section>
section class="main" id="main">
   main aria-label="Site main content" class="content" id="content" role="main">
     {{ page.content }}
   main>
   aside class="right--sidebar" id="sidebar" role="complementary">
     {{ page.right_sidebar }}
   aside>
section>
footer aria-label="Site footer" class="footer" id="footer" role="contentinfo">
   div class="footer--top">
     {{ page.footer_first }}
     {{ page.footer_second }}
     {{ page.footer_third }}
   div>
   div class="footer--bottom">
       {{ page.footer_bottom }}
   div>
footer>

 In page.html.twig, we will create html structure for our regions. As you see in{{ page.branding }} –Here,

page - Is the key to render ‘regions’ in the page

branding- Is the region which we have defined in info.yml file.

So now, we have created our regions and rendered it in the page, now let’s start.

Step 8 : Go to Appearance in your Drupal site.You can see your custom theme present in the Uninstalled themes section.

You need to click ‘Install and set as default’ option to install your theme in the site.

After it is installed,go to Structure -> Block Layout.Your Custom Theme will appear under the Block Layout.

You will see a link for ‘Demonstrate block regions (Custom Theme)’.Click on the link.You can see all the regions that you had declared in theinfo.yml and added in page.html.twig
 

Step 9 :Now, you need to apply styles in the CSS for each region as per your design.We will use cssin this case;You can even use SCSSif you’d like. Just inspect the branding region - you shouldsee the region class and then add the CSS to that class. 

.header{
 display: flex;
 justify-content: space-between;
 padding: 10px;
}


.header.region {
 padding: 5px;
}


.header.region-branding {
 flex: 0 1 20%;
}


.header.region-navigation {
 flex: 0 1 50%;
}


.header.region-search {
 flex: 0 1 30%;
}


.region.block-region {
 padding: 15px;
}


.featured{
 padding: 40px 20px;
 background-color: indianred;
}


.main{
 padding: 50px 0;
 display: flex;
 justify-content: space-between;
}


.main.content {
 flex: 0 1 65%;
}


.main.right--sidebar {
 flex: 0 1 30%;
}


.footer--top {
 display: flex;
 justify-content: space-between;
 padding: 10px;
}


.footer--top .region {
 padding: 5px;
}


.region-footer-first, .region-footer-second, .region-footer-third {
 flex: 0 1 30%;
}

The Result:

Your Drupal 8 Custom Theme is ready!

If you need to write any hooks or create suggestions for your twig file, you could add the .theme file in your custom theme (shown below).