LivingStyleGuide v2.0.0 default style

This is a test page for the default style of LivingStyleGuide v2.0.0. No customization was applied.

See the other examples:

Color swatches

Now they have a visual feedback when clicking to copy. Colors can be used from hex values, CSS color constants, Sass variables, and Sass functions.

  • $my-color
  • test()

Font examples

Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & / ( ) € $ £ ¥ ¢ = @ ; : , .

bold 20px georgia, times new roman, helvetica neue, helvetica, sans-serif

Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & / ( ) € $ £ ¥ ¢ = @ ; : , .

bold italic 20px georgia, times new roman, helvetica neue, helvetica, sans-serif

Text

All text in LSG files is written with Markdown.


Documentation of front-end compontents

The following examples will render the HTML using your browser’s default style. Usually you would link your CSS file.

By using HTML

<button class="button" type="button">Button</button>

By using Haml

%button.button(type="button") Button

By using code markers you can easily highlight the difference to the previous example:

%button.button(type="button" disabled) Button

Code markers also work when used in anywhere: It does not break the syntax highligher, but might not make sense:

%button.button(type="button" disabled) Button

Full-width example

For full-width examples, just add @full-width on top of your HTML source. It’s useful for all layout elements. In this case one of the few HTML elements which have a visible browser style is used:

Legend
<form action>
<fieldset>
<legend>Legend</legend>
<label for="my-field">My field:</label>
<input type="text" id="my-field">
</fieldset>
</form>

Data

Homer
Marge
Bart
Lisa
Maggie
%div
%input{ type: "radio", checked: selected, name: "data-example" }
= name

JavaScript

Just open your console. This will be executed and displayed.

var lang = "JavaScript";
console.log("Just wrote some " + lang + " code.");

It also works with Coffee-Script:

lang = "Coffee-Script"
console.log "Just wrote some #{lang} code."