Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Drupal 8 Theme folder structure

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 534
    Comment on it

    In D8, location of theme moved to /themes, while the core themes moved to /core/themes, not sites/all/theme like Drupal 7. The basic theme structure of D8 Will have sub folder for images,css, js & templates.

     

    This is how the directory structure of theme looks like in Drupal 8.
     

    /Themes/mythemename
    
             /css
             /js
             /templates
             /includes
           -mythemename.info.yml
           -mythemename.libararies.yml
           -mythemename.breakpoints.yml
           -mythemename.theme

     

    mythemename.info.yml: This is mandatory file that tell about theme. This also defines libraries, and block regions.

     

    mythemename.libraries.yml: This is used to define JS and CSS libraries.

     

    mythemename.breakpoints.yml: Breakpoints are defined in a .breakpoints.yml file which is used to adjust the design with respect to different screen devices.

     

    mythemename.theme: This file contains all the conditional logic and data preprocessing of the variables.

     

    /css: All .css files are store in 'css' sub folder & must be defined in libraries file. Drupal 8 uses SMACCS rules to define css.

     

    /js: All .js  files related to theme are stored in the 'js' sub folder & must be defined in libraries file i.e .libraries.yml file.

     

    /images : It is good practice to store images in the 'images' sub folder.

     

    /includes : This folder contains 3rd-parties plugins (like Bootstrap, Owl Slider,etc).

     

    screenshot.png : This is theme screenshot file that will be displayed in the administrator page. (you can see the screenshot in the appearance page admin/appearance)

     

    /templates (twig files or *.html.twig ): All template files are store in 'Templates' folder. These files provide HTML markup to your theme page & responsible for how is your theme looks. If you want to override the default markup of template files then, you have to follow drupal naming conventions so that older template file overridden by new one.

    Example of twig files (*.html.twig) : html.html.twig, page.html.twig

    html.html.twig - defines every page on the site
    page.html.twig - defines Html markup & Region definitions. This file will render how your page layout will look like.

     

    D8 blogs:

    How to add region in Drupal 8
    How to create simple module in D8

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: