Download the PHP package sunnysideup/silverstripe-elemental-style without Composer

Jellygnite Elemental Dynamic Styles

Introduction

Add as many style dropdown fields as you like to any element via a YML file.

Styles are grouped by location. This allows you to insert CSS classes into various positions in your template other than just the holding container.

A good example of where you might want extra styles within your template is when you need to offer the ability to change the number of columns within a grid.

UPDATES

• v4.4.2 : Minor updates. Ability to group styles. Responsive helper function to create multiple versions of a single style for different viewports.
• v4.4.0 : Extra fields are now available. Multiselect, Optionset and ImageOptionset
• v4.3.0 : Includes front end editing for styles. With almost real time results you can see exactly what your elements will look like with various styles applied. You can also use the back end preview area to access this feature.

TO DO

• move front end editor into iframe
• improve responsive helper UI

Requirements

• SilverStripe ^4.0
• dnadesign/silverstripe-elemental ^4.0

Installation

Example configurations

Include the following information in your config:

• 'Index' : Unique identifier for the style field
• 'Title' : Label for the style field
• 'Description' : Optional brief description
• 'Location' : Use this style in a different location in the template
• 'Tab' : Name of the Tab to add the style field to
• 'After' : or, the name of the existing field to add the style field after
• 'Styles' : Array of styles to appear in the style field ['title' => 'css classes']
• 'Prefix' : Prefix for the outputted style
• 'Suffix' : Suffix for the outputted style
• 'Options' : Array of options to create different form fields. Slider and Multiselect (listbox) are the available field types.
• 'Default' : Allows a default value when nothing is selected in the dropdown field. Note this does not have to exist as an option in the allowed Styles, i.e. it can be whatever you want.
• 'Group' : Group multiple styles on one line. Use CamelCase for the Group name as this will also be used as the Group title.
• 'Responsive' : This is a helper function to quickly create multiple styles for responsive viewports.

Method 1

You can add extra styles to your individual Elements, e.g.

Options e.g.

Method 2

Or add using yml file, e.g. to make the styles available to Elements that extend the BaseElement:

Method 3

Alternative method using an Extension on your Elements, create a file called CustomBaseElementExtension.php.

And then in your .yml file:

Using Styles in your templates

There are a few ways to use the styles in your templates.

The original $StyleVariant variable will output all styles that don't use the location option. e.g.

The $StyleByLocation method is more powerful and allows you to create multiple styles that can be used throughout your templates.

You don't have to limit yourself to using it for class names.

And in the template:

Front end editing

In order to view the front end editing features you need to ensure the following things:

• View the page in draft mode, i.e. /page-url?stage=Stage

• Add this to your Page.ss template at the bottom of the page before the </body> closing tag

• Add this to your ElementHolder.ss template to the top level HTML tag data-jes-element="$ID", e.g.

Notes

The minimum requirements for a style is as follows. Title will use the style's index, (in this case 'MarginTop').

You can disable an inherited style on a per element basis by setting the index to null, e.g.