Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Defining CSS and JavaScript files in Libraries in Drupal 8.

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 582
    Comment on it

    Drupal 8 has come up with many significant improvement in theming, which makes theming flexible and easier.
    The theming in drupal 8 follows the SMACSS categorization. The scripts, stylesheets and the dependencies are defined in the Libraries in .libraries.yml file, which is very much different from the previous versions. 

    Let’s  see how to define Libraries in Drupal 8.


    Every library has its unique name in the file. The name should be different and unique one under which different css , js or dependencies are defined.

     

    An example of library file:

     

    # In mytheme.libraries.yml
    
    # library name.
    example-library-name:
      version: "1.0.x"
      css:
        # it is a SMACSS category.
        base:
          # defining the path of css.
          assets/css/base.css: {}
        theme:
          assets/css/print.css: { media: print }
      js:
        assets/js/myglobal.js: {}
      dependencies:
          # defining dependencies with respect to the core jquery.
        - core/jquery


    The above library is defined in YAML Format.


    Now, let’s look each property of the file in detail :

     

    Naming : The Library has a custom unique name. This name must be unique because it is used for keeping the track of the libraries defined in the same file.

     

    example :

     

    # library name.
    example-library-name:

    Version : This an option property. This one is use to keep track of the libraries of different projects only, just for the identification purpose.

     

    CSS : The category CSS includes two SMACSS categories base and theme. The css files are always included below the css: line in base and theme categories. In the curly brackets we can define the properties.


    example :


     

     css:
        # it is a SMACSS category.
        base:
          # defining the path of css.
          assets/css/base.css: {}
        theme:
          assets/css/print.css: { media: print }


     

    JavaScript : As the css files are included below the CSS: line similarly the javascripts are included below js: line. But it doesn't follow the SMACSS category. Like the CSS in the curly brackets we can define the properties like minified : true etc.


    example :

     

     js:
        assets/js/myglobal.js: {}
    
    

     

    Dependencies : The dependencies are the other libraries which already exists or defined in another theme, module or of Drupal core. The dependencies are always defined below the dependencies: line.
     

    example :

     

    dependencies:
        # defining dependencies with respect to the core jquery.
        - core/jquery


     
    (core refers to core.libraries.yml file of Drupal 8)

     

    External Files : We can include the external stylesheets also by using the external url and in the curly brackets setting the external property true.
     

    example :

     

    font:
      css:
        base:
          '//fonts.googleapis.com/css?family=Lato': { external: true }

    in the above external link we are defining the google fonts.

 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: