Jekyll Styleguide v0.1 Beta

Example Styleguide

Skip to navigation

All Components

Nav--tabs

Tabcontent 1

Note how this component needs Javascript. It is added to the post by adding a `javascript` collection to the YAML. However: This tab-control is itself nested in the Styleguide Tabs. This breaks :(

At least you can see how it should have worked by clicking the Styleguide tabs (e.g. HTML) above ;)

Tabcontent 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, eligendi, quia deserunt laudantium beatae corporis. Illo, expedita, libero, fuga obcaecati repellat quisquam repellendus laudantium possimus pariatur vero ad tenetur magni.

Tabcontent 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, eligendi, quia deserunt laudantium beatae corporis. Illo, expedita, libero, fuga obcaecati repellat quisquam repellendus laudantium possimus pariatur vero ad tenetur magni.

Nav--pagination

Nav--keywords

Nav--breadcrumbs

Meta

A .meta Paragraph with a hyperlink

Message

A .message with a hyperlink

A .message--info with a hyperlink

A .message--error with a hyperlink

A .message--valid with a hyperlink

A .message--warning with a hyperlink

Media-list

  • IMG

    A .media-list with media-items in each LI

  • IMG

    A .media-list with media-item (reversed img)

  • IMG

    Last .media-list item

Media

IMG

A .media item (this is the .media__body)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, atque, doloremque, placeat iure aperiam nulla provident dignissimos excepturi aut odio aliquid facilis dicta quis velit voluptate laudantium harum rerum minus.

IMG

Another .media item with media__img--reversed

List-stacked

  • .list-stacked item
  • Hyperlink in .list-stacked
  • .list-stacked item

Figure

figure__img
figure__caption__title figure__caption__credit

Btn

A simple hyperlink .btn A .is-disabled hyperlink .btn A simple hyperlink .btn--small A simple hyperlink .btn--large A simple hyperlink .btn.is-active

Boxed

A paragraph in a boxed div. With a link

A paragraph in a boxed--light div. With a link

A paragraph in a boxed--accent div. With a link