How to use breakpoints in drupal 8?

There we have simple way to use breakpoints means separate media query in drupal 8 and that will also help in speed up or optimize the website.
We have some following points, that will easily clear your doubts about breakpoints and separate media query.
1. We will create a file with the name of 'yourthemeORmoduleName.breakpoints.yml', Example for theme like your theme name is 'bartik' the file name will be 'bartik.breakpoints.yml'.
2. This breakpoints file will be use for write the code of media query for responsiveness. This file will be located in 'themes/bartik/' root.
Example:
bartik.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.small:
  label: small
  mediaQuery: "(min-width: 0px)"
  weight: 1
  multipliers:
    - 1x
    - 1.5x
    - 2x
bartik.medium:
  label: medium
  mediaQuery: "(min-width: 768px)"
  weight: 2
  multipliers:
    - 1x
    - 1.5x
    - 2x
bartik.large:
  label: large
  mediaQuery: "(min-width: 1024px)"
  weight: 3
  multipliers:
    - 1x
    - 1.5x
    - 2x
Here the breakpoint properties are:
    Very first we will take a unique breakpoint name like: bartik.small:      (moduleName/themeName.unique breakpointName),
    Example: bartik.small: ,bartik.medium: ,bartik.large: ,bartik.wide: ,bartik.narrow: ,bartik.mobile:
   
    label - The human readable name of the breakpoint
    mediaQuery - a valid @media query(for responsiveness)
    weight - where the breakpoint is ordered in relation to other breakpoints
    multiplier - the ratio between the physical pixel size of the active device and the device-independent pixel size
               - 1x
               - 1.5x // supports Android
               - 2x  // supports Mac retina display
              
3. After that we will create new library and attach this breakpoints in 'bartik.libraries.yml' file.
Syntax:
libraryName:
  version: 1.0
  css:
    theme:
      css/desktop-small.css: { media: all and (min-width: 851px) }
      css/mobile.css: { media: only screen and (max-width: 767px) }
      css/mobile-common.css: { media: all and (min-width: 560px) and (max-width: 850px) }
     
    Same like we can create many viewports / breakpoints / media queries and attach with libraries and templates of our website.

4. Now this specific library we will render on template where we want to apply.
Example: {{ attach_library('mythemeName/libraryName') }}   

So in this way we can optimize the site and increase the performance with the help of breakpoints because with the help of this only in case of Mobile or Tab or Ipad or Desktop specific mentioned css will be rendered else not.
And the most important thing is clear the Cache and run Cron.

Note: If have any suggestions or issue regarding 'How to use breakpoints in drupal 8?' then you can ask by comments.  

How to create tabs by custom module in drupal 8?

Today we will discuss about, how to create new tab in custom module and set the linking. So before start, we will clear some points for custom module.
1. "module_name.links.task.yml" and "module_name.routing.yml" is important file, if we are going to create tabs.
2. Now Please follow the syntax, we will explain here for all parameters and syntax for tabs.
Example Syntax:   Here 'account_login' is example of my module name..

account_login.tab_1:                                   // This is the Tab Routers
  route_name : account_login.content         // This is route name and we will use this in routing.yml  file when we create routers and path
  title: account login                                   // This is Title of Tabs.
  base_route: account_login.content          // This is for set default open Tab
  weight: 10                                                // This is for tab weight or for order of Tab

account_login.tab_2:                                   // This is for second Tab Router
  route_name: account_login_otp.content   // This is route name and we will use this in routing.yml file when we create routers and path
  title: Work                                                 // This is Title of Tabs.
  base_route: account_login.content           // This is for set default open Tab
  weight: 20                                                 // This is for tab weight or for order of Tab
 
 
Now we will create "routing.yml" file.
Example Syntax:   Here 'account_login' is example of my module name..

account_login.content:        // so we will use same route name for first tab which we use in 'links.task.yml' file
   path: '/account/login'
   defaults:
   # Calls the list controller, defined in the annotation of the product entity.      
    _form: '\Drupal\account_login\Plugin\Form\userloginForm'
    -title: 'Two Way Authentication Login'
   requirements:
    _permission: 'access content'
    _user_is_logged_in: 'FALSE'
   
account_login_otp.content:                             // We will use same route name for second tab which we use in 'links.task.yml' file
   path: '/account/login/authenticate'
   defaults:
   # Calls the list controller, defined in the annotation of the product entity.      
    _form: '\Drupal\account_login\Plugin\Form\userloginotpForm'
    -title: 'Login Form Authenticate'
   requirements:
    _permission: 'access content'   
    _user_is_logged_in: 'FALSE'
   
   
Now just we have to install custom module and and clear the cache then put the first URL on brower (Ex: /account/login) and its will show our Tabs. So simple way to easily create custom tabs.

Note: What is Namespace and Use keyword in drupal 8 module?