PHPackages benmanu/silverstripe-styleguide - 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. benmanu/silverstripe-styleguide ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility) benmanu/silverstripe-styleguide =============================== Generates a styleguide for a SilverStripe theme 0.1.1(8y ago)108.1k9[15 issues](https://github.com/benmanu/silverstripe-styleguide/issues)1SCSS Since May 4Pushed 4y ago1 watchersCompare [ Source](https://github.com/benmanu/silverstripe-styleguide)[ Packagist](https://packagist.org/packages/benmanu/silverstripe-styleguide)[ Docs](https://github.com/benmanu/silverstripe-styleguide)[ RSS](/packages/benmanu-silverstripe-styleguide/feed)WikiDiscussions master Synced today READMEChangelog (3)Dependencies (4)Versions (5)Used By (1) silverstripe-styleguide ======================= [](#silverstripe-styleguide) [![Build Status](https://camo.githubusercontent.com/3cacfd6606d3c0c772a82e39128d5d1e60ef076042a542ea5940ebd083471c6d/68747470733a2f2f7472617669732d63692e6f72672f62656e6d616e752f73696c7665727374726970652d7374796c6567756964652e7376673f6272616e63683d6578706572696d656e74732532467061676573)](https://travis-ci.org/benmanu/silverstripe-styleguide)Generates a styleguide for a SilverStripe theme using CSS documentation. Requirements ------------ [](#requirements) SilverStripe 4 or higher Installation ------------ [](#installation) ``` $ composer require benmanu/silverstripe-styleguide ``` Basic Usage ----------- [](#basic-usage) Define the base css/scss folder through the site config. ``` BenManu\StyleGuide\StyleGuideController: paths: 'styleguide/scss' // the base folder used to render kss. css_files: - 'themes/default/css/screen.css' // any css theme files to include in the styleguide. js_files: - 'themes/default/js/script.js' // any js theme files to include in the styleguide. ``` Opens up a controller route `/sg`. Comments tagged with `Styleguide 1.0`, `Styleguide 2.0` etc are used to create the main `/sg/style-guide` navigation. Sub-navigation sections are generated with tags of `Styleguide 1.1`, `Styleguide 1.2` etc. Sub-navigation children are made up of section modifiers like `.btn-default`, `.btn-primary`. Example ------- [](#example) You can use the styleguide module scss/css as an example using the below config in your site `_config/config.yml` file. ``` BenManu\StyleGuide\StyleGuideController: paths: 'styleguide/scss' css_files: - 'styleguide/dist/css/screen.css' ``` Kitchen Sink CSS Example ------------------------ [](#kitchen-sink-css-example) ``` /* #Components All the components! Styleguide 1.0 */ /* #Buttons Use the button classes on an , , or element. Markup: Button Template: Includes/Button SectionTemplate: BenManu/StyleGuide/Includes/SGColorPalette Deprecated: If there was a deprecation notice it would go here. Experimental: If there was any experimental notes they would go here. .btn-default - Standard button. .btn-default:hover - Subtle hover highlight. .btn-primary - Provides extra visual weight and identifies the primary action in a set of buttons. .btn-success - Indicates a successful or positive action. .btn-danger - Indicates a dangerous or potentially negative action. $success - The success hex code variable. $danger - The danger hex code variable. Compatible in IE6+, Firefox 2+, Safari 4+. Styleguide 1.1 */ ``` See the KSS documentation for further details, with a couple of exceptions being the `Template:`, and `SectionTemplate:` parameters. The `Template:` parameter will render a SilverStripe template file as the example (see Fixtures below), and the `SectionTemplate:` will render a SilverStripe template file as the Section display. All comment descriptions are treated as markdown and parsed through [parsedown](http://parsedown.org/). ### Section And SectionTemplate [](#section-and-sectiontemplate) Fixtures -------- [](#fixtures) A yml fixture file can be created in the **(project)/styleguide/** directory called **fixture.yml**, used to populate template variables. All template files should be placed under the key **Template**, example: ``` Template: Includes/Footer: FooterContent: 'Here is some footer content' ``` Alternatively you can reference other non-template values to populate relationships (has\_one, has\_many, many\_many) and field values, example: ``` SiteConfig: main: Title: MySite Title Site: link1: Link: #link1 Text: Link 1 link2: Link: #link2 Text: Link 2 link3: Link: #link3 Text: Link 3 StyleGuide: main: Content: 'Here is some footer content' Template: Includes/Footer: SiteConfig: =>SiteConfig.main FooterLinks: =>Site.link1, =>Site.link2, =>Site.link3 FooterContent: =>StyleGuide.main.Content ``` Pages ----- [](#pages) A yml fixture file can be created in the **(project)/styleguide/** directory called **pages.yml**, used to create additional main and children pages. The `Template` parameter should be the same name as a SilverStripe template file in your theme. All template files should be placed under the key **Page**, example: ``` Page: documentation: Title: Documentation Template: SGDocumentation performanceMonitoring: Title: Performance Monitoring Template: SGPerformanceMonitoring ``` Alternatively you can populate a `Children` parameter referencing a list of child pages to include in the sub-navigation: ``` Documentation: general: Title: General Template: SG_General css: Title: Css Template: SG_Css js: Title: Js Template: SG_Js git: Title: Git Template: SG_Git images: Title: Images and icons Template: SG_ImagesAndIcons Children: child1: Title: Child 1 Template: SGChild child2: Title: Child 2 Template: SGChild Page: documentation: Title: Documentation Children: =>Documentation.general, =>Documentation.css, =>Documentation.js, =>Documentation.git, =>Documentation.images performanceMonitoring: Title: Performance Monitoring Template: SGPerformanceMonitoring Children: =>Children.child1, =>Children.child2 ``` Project Links ------------- [](#project-links) - [KSS](http://warpspire.com/kss/) - [parsedown](http://parsedown.org/) ### Health Score 27 — LowBetter than 47% of packages Maintenance0 Infrequent updates — may be unmaintained Popularity28 Limited adoption so far Community15 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 92% of commits — single point of failure 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 ~287 days Total 5 Last Release 2931d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/1373344?v=4)[Ben Manu](/maintainers/benmanu)[@benmanu](https://github.com/benmanu) --- Top Contributors [![benmanu](https://avatars.githubusercontent.com/u/1373344?v=4)](https://github.com/benmanu "benmanu (46 commits)")[![adrexia](https://avatars.githubusercontent.com/u/984753?v=4)](https://github.com/adrexia "adrexia (4 commits)") --- Tags silverstripekssstyleguide ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/benmanu-silverstripe-styleguide/health.svg) ``` [![Health](https://phpackages.com/badges/benmanu-silverstripe-styleguide/health.svg)](https://phpackages.com/packages/benmanu-silverstripe-styleguide) ``` ### Alternatives [illuminate/session The Illuminate Session package. 9939.3M850](/packages/illuminate-session)[friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103519.9k53](/packages/friendsoftypo3-content-blocks)[silverstripe/userforms UserForms enables CMS users to create dynamic forms via a drag and drop interface and without getting involved in any PHP code 1371.1M85](/packages/silverstripe-userforms)[symbiote/silverstripe-advancedworkflow Adds configurable workflow support to the CMS, with a GUI for creating custom workflow definitions. 46302.4k9](/packages/symbiote-silverstripe-advancedworkflow)[kss-php/kss-php A PHP implementation of KSS: a methodology for documenting CSS and generating styleguides 23142.7k2](/packages/kss-php-kss-php) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)