Repository files navigation

Inspired byTomDoc, 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. At its core, KSS is a documenting syntax for CSS.

/*A button suitable for giving stars to someone.: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..disabled          - Dims the button to indicate it cannot be used.Styleguide 2.1.3.*/a.button.star{  ...}a.button.star.stars-given{  ...}a.button.star.disabled{  ...}

KSS can also support words as Styleguide section names

// Styleguide Forms.Checkboxes.// - or -// Styleguide Forms - Special Checkboxes.

This repository includes a ruby library suitable for parsing SASS, SCSS, and CSS documented with KSS guidelines. To use the library, include it in your project as a gem fromhttps://rubygems.org/gems/kss. Then, create a parser and explore your KSS.

styleguide=Kss::Parser.new("#{RACK_ROOT}public/stylesheets")styleguide.section('2.1.1')# => <Kss::Section>styleguide.section('2.1.1').description# => "A button suitable for giving stars to someone."styleguide.section('2.1.1').modifiers.first# => <Kss::Modifier>styleguide.section('2.1.1').modifiers.first.name# => ':hover'styleguide.section('2.1.1').modifiers.first.class_name# => 'pseudo-class-hover'styleguide.section('2.1.1').modifiers.first.description# => 'Subtle hover highlight'

You can also initialize theKss::Parser with a string CSS by usingKss::Parser.new(string)

buttons=<<-'EOS'  /*  Your standard form button.  :hover    - Highlights when hovering.  :disabled - Dims the button when disabled.  Styleguide 1.1  */  button {    padding: 5px 15px;    line-height: normal;    /* ... */  }  button:disabled {    opacity: 0.5;  }EOSstyleguide=Kss::Parser.new(buttons)styleguide.section('1.1')# => <Kss::Section>styleguide.section('1.1').description# => "Your standard form button."# ...

The library is also fully TomDoc'd, completing the circle of life.

The documenting syntax and ruby 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 sinatra application.

To hack on KSS, you'll need to install dependencies withbundle install. Run tests withrake.

To make your life easier, I suggestbundle install --binstubs and addingbin/ to your$PATH. If you don't understand this, just blindly addbundle exec in front of everything you'd normally do, likebundle exec rake.

I apologize on behalf of the Ruby community for this, it's embarrassing and disappointing that dependency management is still so clumsy.

The KSS specification has also been implemented inPython,Node.js,PHP and [Java] (https://github.com/revbingo/kss-java)