├── .gitattributes ├── dist ├── js │ └── ZeroClipboard.swf └── css │ └── screen.css ├── _config.php ├── _config ├── routes.yml └── config.yml ├── javascript ├── components │ ├── affix.js │ ├── scrollspy.js │ ├── zeroclipboard.js │ └── site.js ├── app.js └── lib │ ├── affix.js │ └── scrollspy.js ├── scss ├── mixins │ ├── _center-block.scss │ ├── _opacity.scss │ ├── _size.scss │ ├── _text-overflow.scss │ ├── _tab-focus.scss │ ├── _labels.scss │ ├── _resize.scss │ ├── _text-emphasis.scss │ ├── _progress-bar.scss │ ├── _background-variant.scss │ ├── _reset-filter.scss │ ├── _nav-divider.scss │ ├── _alerts.scss │ ├── _nav-vertical-align.scss │ ├── _pagination.scss │ ├── _border-radius.scss │ ├── _responsive-visibility.scss │ ├── _panels.scss │ ├── _hide-text.scss │ ├── _clearfix.scss │ ├── _list-group.scss │ ├── _table-row.scss │ ├── _buttons.scss │ ├── _image.scss │ ├── _grid-framework.scss │ ├── _forms.scss │ ├── _grid.scss │ ├── _gradients.scss │ └── _vendor-prefixes.scss ├── components │ ├── _nav.scss │ ├── _callout.scss │ ├── _code.scss │ ├── _subnav.scss │ ├── _navbar.scss │ ├── _grid.scss │ └── _type.scss ├── screen.scss ├── utilities │ ├── _utilities.scss │ ├── _mixins.scss │ ├── _print.scss │ ├── _responsive-utilities.scss │ └── _normalize.scss └── _styleguide.scss ├── code-of-conduct.md ├── templates └── BenManu │ └── StyleGuide │ ├── Layout │ ├── StyleGuide.ss │ └── StyleGuideController.ss │ ├── Includes │ ├── SGSecondaryNavigation.ss │ ├── SGSubNavigation.ss │ ├── SGColorPalette.ss │ └── SGNavigation.ss │ ├── StyleGuideController.ss │ └── SGSection.ss ├── code ├── services │ ├── StyleGuide.php │ ├── KSSService.php │ └── PageService.php ├── dev │ ├── StyleGuideFixtureFactory.php │ └── StyleGuideBlueprint.php ├── model │ ├── KSSParameter.php │ ├── Section.php │ ├── KSSModifier.php │ └── KSSSection.php ├── parsers │ ├── Parser.php │ ├── YamlParser.php │ ├── KSSParser.php │ └── CommentParser.php └── controllers │ └── StyleGuideController.php ├── package.json ├── .travis.yml ├── .editorconfig ├── composer.json ├── tests ├── services │ └── KSSServiceTest.php └── fixtures │ └── css │ └── StyleGuideTestFixture.css ├── LICENSE ├── .scrutinizer.yml ├── gulpfile.js └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | /.gitignore export-ignore 2 | -------------------------------------------------------------------------------- /dist/js/ZeroClipboard.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/benmanu/silverstripe-styleguide/HEAD/dist/js/ZeroClipboard.swf -------------------------------------------------------------------------------- /_config.php: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | <% loop $Sections %> 5 | $forTemplate 6 | <% end_loop %> 7 |
8 |
9 | <% include BenManu/StyleGuide/SGSubNavigation %> 10 |
11 |
12 | <% end_if %> 13 | -------------------------------------------------------------------------------- /templates/BenManu/StyleGuide/Layout/StyleGuideController.ss: -------------------------------------------------------------------------------- 1 | <% if $Sections %> 2 |
3 |
4 | <% loop $Sections %> 5 | $forTemplate 6 | <% end_loop %> 7 |
8 |
9 | <% include BenManu/StyleGuide/SGSubNavigation %> 10 |
11 |
12 | <% end_if %> 13 | -------------------------------------------------------------------------------- /code/services/StyleGuide.php: -------------------------------------------------------------------------------- 1 | li { 8 | position: relative; 9 | display: block; 10 | 11 | > a { 12 | position: relative; 13 | display: block; 14 | padding: 10px 15px; 15 | &:hover, 16 | &:focus { 17 | text-decoration: none; 18 | background-color: $nav-link-hover-bg; 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: php 2 | php: 3 | - 5.3 4 | - 5.4 5 | - 5.5 6 | 7 | env: 8 | matrix: 9 | - DB=MYSQL CORE_RELEASE=3.1 10 | 11 | before_script: 12 | - phpenv rehash 13 | - composer self-update 14 | - git clone git://github.com/silverstripe-labs/silverstripe-travis-support.git ~/travis-support 15 | - php ~/travis-support/travis_setup.php --source `pwd` --target ~/builds/ss 16 | - cd ~/builds/ss 17 | 18 | script: 19 | - vendor/bin/phpunit styleguide/tests/ -------------------------------------------------------------------------------- /templates/BenManu/StyleGuide/Includes/SGSecondaryNavigation.ss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # For more information about the properties used in this file, 2 | # please see the EditorConfig documentation: 3 | # http://editorconfig.org 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 4 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [{*.yml,package.json}] 14 | indent_size = 2 15 | 16 | # The indent size used in the package.json file cannot be changed: 17 | # https://github.com/npm/npm/pull/3180#issuecomment-16336516 18 | -------------------------------------------------------------------------------- /scss/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) { 4 | > li { 5 | > a, 6 | > span { 7 | padding: $padding-vertical $padding-horizontal; 8 | font-size: $font-size; 9 | } 10 | &:first-child { 11 | > a, 12 | > span { 13 | @include border-left-radius($border-radius); 14 | } 15 | } 16 | &:last-child { 17 | > a, 18 | > span { 19 | @include border-right-radius($border-radius); 20 | } 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // Single side border-radius 2 | 3 | @mixin border-top-radius($radius) { 4 | border-top-right-radius: $radius; 5 | border-top-left-radius: $radius; 6 | } 7 | @mixin border-right-radius($radius) { 8 | border-bottom-right-radius: $radius; 9 | border-top-right-radius: $radius; 10 | } 11 | @mixin border-bottom-radius($radius) { 12 | border-bottom-right-radius: $radius; 13 | border-bottom-left-radius: $radius; 14 | } 15 | @mixin border-left-radius($radius) { 16 | border-bottom-left-radius: $radius; 17 | border-top-left-radius: $radius; 18 | } 19 | -------------------------------------------------------------------------------- /scss/mixins/_responsive-visibility.scss: -------------------------------------------------------------------------------- 1 | // Responsive utilities 2 | 3 | // 4 | // More easily include all the states for responsive-utilities.less. 5 | // [converter] $parent hack 6 | @mixin responsive-visibility($parent) { 7 | #{$parent} { 8 | display: block !important; 9 | } 10 | table#{$parent} { display: table; } 11 | tr#{$parent} { display: table-row !important; } 12 | th#{$parent}, 13 | td#{$parent} { display: table-cell !important; } 14 | } 15 | 16 | // [converter] $parent hack 17 | @mixin responsive-invisibility($parent) { 18 | #{$parent} { 19 | display: none !important; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /scss/screen.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | 3 | @import "utilities/mixins"; 4 | @import "utilities/normalize"; 5 | @import "utilities/print"; 6 | @import "utilities/utilities"; 7 | @import "utilities/responsive-utilities"; 8 | 9 | @import "styleguide"; 10 | 11 | /* 12 | #Grid 13 | 14 | Styleguide 1.0 15 | */ 16 | @import "components/grid"; 17 | 18 | /* 19 | #Components 20 | 21 | Styleguide 2.0 22 | */ 23 | @import "components/nav"; 24 | @import "components/navbar"; 25 | @import "components/subnav"; 26 | @import "components/callout"; 27 | 28 | /* 29 | #Type 30 | 31 | Styleguide 3.0 32 | */ 33 | @import "components/type"; 34 | @import "components/code"; -------------------------------------------------------------------------------- /scss/mixins/_panels.scss: -------------------------------------------------------------------------------- 1 | // Panels 2 | 3 | @mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) { 4 | border-color: $border; 5 | 6 | & > .panel-heading { 7 | color: $heading-text-color; 8 | background-color: $heading-bg-color; 9 | border-color: $heading-border; 10 | 11 | + .panel-collapse > .panel-body { 12 | border-top-color: $border; 13 | } 14 | .badge { 15 | color: $heading-bg-color; 16 | background-color: $heading-text-color; 17 | } 18 | } 19 | & > .panel-footer { 20 | + .panel-collapse > .panel-body { 21 | border-bottom-color: $border; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /scss/mixins/_hide-text.scss: -------------------------------------------------------------------------------- 1 | // CSS image replacement 2 | // 3 | // Heads up! v3 launched with with only `.hide-text()`, but per our pattern for 4 | // mixins being reused as classes with the same name, this doesn't hold up. As 5 | // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. 6 | // 7 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 8 | 9 | // Deprecated as of v3.0.1 (will be removed in v4) 10 | @mixin hide-text() { 11 | font: 0/0 a; 12 | color: transparent; 13 | text-shadow: none; 14 | background-color: transparent; 15 | border: 0; 16 | } 17 | 18 | // New mixin to use as of v3.0.1 19 | @mixin text-hide() { 20 | @include hide-text; 21 | } 22 | -------------------------------------------------------------------------------- /templates/BenManu/StyleGuide/Includes/SGSubNavigation.ss: -------------------------------------------------------------------------------- 1 | <% if SubNavigation %> 2 | 19 | <% end_if %> 20 | -------------------------------------------------------------------------------- /scss/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Clearfix 2 | // 3 | // For modern browsers 4 | // 1. The space content is one way to avoid an Opera bug when the 5 | // contenteditable attribute is included anywhere else in the document. 6 | // Otherwise it causes space to appear at the top and bottom of elements 7 | // that are clearfixed. 8 | // 2. The use of `table` rather than `block` is only necessary if using 9 | // `:before` to contain the top-margins of child elements. 10 | // 11 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/ 12 | 13 | @mixin clearfix() { 14 | &:before, 15 | &:after { 16 | content: " "; // 1 17 | display: table; // 2 18 | } 19 | &:after { 20 | clear: both; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /templates/BenManu/StyleGuide/Includes/SGColorPalette.ss: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

$Title

6 |

$Description

7 | <% if $Parameters %> 8 |
9 | <% loop $Parameters %> 10 |
11 |
12 |
13 |
14 |

$Name
$Description

15 |
16 |
17 | <% end_loop %> 18 |
19 | <% end_if %> 20 |
21 |
22 |
23 |
-------------------------------------------------------------------------------- /scss/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List Groups 2 | 3 | @mixin list-group-item-variant($state, $background, $color) { 4 | .list-group-item-#{$state} { 5 | color: $color; 6 | background-color: $background; 7 | 8 | // [converter] extracted a& to a.list-group-item-#{$state} 9 | } 10 | 11 | a.list-group-item-#{$state} { 12 | color: $color; 13 | 14 | .list-group-item-heading { 15 | color: inherit; 16 | } 17 | 18 | &:hover, 19 | &:focus { 20 | color: $color; 21 | background-color: darken($background, 5%); 22 | } 23 | &.active, 24 | &.active:hover, 25 | &.active:focus { 26 | color: #fff; 27 | background-color: $color; 28 | border-color: $color; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /templates/BenManu/StyleGuide/Includes/SGNavigation.ss: -------------------------------------------------------------------------------- 1 | <% if $Navigation %> 2 | 18 | <% loop $Navigation %> 19 | <% if $Active && $Children %> 20 | <% include BenManu/StyleGuide/SGSecondaryNavigation %> 21 | <% end_if %> 22 | <% end_loop %> 23 | <% end_if %> 24 | -------------------------------------------------------------------------------- /scss/mixins/_table-row.scss: -------------------------------------------------------------------------------- 1 | // Tables 2 | 3 | @mixin table-row-variant($state, $background) { 4 | // Exact selectors below required to override `.table-striped` and prevent 5 | // inheritance to nested tables. 6 | .table > thead > tr, 7 | .table > tbody > tr, 8 | .table > tfoot > tr { 9 | > td.#{$state}, 10 | > th.#{$state}, 11 | &.#{$state} > td, 12 | &.#{$state} > th { 13 | background-color: $background; 14 | } 15 | } 16 | 17 | // Hover states for `.table-hover` 18 | // Note: this is not available for cells or rows within `thead` or `tfoot`. 19 | .table-hover > tbody > tr { 20 | > td.#{$state}:hover, 21 | > th.#{$state}:hover, 22 | &.#{$state}:hover > td, 23 | &:hover > .#{$state}, 24 | &.#{$state}:hover > th { 25 | background-color: darken($background, 5%); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /templates/BenManu/StyleGuide/StyleGuideController.ss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | <% base_tag %> 10 | $SiteConfig.Title » Style Guide 11 | 12 | 13 | 14 | $MetaTags(false) 15 | 16 | 17 | 18 | <% include BenManu/StyleGuide/SGNavigation %> 19 |
20 | $Layout 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "benmanu/silverstripe-styleguide", 3 | "description": "Generates a styleguide for a SilverStripe theme", 4 | "type": "silverstripe-vendormodule", 5 | "homepage": "https://github.com/benmanu/silverstripe-styleguide", 6 | "keywords": ["silverstripe", "styleguide", "kss"], 7 | "support": { 8 | "issues": "https://github.com/benmanu/silverstripe-styleguide/issues" 9 | }, 10 | "authors": [ 11 | { 12 | "name": "benmanu", 13 | "email": "bmanu10@gmail.com" 14 | } 15 | ], 16 | "require": { 17 | "silverstripe/framework": "^4", 18 | "symfony/finder": "~2.8", 19 | "erusev/parsedown": "1.6.0" 20 | }, 21 | "require-dev": { 22 | "phpunit/PHPUnit": "~3.7@stable" 23 | }, 24 | "extra": { 25 | "installer-name": "styleguide", 26 | "expose": [ 27 | "dist" 28 | ] 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/utilities/_utilities.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Utility classes 3 | // -------------------------------------------------- 4 | 5 | 6 | // Floats 7 | // ------------------------- 8 | 9 | .clearfix { 10 | @include clearfix; 11 | } 12 | .center-block { 13 | @include center-block; 14 | } 15 | .pull-right { 16 | float: right !important; 17 | } 18 | .pull-left { 19 | float: left !important; 20 | } 21 | 22 | 23 | // Toggling content 24 | // ------------------------- 25 | 26 | // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 27 | .hide { 28 | display: none !important; 29 | } 30 | .show { 31 | display: block !important; 32 | } 33 | .invisible { 34 | visibility: hidden; 35 | } 36 | .text-hide { 37 | @include text-hide; 38 | } 39 | 40 | 41 | // Hide from screenreaders and browsers 42 | // 43 | // Credit: HTML5 Boilerplate 44 | 45 | .hidden { 46 | display: none !important; 47 | } 48 | 49 | 50 | // For Affix plugin 51 | // ------------------------- 52 | 53 | .affix { 54 | position: fixed; 55 | } 56 | -------------------------------------------------------------------------------- /scss/components/_callout.scss: -------------------------------------------------------------------------------- 1 | /* 2 | #Callout 3 | 4 | Markup: 5 |
6 |

Some callout text can go in here.

7 |
8 | 9 | .sg-callout--success - Use this for happy messages. 10 | .sg-callout--warning - Use this for warnings. 11 | .sg-callout--danger - Use this if you really need to catch users attention. 12 | 13 | $navbar-inverse-color - color 14 | $brand-success - color 15 | $brand-warning - color 16 | $brand-danger - color 17 | 18 | Styleguide 2.3 19 | */ 20 | .sg-callout { 21 | padding: 10px; 22 | margin: 10px 0; 23 | border: 1px solid $navbar-inverse-color; 24 | border-left-width: 5px; 25 | border-radius: 3px; 26 | background-color: #fff; 27 | 28 | &.sg-callout--success { 29 | border-left-color: $brand-success; 30 | } 31 | &.sg-callout--warning { 32 | border-left-color: $brand-warning; 33 | } 34 | &.sg-callout--danger { 35 | border-left-color: $brand-danger; 36 | } 37 | 38 | p { 39 | &:last-child { 40 | margin-bottom: 0px; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /scss/utilities/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------------------------------- 3 | 4 | // Utilities 5 | @import "mixins/hide-text"; 6 | @import "mixins/opacity"; 7 | @import "mixins/image"; 8 | @import "mixins/labels"; 9 | @import "mixins/reset-filter"; 10 | @import "mixins/resize"; 11 | @import "mixins/responsive-visibility"; 12 | @import "mixins/size"; 13 | @import "mixins/tab-focus"; 14 | @import "mixins/text-emphasis"; 15 | @import "mixins/text-overflow"; 16 | @import "mixins/vendor-prefixes"; 17 | 18 | // Components 19 | @import "mixins/alerts"; 20 | @import "mixins/buttons"; 21 | @import "mixins/panels"; 22 | @import "mixins/pagination"; 23 | @import "mixins/list-group"; 24 | @import "mixins/nav-divider"; 25 | @import "mixins/forms"; 26 | @import "mixins/progress-bar"; 27 | @import "mixins/table-row"; 28 | 29 | // Skins 30 | @import "mixins/background-variant"; 31 | @import "mixins/border-radius"; 32 | @import "mixins/gradients"; 33 | 34 | // Layout 35 | @import "mixins/clearfix"; 36 | @import "mixins/center-block"; 37 | @import "mixins/nav-vertical-align"; 38 | @import "mixins/grid-framework"; 39 | @import "mixins/grid"; 40 | -------------------------------------------------------------------------------- /tests/services/KSSServiceTest.php: -------------------------------------------------------------------------------- 1 | service = new KSSService(); 15 | $this->service->setURL(BASE_PATH . '/styleguide/tests/fixtures/css/'); 16 | } 17 | 18 | public function tearDown() { 19 | parent::tearDown(); 20 | } 21 | 22 | public function testGetNavigation() { 23 | $navigation = $this->service->getNavigation(); 24 | $this->assertEquals($navigation->count(), 2); 25 | } 26 | 27 | public function testGetSections() { 28 | $this->assertEquals($this->service->getSections()->count(), 4); 29 | } 30 | 31 | public function testGetSectionChildren() { 32 | $reference = '2.0'; 33 | $children = $this->service->getSectionChildren($reference); 34 | $this->assertEquals($children->count(), 1); 35 | 36 | foreach($children as $child) { 37 | $this->assertEquals(substr($child->getReference(), 0, 1), substr($reference, 0, 1)); 38 | } 39 | } 40 | 41 | } 42 | -------------------------------------------------------------------------------- /scss/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Button variants 2 | // 3 | // Easily pump out default styles, as well as :hover, :focus, :active, 4 | // and disabled options for all buttons 5 | 6 | @mixin button-variant($color, $background, $border) { 7 | color: $color; 8 | background-color: $background; 9 | border-color: $border; 10 | 11 | &:hover, 12 | &:focus, 13 | &.focus, 14 | &:active, 15 | &.active, 16 | .open > &.dropdown-toggle { 17 | color: $color; 18 | background-color: darken($background, 10%); 19 | border-color: darken($border, 12%); 20 | } 21 | &:active, 22 | &.active, 23 | .open > &.dropdown-toggle { 24 | background-image: none; 25 | } 26 | &.disabled, 27 | &[disabled], 28 | fieldset[disabled] & { 29 | &, 30 | &:hover, 31 | &:focus, 32 | &.focus, 33 | &:active, 34 | &.active { 35 | background-color: $background; 36 | border-color: $border; 37 | } 38 | } 39 | 40 | .badge { 41 | color: $background; 42 | background-color: $color; 43 | } 44 | } 45 | 46 | // Button sizes 47 | @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { 48 | padding: $padding-vertical $padding-horizontal; 49 | font-size: $font-size; 50 | line-height: $line-height; 51 | border-radius: $border-radius; 52 | } 53 | -------------------------------------------------------------------------------- /scss/mixins/_image.scss: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | 6 | // Responsive image 7 | // 8 | // Keep images from scaling beyond the width of their parents. 9 | @mixin img-responsive($display: block) { 10 | display: $display; 11 | max-width: 100%; // Part 1: Set a maximum relative to the parent 12 | height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching 13 | } 14 | 15 | 16 | // Retina image 17 | // 18 | // Short retina mixin for setting background-image and -size. Note that the 19 | // spelling of `min--moz-device-pixel-ratio` is intentional. 20 | @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { 21 | background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}")); 22 | 23 | @media 24 | only screen and (-webkit-min-device-pixel-ratio: 2), 25 | only screen and ( min--moz-device-pixel-ratio: 2), 26 | only screen and ( -o-min-device-pixel-ratio: 2/1), 27 | only screen and ( min-device-pixel-ratio: 2), 28 | only screen and ( min-resolution: 192dpi), 29 | only screen and ( min-resolution: 2dppx) { 30 | background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}")); 31 | background-size: $width-1x $height-1x; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /tests/fixtures/css/StyleGuideTestFixture.css: -------------------------------------------------------------------------------- 1 | /* 2 | #Components 3 | 4 | All the components! 5 | 6 | Styleguide 1.0 7 | */ 8 | /* 9 | #Buttons 10 | 11 | Use the button classes on an ,