Repository files navigation

This is a PHP implementation ofKnyle Style Sheets (KSS). KSS attempts to provide a methodology for writing maintainable, documented CSS within a team. Specifically, KSS is a documentation specification and styleguide format. It isnot a preprocessor, CSS framework, naming convention, or specificity guideline.

• The Spec (What KSS is)
• Example living styleguide

The methodology and ideas behind Knyle Style Sheets are contained inSPEC.md of the originruby version of KSS. At its core, KSS is a documenting syntax for CSS.

/*A button suitable for giving stars to someone.Markup: <a>Button</a>:hover              - Subtle hover highlight..stars--given       - A highlight indicating you've already given a star..stars--given:hover - Subtle hover highlight on top of stars-given styling..stars--disabled    - Dims the button to indicate it cannot be used.Styleguide Buttons - Star Button*/a.button.star {  ...}a.button.star:hover {  ...}a.button.stars--given {  ...}a.button.stars--given:hover {  ...}a.button.stars--disabled {  ...}

This repository includes a php library suitable for parsing SASS, SCSS, and CSS documented with KSS guidelines. To use the library, include it in your project as a composer dependency (see below). Then, create a parser and explore your KSS.

<?phprequire_once('../vendors/autoload.php');$styleguide =new \Kss\Parser('public/stylesheets');$section =$styleguide->getSection('Buttons - Star Button');// Returns a \Kss\Section objectecho$section->getTitle();// Echoes "Star Button"echo$section->getDescription();// echoes "A button suitable for giving stars to someone."echo$section->getMarkup();// echoes "<a>Button</a>"$modifier =current($section->getModifiers());// Returns a \Kss\Modifier objectecho$modifier->getName();// echoes ':hover'echo$modifier->getClassName();// echoes 'psuedo-class-hover'echo$modifier->getDescription();// echoes 'Subtle hover highlight'echo$modifier->getExampleHtml();// echoes <a>Button</a> for the .stars-given modifier

The documenting syntax and php library are intended to generate styleguides automatically. To do this, you'll need to leverage a small javascript library that generates class styles for pseudo-class styles (:hover,:disabled, etc).

• kss.coffee
• kss.js (compiled js)

For an example of how to generate a styleguide, check out theexample php pages.

The PHP version of KSS has dependencies managed by Composer. If you did not install kss-php using composer, you must install these dependencies manually before using the library by running the following commands:

$ composer install

If you do not yet have Composer, download it following the instructions onhttp://getcomposer.org or run the following commands to install it globally on your system:

$ curl -s https://getcomposer.org/installer | php$ sudo mv composer.phar /usr/local/bin/composer

If your project usessymfony2, consider using the [KSS Bundle] (https://github.com/kss-php/KssBundle) as well. The KSS Bundle uses Twig templates to make the styleguide block easier to customize and include in your views.