1. Download module using Drush  - drush dl <Module_name>

2. Go to module directory on terminal and initialize  empty repository - git init

3. Add file into your repository  - git add *

4. Commit the file in repository - git commit -m "Your message"

5. Make the changes in the file and commit your changes

6. Enter command to make the difference between from original to new file

   git -Naur <original_file> <modified_file>

7. And finally add the patch file in composer.json file.


Git Tutorial

1. How to get a clone of a repository?

   First of all you must have access of repository to get clone in your working directory.

   You also must have git software in your system. If you don't have git on your system, download from here     - https://git-scm.com/downloads 

   There are following steps to get a clone of Repository :

    Open your terminal

  •    Go to your web root directory like linux - /var/www/html
  •    Enter command - git clone <CLONE_URL>


<CLONE_URL> - It is two types of URL. First one is HTTPS(https://gitlab.example.com/*/*) and other is SSH (ssh://git@gitlab.example.com:*/*/*) 


2. How to check remotes in your repository?

   To check remotes in your repository, enter below command on terminal : 

    git remote -v 

3. How to add new remote in your repository?

   git remote add <origin> <clone_url>

4. How to create a branch for your repository?

   git checkout -b <branch_name> <remote_name>/<develop_branch>

5. How to add a new file in your repository?

    git add <filename>

6. What are the steps to create a Pull Request(PR)?

    Step 1: git add <filename>

    Step 2: git commit -m "[Messsage]"

    Step 3: git stash

    Step 4: git pull --rebase

    Step 5: git push

    Step 6: git stash pop

7. What are the steps to create a clean Pull Request(PR)?

    Step 1: git checkout

    Step 2: git pull

    Step 3: git checkout -b

    Step 4: git cherry-pick #commit-hash-your-merge-dev-branch

    Step 5: git push

8. How to make a single commit from multiple commits?

    git rebase -i HEAD~[Number_of_commits]

9. How to abort a rebase?

    git rebase --abort

10. How to clean your repository?

    Step 1: git checkout HEAD .

    Step 2: git clean -fd

11. How to delete local branch from your repository?

    git branch -d

Create an Info File for a Module

Every info file must contain certain keys in order for Drupal to be able to actually install the accompanying module. At a minimum you must provide:

  • a name for your module
  • a brief description of its functionality
  • the type (module or theme)
  • the major version of core supported by this code

These are the basics you need in place in order to see your module available on Drupal's installation screen. For a module called webstone_core, here are the contents of webstone_core/webstone_core.info.yml


name: Welcome webstone
description: A silly example module

type: module
core: 8.x

Drupal 8 Module Development

Attach a library from a Twig template

Asset libraries can also be attached from within a Twig template using the attach_library filter. Anytime that template is used the corresponding library will be attached in accordance with any template-specific conditions.

In order to see this in action, we need to create a template in our Webstone theme. Since we're using Bartik as our base theme, we can copy the node.html.twig from Bartik into our theme directory. After rebuilding the cache, we can see this new template in action. Let's add a bit of code so that our retro library is only added to the page if we're viewing node 1.

{# only attach our retro library if this is node 1 #} 
{% if node.id == 1 %}
  {{ attach_library('webstone/webstone') }}
{% endif %}


With this in place, visiting node 1 we can see our webstone library in action. Visiting any other node we can see that our library (nor any of its dependencies) has not been attached to the page.

Use #attached to add a library conditionally via a preprocess function

Another useful way to conditionally add a library is by using a preprocess function like hook_preprocess_page(). Here's another example of restricting our webstone asset library to the front page.

* Implements hook_preprocess_page() for PAGE document templates.
function webstone_preprocess_page(&$variables) {
  if ($variables['is_front'] == TRUE) {
    $variables['#attached']['library'][] = 'webstone/webstone';

This method of attaching a library works in preprocess functions, in manipulating form elements, or render arrays.

Attach a library to a specific page

In most cases it's best to restrict the conditions in which your library is attached to a page. So let's remove our library from webstone.info.yml and figure out how to add it on only the front page.

One method of conditionally restricting when your library is attached is to use the hook_page_attachments_alter function in our webstone.theme file or in a module's *.modulefile.

* Implements hook_page_attachments_alter
function webstone_page_attachments_alter(array &$page) {
  // Get the current path.
  $path = $current_path = \Drupal::service('path.current')->getPath();
  // If we're on the node listing page, add our retro library.
  if ($path == '/node') {
    $page['#attached']['library'][] = 'webstone/webstone';


By implementing hook_page_attachments_alter() we're able to add conditional logic that determines whether or not our asset library will be included on the page. In the example here we're only adding the webstone library to the node listing page (the default front page).


Asset loading order

All JavaScript files are loaded in the order in which the files are listed. By default all JavaScript assets are loaded in the footer. You can change this behavior by setting header: true for a library. Though be aware that once you declare a library as being part of the critical path like this all of its dependencies will also be loaded in the header.


  # Block the page from being loaded until Modernizr is initialized.
  header: true
    assets/vendor/modernizr/modernizr.min.js: {}

Drupal 8 follows a SMACSS-style categorization and CSS files are loaded first based on their category, and then by the order they are listed within a given category. The categories are as follows:

  1. base -- CSS reset/normalize plus HTML element styling
  2. layout -- macro arrangement of a page, including any grid systems
  3. component -- discrete, reusable UI elements
  4. state -- styles that deal with client-side changes to components
  5. theme -- purely visual styling (look-and-feel) for a component


    assets/vendor/jquery.ui/ui/core-min.js: {}
      assets/vendor/jquery.ui/themes/base/core.css: {}
      assets/vendor/jquery.ui/themes/base/theme.css: {}

Creating the webstone library

We can now take a look at /themes/custom/webstone to see our new theme's files. In this directory we'll add a file called webstone.libraries.yml with information about our new asset library.

  version: 1.0
      css/fonts.css: { weight: 10 }
    js/rainbow-headings.js: { }
    - webstone/rainbow


Parts of an asset library

Parts of an asset library

Create a breakpoint configuration file

1. Create the breakpoints YAML file

In the root of your theme or module's directory, create a new file called EXTENSION-NAME.breakpoints.yml, where EXTENSION-NAME is the short name of your theme or module. For example, Bartik's breakpoints YAML file is named bartik.breakpoints.yml.

2. Find the media queries in your module or theme

  • Search your theme or module's CSS directory for @media in editor.

3. Make a list of all the media query search results

If you have a lot of results, it can be helpful to copy the results to a text file so that you can better organize them

For example, if you perform a search for the string @media in the Bartik theme's CSS directory (core/themes/bartik/css), you will get the following results:

(Note: the number in front of @media is the line number.)

    Occurrences of '@media' in Directory /Library/WebServer/Documents/demo-responsive-theming/docroot/core/themes/bartik/css
Found Occurrences  (27 usages found)
    demo-responsive-theming  (27 usages found)
        docroot/core/themes/bartik/css  (3 usages found)
            layout.css  (1 usage found)
                15@media all and (min-width: 851px) {
            maintenance-page.css  (2 usages found)
                56@media all and (min-width: 800px) {
                65@media all and (min-width: 600px) { 
        docroot/core/themes/bartik/css/components  (24 usages found)
            featured-bottom.css  (2 usages found)
                13@media all and (min-width: 560px) {
                25@media all and (min-width: 851px) {
            field.css  (1 usage found)
                45@media all and (min-width: 560px) {
            form.css  (2 usages found)
                94@media screen and (max-width: 60em) { /* 920px */
                307@media all and (max-width: 600px) {
            header.css  (3 usages found)
                14@media all and (min-width: 461px) {
                30@media screen and (max-width: 460px) {
                41@media all and (min-width: 901px) {
            main-content.css  (1 usage found)
                15@media all and (min-width: 851px) {
            primary-menu.css  (3 usages found)
                114@media all and (min-width: 461px) and (max-width: 900px) {
                163@media all and (min-width: 901px) {
                208@media all and (min-width: 461px) {
            sidebar.css  (2 usages found)
                3@media all and (min-width: 560px) {
                16@media all and (min-width: 851px) {
            site-branding.css  (3 usages found)
                19@media all and (min-width: 461px) {
                24@media all and (min-width: 901px) {
                34@media all and (min-width: 901px) {
            site-footer.css  (3 usages found)
                13@media all and (min-width: 560px) {
                23@media all and (min-width: 560px) and (max-width: 850px) {
                45@media all and (min-width: 851px) {
            table.css  (2 usages found)
                63@media screen and (max-width: 37.5em) { /* 600px */
                71@media screen and (max-width: 60em) { /* 920px */
            tabs.css  (2 usages found)
                27@media screen and (max-width: 37.5em) { /* 600px */
                42@media screen and (min-width: 37.5em) { /* 600px */

4. Narrow down the list of media queries

As you can see from the search results for "@media" in the Bartik theme, there are many results. You don't necessarily have to represent every single media query in your breakpoints file. In fact, Bartik's breakpoints file only contains 3 breakpoints: mobile, narrow, and wide, representing the layout breakpoints that affect the main content area.

Remember that the purpose of the breakpoints file is to expose your theme's breakpoints to another module in the Drupal system. Assuming that we're creating a breakpoints file to use with the Responsive Image module, let's just pull out the media queries that affect regions inside the main content area, where it's mostly likely that new content containing images would be displayed. Basically, anything between the header and the footer, but ignoring components such as menus, tabs, tables, and forms. Looking at our search results for Bartik, these would be the ones in:

  • layout.css
  • featured-bottom.css
  • field.css
  • main-content.css
  • sidebar.css

In these files, we have some common media queries, namely:

  • @media all and (min-width: 851px)
  • @media all and (min-width: 560px)

Order the breakpoints by min- or max-width

Let's put these in order, from the lowest minimum-width to the highest:

  • @media all and (min-width: 560px)
  • @media all and (min-width: 851px)

Name the breakpoints

Given that the first layout style change is activated at a minimum-width of 560px, we can assume a "mobile-first" design. A mobile-first design usually implies that the default styles are meant to be applied to mobile-friendly viewport sizes, which in this case was determined to be less than 560px wide. Because of this assumption, we can name our first breakpoint "mobile", with an empty media query, followed by "narrow", triggered at a minimum-width of 560px, and "wide", triggered at a minimum-width of 851px. For each breakpoint label, note the associated media query. For example:


Media query: (empty, default styles (no media query))


Media query: @media all and (min-width: 560px)


Media query: @media all and (min-width: 851px)

Add pixel-resolution multipliers

The Breakpoint module supports pixel-resolution multipliers of 1x, 1.5x, and 2x. Multipliers represent the ratio between the physical pixel size of the active device and the device-independent pixel size. For example "Retina" displays have a multiplier of 2x. If you're not sure what to put here, enter 1x for a multiplier. Even with a 1x multiplier in this file, we can still configure usage of 1.5x or 2x images using the sizes attribute when we configure a responsive image style.


Media query: (empty, default styles (no media query)) Multipliers: 1x


Media query: @media all and (min-width: 560px) Multipliers: 1x


Media query: @media all and (min-width: 851px) Multipliers: 1x

Format breakpoint list as YAML

Now we're ready to take our list of breakpoints and put it into our EXTENSION-NAME.breakpoints.yml file.

For each label, we'll need to convert that to a machine-name identifier, and then under that fill in values for the keys:

  • label
  • mediaQuery
  • weight
  • multipliers
  label: mobile
  mediaQuery: ''
  weight: 0
    - 1x
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
    - 1x
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
    - 1x

The identifiers should start with the theme or module name, then a dot, followed by a short label for the breakpoint, i.e. bartik.mobile.


Enable Responsive Image module

Install/Enable the core Responsive Image module:

  • Navigate to Extend
  • In the core group of modules, check Responsive Image
  • Click Install button (bottom of page)

View the "Add new responsive image style" form

  • Navigate to Configuration > Media > Responsive image styles
  • Click Add responsive image style button

Check the Breakpoint Groups field for your module or theme name

  • Drop-down the list of breakpoint groups and check for your theme or module name. Or, if you've specified a breakpoint group, look for that name.