PHPackages                             jellygnite/silverstripe-elemental-style - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. jellygnite/silverstripe-elemental-style

ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility)

jellygnite/silverstripe-elemental-style
=======================================

Dynamic styling for elemental blocks.

5.0.1(1y ago)018342BSD-3-ClausePHP

Since Sep 14Pushed 1y ago1 watchersCompare

[ Source](https://github.com/jellygnite/silverstripe-elemental-style)[ Packagist](https://packagist.org/packages/jellygnite/silverstripe-elemental-style)[ RSS](/packages/jellygnite-silverstripe-elemental-style/feed)WikiDiscussions master Synced 3w ago

READMEChangelog (10)Dependencies (4)Versions (35)Used By (2)

Jellygnite Elemental Dynamic Styles
===================================

[](#jellygnite-elemental-dynamic-styles)

Introduction
------------

[](#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
------------

[](#requirements)

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

Installation
------------

[](#installation)

```
composer require jellygnite/silverstripe-elemental-style

```

Example configurations
----------------------

[](#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

[](#method-1)

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

```
    private static $extra_styles = [
		'ElementBackgroundColor' => [
			'Title' => 'Element Background Color',
			'Description' => 'Set the background color for the block element',
			'Tab' => 'Container',
			'Location' => 'element.class',
			'Prefix' => 'bg-',
			'Styles' => [
				'Inherit' => '',
			]
		],
		'ElementPaddingVertical' => [
			'Title' => 'Element Padding Vertical',
			'Description' => 'Adjust the padding on top and bottom sides of the block element',
			'Location' => 'element.class',
			'Prefix' => 'py-',
			'Styles' => [
				'Default' => '',
				'None' => '0',
				'X-Small' => '2',
				'Small' => '4',
				'Medium' => '6',
				'Large' => '8',
				'X-Large' => '9',
			],
			'Responsive' => [
				'Mobile' => [
				],
				'Tablet' => [
					'Prefix' => 'py-sm-', // You can override any of the original style options
				],
				'Desktop' => [
					'Prefix' => 'py-lg-',
				],
			],
		],
		'ElementPaddingTop' => [
			'Title' => 'Element Padding Top',
			'Description' => 'Adjust the padding on top side of the block element',
			'Tab' => 'Container',
			'Location' => 'element.class',
			'Styles' => [
				'Default' => '',
				'None' => 'pt-0',
				'X-Small' => 'pt-2',
				'Small' => 'pt-4',
				'Medium' => 'pt-6',
				'Large' => 'pt-8',
				'X-Large' => 'pt-9',
			]
		],
		'ElementPaddingBottom' => [
			'Title' => 'Element Padding Bottom',
			'Description' => 'Adjust the padding on bottom side of the block element',
			'Tab' => 'Container',
			'Location' => 'element.class',
			'Styles' => [
				'Default' => '',
				'None' => 'pb-0',
				'X-Small' => 'pb-2',
				'Small' => 'pb-4',
				'Medium' => 'pb-6',
				'Large' => 'pb-8',
				'X-Large' => 'pb-9',
			]
		],
		'ElementMarginVertical' => [
			'Title' => 'Element Margin Vertical',
			'Description' => 'Adjust the margin on top and bottom sides of the block element',
			'Tab' => 'Container',
			'Location' => 'element.class',
			'Styles' => [
				'Default' => '',
				'None' => 'my-0',
				'X-Small' => 'my-2',
				'Small' => 'my-4',
				'Medium' => 'my-6',
				'Large' => 'my-8',
				'X-Large' => 'my-9',
			]
		],
		'ElementMarginTop' => [
			'Title' => 'Element Margin Top',
			'Description' => 'Adjust the margin on top side of the block element',
			'Tab' => 'Container',
			'Location' => 'element.class',
			'Styles' => [
				'Default' => '',
				'None' => 'mt-0',
				'X-Small' => 'mt-2',
				'Small' => 'mt-4',
				'Medium' => 'mt-6',
				'Large' => 'mt-8',
				'X-Large' => 'mt-9',
				'Negative Small' => 'mt-n4',
				'Negative Medium' => 'mt-n6',
			]
		],
		'ElementMarginBottom' => [
			'Title' => 'Element Margin Bottom',
			'Description' => 'Adjust the margin on bottom side of the block element',
			'Tab' => 'Container',
			'Location' => 'element.class',
			'Styles' => [
				'Default' => '',
				'None' => 'mb-0',
				'X-Small' => 'mb-2',
				'Small' => 'mb-4',
				'Medium' => 'mb-6',
				'Large' => 'mb-8',
				'X-Large' => 'mb-9',
			]
		],
	];

```

Options e.g.

```
		'SwatchShape' => [
			'Title' => 'Swatch Shape',
			'Description' => 'Set the border radius as a percentage from 0% (square) to 50% (circle).',
			'Tab' => 'Palette',
			'Location' => 'item.swatch.style',
			'Prefix' => 'border-radius:',
			'Suffix' => '%;',
			'Options' => [
				'Type' => 'slider',
				'Min' => '0',
				'Max' => '50',
				'Step' => '5',
				'Unit' => '%',
			],
		],
		'ImageSettings' => [
			'Title' => 'Image Settings',
			'Description' => 'Adjust the look of the image',
			'Location' => 'image.css',
			'Styles' => [
				'Round border' => 'b-circle',
				'Scale on hover' => 'hover-scale',
				'No background colour' => 'bg-none',
			]
			'Options' => [
				'Type' => 'multiselect',
			],
		],

```

### Method 2

[](#method-2)

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

```
DNADesign\Elemental\Models\BaseElement:
  extra_styles:
    # Then define your styles
    MarginTop:
      'Title': 'Margin Top'
      'Description': 'Adjust the margin on the top'
      'Styles':
        'None': 'mt-0'
        'Small': 'mt-4'
    GridMobile:
      'Title': 'Grid Mobile'
      'Description': 'Set the number of columns for a grid'
      'Location': 'grid'
      'Tab': 'Layout'
      'Group': 'Grid'
      'Styles':
        'Full': 'uk-child-width-1-1'
        'Two column': 'uk-child-width-1-2'
        'Three column': 'uk-child-width-1-3'
    GridTablet:
      'Title': 'Grid Tablet'
      'Description': 'Set the number of columns for a grid'
      'Location': 'grid'
      'Tab': 'Layout'
      'Group': 'Grid'
      'Styles':
        'Full': 'uk-child-width-1-1'
        'Two column': 'uk-child-width-1-2'
        'Three column': 'uk-child-width-1-3'
```

### Method 3

[](#method-3)

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

```