benmanu / silverstripe-simple-styleguide
Provides a kitchen sink template useful for theme development.
Installs: 37 988
Dependents: 2
Suggesters: 1
Security: 0
Stars: 12
Watchers: 1
Forks: 12
Open Issues: 4
Language:Scheme
Type:silverstripe-vendormodule
Requires
- silverstripe/cms: ^5.0
Requires (Dev)
- phpunit/phpunit: ^9.6
README
The Simple Styleguide enables site maintainers a single page to source the general site styles out of the box (typography, links, colours, form fields etc). Extensible through theme templates to build out a component library specific to the website.
Overview
The module adds a new controller endpoint which can be viewed at the /_styleguide
route, if logged in with
admin permissions, or viewing from a dev environment. Also provides a kitchen sink template that can be used
or overriden by your site theme to display frontend and typography components.
The SimpleStyleguideController
class also includes a basic form (SimpleStyleguideController::TestForm()
), and HTMLText output (SimpleStyleguideController::getContent()
), for testing framework output.
Installation
Run on the command line:
$ composer require benmanu/silverstripe-simple-styleguide
or include "benmanu/silverstripe-simple-styleguide": "^2.0"
in your project composer.json
and run:
$ composer update
Use the 1.0
tag for SilverStripe 3 sites.
Usage
The styleguide template can be overriden by including a SimpleStyleguideController.ss
file in your themes
template/Layout/
directory.
The SimpleStyleguideController
class can be overriden using SilverStripes extensions to either add new output functions, or modify the provided functions, by using the updateStyleguideData
extension hook.
Styleguide Data
An extension hook is available to override/edit the rendered template data through updateStyleguideData
.
Color Swatches
A simple color swatch template is available and can be overriden through the color_swatches
config value.
BenManu\SimpleStyleguide\SimpleStyleguideController: color_swatches: - Name: "Black" Description: "This color is rather dark" CSSColor: "#000000" TextColor: "#ffffff" - Name: "Grey" Description: "This color is grey" CSSColor: "#666666" TextColor: "#000000"
Placeholder Images
The placeholder image url can be overriden through the placeholder_image_url
config.
BenManu\SimpleStyleguide\SimpleStyleguideController: placeholder_image_url: "/simple-styleguide/images/placeholder.png"