Styleguide

A work in progress

Heading 2

Heading 3

Heading 5

Heading 5
Heading 6

@include impress
@include emboss (color is not defined)
@include emboss_neg (color is not defined)
@include raised
A element
B element
Strong element
Sub Sub element
Sup Sup element
U element
I element
This is a blockquote

This is a blockquote

Definition List

Description
Term - This is what's being defined
Description
Term - This is what's being defined
Fun
300
OK
30

Paragraph Standard

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consectetur lectus sit amet justo commodo fringilla. Praesent velit felis, varius nec lacinia nec, semper at velit. Mauris lectus nunc, sodales ac vehicula sit amet, rhoncus ac augue. Sed iaculis neque dui, non tincidunt lorem. Aliquam id imperdiet tellus. Cum sociis natoque penatibus et magnis dis parturient montes.

Nascetur ridiculus mus. Donec quis libero neque, euismod pellentesque urna. Integer egestas, dui sit amet ultricies euismod, dolor velit vestibulum lectus, in tincidunt diam nibh vitae felis. Sed tempor dui quis nisl aliquet luctus. Praesent semper hendrerit sem, sit amet luctus massa lacinia eget. Mauris diam neque, ultricies at tristique at, sagittis ut lorem. Donec justo libero, cursus in sollicitudin nec, vulputate sed felis. Vivamus viverra rutrum sem, vitae aliquet nisi pellentesque a. Facilisis nec lectus.

Paragraph & lists in a div.document

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consectetur lectus sit amet justo commodo fringilla. Praesent velit felis, varius nec lacinia nec, semper at velit. Mauris lectus nunc, sodales ac vehicula sit amet, rhoncus ac augue. Sed iaculis neque dui, non tincidunt lorem. Aliquam id imperdiet tellus. Cum sociis natoque penatibus et magnis dis parturient montes.

Nascetur ridiculus mus. Donec quis libero neque, euismod pellentesque urna. Integer egestas, dui sit amet ultricies euismod, dolor velit vestibulum lectus, in tincidunt diam nibh vitae felis. Sed tempor dui quis nisl aliquet luctus. Praesent semper hendrerit sem, sit amet luctus massa lacinia eget. Mauris diam neque, ultricies at tristique at, sagittis ut lorem. Donec justo libero, cursus in sollicitudin nec, vulputate sed felis. Vivamus viverra rutrum sem, vitae aliquet nisi pellentesque a. Facilisis nec lectus.

Nascetur ridiculus mus. Donec quis libero neque, euismod pellentesque urna. Integer egestas, dui sit amet ultricies euismod, dolor velit vestibulum lectus, in tincidunt diam nibh vitae felis. Sed tempor dui quis nisl aliquet luctus. Praesent semper hendrerit sem, sit amet luctus massa lacinia eget. Mauris diam neque, ultricies at tristique at, sagittis ut lorem. Donec justo libero, cursus in sollicitudin nec, vulputate sed felis. Vivamus viverra rutrum sem, vitae aliquet nisi pellentesque a. Facilisis nec lectus.

  • Good
  • Bad
  • Ugly
    • Uglier
    • Ugliest
  1. Good
  2. Bad
  3. Ugly
    1. Uglier
    2. Uglier
      1. Ugliest
      2. Ugliest

Nascetur ridiculus mus. Donec quis libero neque, euismod pellentesque urna. Integer egestas, dui sit amet ultricies euismod, dolor velit vestibulum lectus, in tincidunt diam nibh vitae felis. Sed tempor dui quis nisl aliquet luctus. Praesent semper hendrerit sem, sit amet luctus massa lacinia eget. Mauris diam neque, ultricies at tristique at, sagittis ut lorem. Donec justo libero, cursus in sollicitudin nec, vulputate sed felis. Vivamus viverr a rutrum sem, vitae aliquet nisi pellentesque a. Facilisis nec lectus.Nascetur ridiculus mus. Donec quis libero neque, euismod pellentesque urna. Integer egestas, dui sit amet ultricies euismod, dolor velit vestibulum lectus, in tincidunt diam nibh vitae felis. Sed tempor dui quis nisl aliquet luctus. Praesent semper hendrerit sem, sit amet luctus massa lacinia eget. Mauris diam neque, ultricies at tristique at, sagittis ut lorem. Donec justo libero, cursus in sollicitudin nec, vulputate sed felis.

Forms
Checkbox

Buttons

Inset Onset Author primary ancillary default disabled
Brush

@include reveal

@include pshop

@include impress_border

@include emboss_border

Table - Simple

Items Goods Supplies
Thing Thing Thing
Thing Thing Thing
Thing Thing Thing
Thing Thing Thing
Thing Thing Thing
Thing Thing Thing

Toggle

  • You need to adjust the scss like so:
    .toggle_widget_btns{ @include register_toggle_btns(4); }

    Takes a variable number of slides, just add the same number of buttons and slides

    Corresponds to the first button
  • Corresponds to the second button
  • Corresponds to the third button
  • Corresponds to the fourth button

Select - Not working yet

Cursor

grab/pan cursor

Icons

a class="icon12 edit" a class="icon16 edit" a class="icon12 edit inverse"
  • li class="icon12 edit current"
  • span class="icon12 edit"
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8