Drupal 8 brings many changes in terms of frontend. Drupal is now focused on the mobile-first responsive approach. Frontend performance has been given a high priority, unlike previous versions of Drupal. There is a new asset management system based around libraries that will deliver only the minimum required assets for a page that comes with Drupal 8.
Using the new asset management system:
- Create a folder named css in your themes base directory. (../mytheme/css)
- In your css folder, add a style.css file that will hold the theme’s CSS declarations. For demonstration purposes, add the following CSS declaration to style.css:
- In your theme folder, create a mytheme.libraries.yml file and edit it, as shown in the following screenshot:
- This tells Drupal that there is a global-styling library. You have the ability to specify a library version and use the VERSION defaults for your themes. It also defines the css/styles.css stylesheet as part of the library under the theme group
- Edit your mytheme.info.yml, and add the declaration to global-styling library:
- Themes are able to specify a librarie key that defines the libraries that should always be loaded. This YAML array lists libraries to be loaded for each page.
- Go to Configuration and then to Development to rebuild Drupal’s caches.
- With your theme set to the default, go to your Drupal site.
- Your theme’s global-styling library will be loaded and the page’s background color will be styled appropriately: