Drupal Coding Execution

Global styles and scripts:

In the example below global-styling is a title of your library (a file or bunch of files) that are usable with global styles. Showing in your theme_name.libraries.yml has addition to another theme_name.info.yml file. This specific library will now be available across the whole site.

Here is how it shows in your theme_name.libraries.yml file.

global-styling:

version: VERSION

css:

theme:

css/style.css: {}

Then you will want to show a single declared theme_name.info.yml file.

name: Example

type: theme

core: 8.x

libraries:

- theme_name/global-styling

Declaring scripts are quite the same. In this theme_name.libraries.yml

global-scripts:

version: VERSION

js:

js/script.js: {}

Then in this particular theme_name.info.yml file, you can always include these libraries.

name: Example

type: theme

core: 8.x

libraries:

- theme_name/global-styling

- theme_name/global-scripts

Now, these twin library functions or collections of JS and CSS files are accessible across your complete site. These different and sparse set of CSS and JS functions combine in one single library.

global-styles-and-scripts:

version: VERSION

css:

theme:

css/style.css: {}

js:

js/script.js: {}

Visit Arpatech for further assistant

Drupal Programming Methodology

Deleting or overriding existing styles served by core:

In this theme_name.info.yml file:

stylesheets-remove:

- normalize.css

Alternatively, to override your core stylesheet you can use:

stylesheets-override:

- normalize.css

Declaring dependencies:

Example of declaring a dependency:

global-scripts:

version: VERSION

js:

js/script.js: {}

dependencies:

- core/jquery

- core/jquery.once

- core/modernizr

Specifying the scope of a JS file or sending it to the footer:

These are most cases when it can be best to avail a JS asset at your footer of the impending page. By default, they are part of your header but you cannot easily send them to your footer by notifying a scope in the theme_name.libraries.yml file.

js/script.js: { scope: footer }

Specifying media type:

Similarly, if the requirement for a print stylesheet in the intended theme seems to be impending it easily specifies with the media parameter in this theme_name.libraries.yml file.

css/print.css: { media: print }

Coding Processes in Drupal

Bringing in an external JS or CSS resource:

Often you need to include any external library in your module the way to include it is within theme_name.libraries.yml file.

remote-custom:

remote: https://github.com/yui/yui3

license:

name: BSD

url: https://github.com/yui/yui3/blob/master/LICENSE.md

gpl-compatible: true

version: VERSION

js:

http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js: { type: external, browsers: { IE: 'lte IE 8', '!IE': false } }

You also need to specify additional parameters inclusive in the theme_name.theme file with preprocess hooks like:

function theme_name_css_alter(&$css) {

$theme_path = drupal_get_path('theme', 'theme_name');

// Add googlefonts.

$googlefonts = '//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700|Source+Serif+Pro:700,400';

$css[$googlefonts] = array(

'data' => $googlefonts,

'type' => 'external',

'every_page' => TRUE,

'media' => 'all',

'preprocess' => FALSE,

'group' => CSS_AGGREGATE_THEME,

'browsers' => array('IE' => TRUE, '!IE' => TRUE),

'weight' => -1,

);

}

Conditional CSS or JS for older IE browsers:

You need to specify IE conditionals through certain constraints in theme_name.libraries.yml file.

http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js: { type: external, browsers: { IE: 'lte IE 8', '!IE': false } }

Adding or limiting a library to specific pages:

If you seem to use with loading of the specific library onto a certain page, e.g maintenance page, you require adding with a hook in your theme_name.theme file. Here is the foreseen example:

function theme_name_preprocess_maintenance_page(&$variables) {

$variables['#attached']['library'][] = 'theme_name/custom-library';

}

Here is an example of how a custom-library can be loaded only on a front page:

function theme_name_preprocess_page(&$variables) {

if($variables['is_front']){

$variables['#attached']['library'][] = 'theme_name/custom-library';

}

}