@hagenburger hagenburger released this Apr 9, 2015 · 680 commits to master since this release

Assets 2

What’s new in v2.0.0.alpha.4?

The fourth alpha has various improvements:

  • Compass and Compass extensions should work well
  • You can require any Ruby file (e.g. for a custom extension) or Ruby Gem by @require my-file
  • The yellow code markers (set by ***...***) work way better than before
  • @scss has been renamed to @css
  • The HTML title can be set by @title My beautiful Style Guide

If you have been using LSG2 < 2.0.0.alpha.4, please upgrade:

@import my-styles.scss


@css my-styles.scss

Because @import should only import files that output HTML (*.lsg, *.erb, *.haml, …), @css is responsible to handle all CSS related output from now on. So also upgrade (it will still be parsed by SCSS):

@scss {
  color: red;


@css {
  color: red;


This is an alpha version:

  • Not all tests are green
  • Things might change and be incompatible with following alpha or pre releases.

As the documentation is not done yet, most of the features in the following list will link to the test cases.

The planned features for v2 can also be found in this dummy project—including the v1 structure for comparison:

Feedback is welcome! Please follow @LSGorg for updates. Tweet about it using #LSG2!

Working features:

  • It works well in Rails 4/Tilt
  • New filter syntax everywhere (as it used to be within examples: Now everywhere in the file and the root document)
  • Importing (@import coding-style.lsg) of other files (LivingStyleGuide documents, HTML, Haml, …)
  • Imported files can be rendered with local data defined as JSON
  • Importing supports globbing of files
  • Having multiple LivingStyleGuide documents by sharing the configuration and loading it via @import config.lsg) (requested by @ronaldlokers and others in #57)
  • All imported files and all code examples will be grouped in a <section> with unique ID (as ID the current file name will be used if available). This helps scoping CSS and allows linking.
  • No need to import/parse/render the whole Sass project (only color variables may be needed) (requested by @indieveed in #97)
  • Sprockets dependencies (except imports within Sass)
  • Colors do support Sass functions(), #hex, and colorconstants besides $variables (requested by @scottdavis in hagenburger/livingstyleguide-concept#1)
  • SCSS code can be added everywhere when needed (within examples, it will be automatically scoped to this example)
  • JavaScript/CoffeeScript filters
  • Command line interface
  • Highlights within code (*** ... ***)
  • Handle the root directory of a project and allow relative paths
  • Asset URLs and helpers
  • Cache invalidation for Sprockets when Sass files change
  • HTML title
  • Requiring of Ruby files or Gems

Features of v1 which have not completely been upgraded:

  • Automatically import Markdown/LSG files by Sass imports
  • Colors/style configuration
  • Parsing color variables out of a Sass file
  • Header/footer HTML
  • JavaScript imports

Features that should be part of v2 but are not done yet:

  • Head HTML
  • Sass syntax support within documents (linking *.sass files work as expected)
  • Extend command line interface to accept directories (= render all *.lsg within that directory)
  • Convert v1 YAML files into v2 LSG files via command line