kneath / kss

A methodology for documenting CSS and generating styleguides.
warpspire.com/kss
MIT License
4.04k stars 275 forks source link

Add some kind of translation support #130

Open luntta opened 6 years ago

luntta commented 6 years ago

Would be great to able to translate the styleguide to multiple languages using only one source file + maybe multiple translation files. Would make working in an international environment a bit more hassle free.

luntta commented 6 years ago

An example of how the markup in the CSS source could look like (from cehfisher/a11y-style-guide)

// Audio
//
// <ul>
//  <li>{{li1}}</li>
//  <li>{{li2}}</li>
//  <li>{{li3}}</li>
//  <li>{{li4}}</li>
// </ul>
//
// <blockquote>{{blockquote}}</blockquote>
//
//
//
// Markup: audio.twig
// Locales: en_US.json, fi_FI.json
//
// Style guide: Media.audio

Example of a translation file:


// en_US.json

en_US: {
  "li1": "Build your media with accessibility in mind! It is much easier to work accessibility into the beginning than trying to tack it on later. This is true of all components, but especially for media components.",
  "li2": "Make sure your player is accessible and includes control elements to pause, stop, and play your media.",
  "li3": "Do not auto-play your media. This can cause confusion as well as annoyance.",
  "li4": "Make sure your media has alternative methods to get to the content. For example, add transcripts of your audio files.",
  "blockquote": "There are a ton of WCAG Guidelines for media on websites for a reason...there are a lot of factors to consider. Don't let that scare you though, there are also some easy wins. Just including alternatives to the media you present (ex. transcript for a video) is half the battle."
}