PHPackages fractas/elemental-stylings - 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. fractas/elemental-stylings ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility) fractas/elemental-stylings ========================== Collection of useful and reusable SilverStripe Elemental stylings properties 2.0(3mo ago)1416.4k91BSD-3-ClausePHPPHP ^8.3 Since Jul 13Pushed 3mo ago1 watchersCompare [ Source](https://github.com/fractaslabs/silverstripe-elemental-stylings)[ Packagist](https://packagist.org/packages/fractas/elemental-stylings)[ Docs](http://github.com/fractaslabs/silverstripe-elemental-stylings)[ RSS](/packages/fractas-elemental-stylings/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (2)Dependencies (2)Versions (4)Used By (1) SilverStripe Elemental Stylings =============================== [](#silverstripe-elemental-stylings) [![Latest Stable Version](https://camo.githubusercontent.com/95a91a3fcdd422a8b972cfe777da21ac9ce6ae0d94a6240911f463cc9fdbfa1e/68747470733a2f2f706f7365722e707567782e6f72672f667261637461732f656c656d656e74616c2d7374796c696e67732f762f737461626c65)](https://packagist.org/packages/fractas/elemental-stylings)[![Total Downloads](https://camo.githubusercontent.com/1f7b47eee6d76d186bfcf11152507cb411f1c2fe6b0a3194a09d775424692c8a/68747470733a2f2f706f7365722e707567782e6f72672f667261637461732f656c656d656e74616c2d7374796c696e67732f646f776e6c6f616473)](https://packagist.org/packages/fractas/elemental-stylings)[![Latest Unstable Version](https://camo.githubusercontent.com/7d1abb34d88e0429f353c01e7ed5aabf3dca02f161fbe23125357372f91d50bd/68747470733a2f2f706f7365722e707567782e6f72672f667261637461732f656c656d656e74616c2d7374796c696e67732f762f756e737461626c65)](https://packagist.org/packages/fractas/elemental-stylings)[![License](https://camo.githubusercontent.com/14b2ba436702b4f0ad47788d4ae58b60a795e4753b23ce146de0b9725b59f269/68747470733a2f2f706f7365722e707567782e6f72672f667261637461732f656c656d656e74616c2d7374796c696e67732f6c6963656e7365)](https://packagist.org/packages/fractas/elemental-stylings) Introduction ------------ [](#introduction) This module extends a [SilverStripe Elemental Blocks](https://github.com/dnadesign/silverstripe-elemental) to enhance its functionalities with predefined sets of Classes of Styling elements. Predefined Styling classes: - **StylingHeight** - changes a height of a Block - **StylingHorizontalAlign** - changes a horizontal alignment of a Block - **StylingLimit** - changes a limit of a Block - **StylingSize** - changes a size of a Block - **StylingStyle** *(extended from Core module)* - special enhancements for a class extended from Core module - **StylingTextAlign** - changes a text alignment inside of a Block - **StylingVerticalAlign** - changes a vertical alignment of a Block - **StylingWidth** - changes a width of a Block *(example uses Bootstrap Grid syntax)* The module provides basic markup for each of the stylings but you have an option to edit and/or replace those predefined styles. Requirements ------------ [](#requirements) - SilverStripe CMS ^6.0 - SilverStripe Elemental Blocks ^6.0 For CMS 4.x and 5.x use version 1.x of this module. Installation ------------ [](#installation) - Install a module via Composer ``` composer require fractas/elemental-stylings ``` - Follow an instructions for installation of [Elemental Blocks module](https://github.com/dnadesign/silverstripe-elemental#installation) - Apply a desired Styling Class extension on Block class *(ie. ElementContent that ships with Core module)***mysite/\_config/elements.yml** ``` DNADesign\Elemental\Models\ElementContent: extensions: - Fractas\ElementalStylings\StylingHeight - Fractas\ElementalStylings\StylingHorizontalAlign - Fractas\ElementalStylings\StylingStyle - Fractas\ElementalStylings\StylingTextAlign - Fractas\ElementalStylings\StylingVerticalAlign - Fractas\ElementalStylings\StylingWidth ``` - Add an desired styles based on your preferences, see [Configuration example](#full-configuration-example) - Optionaly, you can require basic CSS stylings provided with this module to your controller class like: **mysite/code/PageController.php**``` Requirements::css('fractas/elemental-stylings:client/dist/css/stylings.css'); ``` - Build and flush your project `vendor/bin/sake dev/build flush=1` Full configuration example -------------------------- [](#full-configuration-example) This is a sample configuration for use of Stylings classes in YML configuration. **mysite/\_config/elements.yml** ``` DNADesign\Elemental\Models\ElementContent: extensions: - Fractas\ElementalStylings\StylingHeight - Fractas\ElementalStylings\StylingHorizontalAlign - Fractas\ElementalStylings\StylingStyle - Fractas\ElementalStylings\StylingTextAlign - Fractas\ElementalStylings\StylingVerticalAlign - Fractas\ElementalStylings\StylingWidth styles: light: 'Light background color with Dark text' dark: 'Dark background color with White text' textalign: left: 'Left' right: 'Right' center: 'Center' horalign: left: 'Left' right: 'Right' center: 'Center' veralign: top: 'Top' middle: 'Middle' bottom: 'Bottom' height: small: 'Small' medium: 'Medium' large: 'Large' width: col-sm-6: '50%' col-sm-4: '33.33%' col-sm-12: '100%' ``` Implementation example: 'Text with Image' Element ------------------------------------------------- [](#implementation-example-text-with-image-element) - New Element class file: [ElementContentImage.php](https://gist.github.com/jelicanin/20d11104a89fd9ea3a1e69b8bc91824b) - New Element template file: [ElementContentImage.ss](https://gist.github.com/jelicanin/aec741745d417e9047efbf25bf93245d) Screenshots ----------- [](#screenshots) Updated GridField with preview of applied stylings: [![GridFieldStylings](docs/images/overview-gridfield-stylings.png?v=2)](docs/images/overview-gridfield-stylings.png?v=2) Styling tab of a Block with icons for specific styles: [![BlockStylings](docs/images/overview-block-stylings.png?v=2)](docs/images/overview-block-stylings.png?v=2) Reporting Issues ---------------- [](#reporting-issues) Please [create an issue](https://github.com/fractaslabs/silverstripe-elemental-stylings/issues) for any bugs you've found, or features you're missing. License ------- [](#license) See [License](LICENSE) Credits ------- [](#credits) Styling icons from IcoMoon - Free by [IcoMoon](https://icomoon.io/app) ### Health Score 56 — FairBetter than 98% of packages Maintenance81 Actively maintained with recent releases Popularity32 Limited adoption so far Community19 Small or concentrated contributor base Maturity79 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1384 days Total 3 Last Release 99d ago Major Versions 1.0-rc2 → 2.02026-02-08 ### Community Maintainers ![](https://www.gravatar.com/avatar/14952a0ffb7f5f82eaf00c2994dc2d955fba4e28cbe35d64f8b791005f666d11?d=identicon)[fractaslabs](/maintainers/fractaslabs) --- Top Contributors [![jelicanin](https://avatars.githubusercontent.com/u/692844?v=4)](https://github.com/jelicanin "jelicanin (15 commits)")[![wernerkrauss](https://avatars.githubusercontent.com/u/1043925?v=4)](https://github.com/wernerkrauss "wernerkrauss (14 commits)")[![hdpero](https://avatars.githubusercontent.com/u/13778690?v=4)](https://github.com/hdpero "hdpero (3 commits)")[![korthjp17](https://avatars.githubusercontent.com/u/3858661?v=4)](https://github.com/korthjp17 "korthjp17 (2 commits)")[![muskie9](https://avatars.githubusercontent.com/u/870751?v=4)](https://github.com/muskie9 "muskie9 (1 commits)")[![sunnysideup](https://avatars.githubusercontent.com/u/167154?v=4)](https://github.com/sunnysideup "sunnysideup (1 commits)") --- Tags content-managementsilverstripe-4silverstripe-5silverstripe-6silverstripe-elementalsilverstripe-modulestylingsilverstripecontent managementstylingContent Blockselementalsilverstripe elemental ### Embed Badge ![Health badge](/badges/fractas-elemental-stylings/health.svg) ``` [![Health](https://phpackages.com/badges/fractas-elemental-stylings/health.svg)](https://phpackages.com/packages/fractas-elemental-stylings) ``` ### Alternatives [wedevelopnl/silverstripe-elemental-grid Elemental grid module 1014.1k2](/packages/wedevelopnl-silverstripe-elemental-grid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)