Kostym in Drupal 7

Note: If you haven't already read the Kostym documentaion, please do that first.

• Getting started
  • Why patch core?
  • Why patch ctools?
• Things explained and examples
  • kostym.libraries.json
  • Components get auto enabled
  • Code examples

Getting started

Get Drupal ready by:

1. Patch core with core-7.x-allow-modules-in-theme.patch Why?

• Patch ctools with ctools-1.x-allow-ctools-plugins-in-kostym-components.patch Why?
• Enable this kostym module

then make your theme ready by:

1. Create a kostym_components folder in your theme. Not clear?

• Add a kostym.libraries.json in the kostym_components you just created. What is this?

Done! Now your site is ready to wear the Kostym like a boss!

Why patch core?

Some Kostym components are modules. To make it possible for Drupal to find them even though they are place in a theme, we need to patch core a bit. And remember, keep calm and carry on.

Why patch ctools?

This is to keep the total number of modules down. The patch make it possible to create ctools plugins in components without creating a new module.

Things explained and examples

To make it a bit more clear where things should go, look at this example tree structure of a Drupal profile called project

It has two external libraries modernizr and swiper, a theme called project_theme, a kostym component called ExampleModule and another called ExampleCtools.

.
├── libraries
│   ├── modernizr
│   └── swiper
├── project.info
├── project.install
├── project.make
├── project.profile
├── modules
└── themes
    └── project_theme
	     ├── README.md
	     ├── dist
	     ├── favicon.ico
	     ├── gulpfile.js (Gulpfile.js boilerplate here)
	     ├── images
	     ├── kostym_components (Your components goes here)
	     │   ├── ExampleModule 
	     │   │   ├── ExampleModule.module (A module in a theme, pretty cool!)
	     │   │   ├── ExampleModule.info
	     │   │   ├── _ExampleModule.scss
	     │   │   └── ExampleComponent.tpl.php
   	     │   ├── ExampleCtools
	     │   │   ├── ctools-content_types (Ctools plugin without being a module, also pretty cool!)
	     │   │   │   └── ExampleCtools.inc
	     │   │   ├── ExampleCtools.js
	     │   │   └── _ExampleCtools.scss
	     │   └── kostym.libraries.json (This is explained below)
	     ├── logo.png
	     ├── project_theme.info
	     ├── package.json
	     ├── scss
	     └── template.php

kostym.libraries.json

Kostym makes it easy to load external libraries into your theme as you can see in the example below.

In this example we want to load modernizr on all pages and swiper only when needed. On modernizr we set the auto-add setting to true and on swiper to false.

Now modernizr gets loaded on all pages and swiper only gets loaded if a component calls it by drupal_add_library('kostym', 'swiper').

kostym.libraries.json

{
  "modernizr": {
    "js": {
      "modernizr/modernizr.custom.min.js": []
    },
    "auto-add": true
  },
  "swiper": {
    "js": {
      "swiper/dist/js/swiper.jquery.js": []
    },
    "css": {
      "swiper/dist/css/swiper.css": []
    },
    "auto-add": false
  }
}

Components get auto enabled

To make it as easy as possible to work with components, all components that are modules gets auto enabled when cache is cleared. There should not be any components that are not used lying around.

Code examples

Go to Drupal 7 kostym component examples.