What is Plain Classes? #

Wakaloka Plain Classes is an Oxygen's selector system alternative.

Motivation #

Oxygen was managing the CSS classes on your HTML elements through the Selector System.

The selector system is really powerful, it will allow you to manage your CSS classes through a simple interface without even defining the style rules on a CSS stylesheet. This is a great feature for users who want to manage the design of their HTML without the need to write the CSS code.

When it comes to using external CSS files, you can use it by writing the CSS classes name directly on the input field, but this system limitation will also generate empty CSS rules. To allow you to use the autocomplete feature, you are required to import your CSS file content to Oxygen's editor settings.

Improvements over Oxygen Selector System #

Inline class names inputs #

Plain Classes is just a simple input field. It will not generate a new CSS rule. You can type multiple CSS class names at once, and the CSS class names will be automatically added to the HTML elements.

Autocomplete Hook #

Use the provided filter hook to register the autocomplete suggestions of your custom classes. The filter hook accepts and return a flat PHP array of CSS class names.

<?php

add_filter('f!Wakaloka\\PlainClasses\\Core\\Plain::tribute_autocomplete', function (array $classes) {
    $my_custom_classes = [
        'my-custom-avatar',
        'button-primary',
        'wp-submenu-wrap',
    ];

    $classes = array_merge($classes, $my_custom_classes);

    return $classes;
});

Lightweight Processing #

Since the CSS classes names are stored as it is on each HTML element, there will be no complex processing to process your Oxygen shortcode.

Limitation #

Since the CSS classes names are stored as it is on each HTML element, there will be no parsing process to generate the Autocomplete suggestions. The autocomplete suggestions' index is static and you are require to register the CSS classes name collection of your custom or 3rd-party CSS framework using the Autocomplete suggestion hook.