Permalink
Browse files

feat: steps styling + examples. Unordered list component is now avail…

…able in 'list'. Updated test page with new lists.
  • Loading branch information...
katrin-freihofner committed Jun 14, 2017
1 parent c58ae5a commit c3e218818304455aabe0a296aef3ee757c6517ef
@@ -72,74 +72,83 @@ type: test-page
<ul class="list">
<li>Ut enim ad minim veniam,</li>
<ul>
<li>Second level list item</li>
<ol>
<li>This is an ordered list item</li>
<li>This is an ordered list item</li>
<li>This is an ordered list item</li>
<li>This is an ordered list item</li>
<li>Second level list item
<ol>
<li>This is an ordered list item</li>
<li>This is an ordered list item</li>
<li>This is an ordered list item
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<li>This is an ordered list item</li>
</ol>
<li>Second level list item</li>
</li>
<li>This is an ordered list item</li>
</ol>
</li>
<li>Second level list item
<ul>
<li>Third level</li>
<li>Third level
<ol>
<li>This is an ordered list item</li>
<li>This is an ordered list item</li>
</ol>
</li>
</ul>
</li>
</ul>
<li>quis nostrud exercitation ullamco laboris</li>
<li>nisi ut aliquip ex ea commodo consequat.</li>
<ol>
<li>This is an ordered list item</li>
<li>This is an ordered list item</li>
<ul>
<li>Second level list item</li>
<li>Second level list item</li>
</ul>
<li>This is an ordered list item</li>
</ol>
<li>nisi ut aliquip ex ea commodo consequat.
<ol>
<li>This is an ordered list item</li>
<li>This is an ordered list item
<ul>
<li>Second level list item</li>
<li>Second level list item</li>
</ul>
</li>
<li>This is an ordered list item</li>
</ol>
</li>
</ul>
<h3>Second list test</h3>
<ol class="list">
<li>Ut enim ad minim veniam,</li>
<li>Ut enim ad minim veniam,
<ol>
<li>Second level list item</li>
<ul>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
</ul>
<li>Second level list item</li>
<li>Second level list item
<ul>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
<ul>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
</ul>
<li>This is an unordered list item</li>
</ul>
</li>
<li>Second level list item
<ul>
<li>This is an unordered list item</li>
<li>This is an unordered list item
<ul>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li>quis nostrud exercitation ullamco laboris</li>
<li>nisi ut aliquip ex ea commodo consequat.</li>
<ul>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
<ol>
<li>Second level list item</li>
<li>Second level list item</li>
</ol>
<li>This is an unordered list item</li>
</ul>
<li>nisi ut aliquip ex ea commodo consequat.
<ul>
<li>This is an unordered list item</li>
<li>This is an unordered list item
<ol>
<li>Second level list item</li>
<li>Second level list item</li>
</ol>
</li>
<li>This is an unordered list item</li>
</ul>
</li>
</ol>
</div>
<div class="island">
@@ -162,10 +171,13 @@ type: test-page
<button class="tab">Tab 4</button>
</div>
<h3>Text</h3>
<ol>
<li class="list"><p>Lorem ipsum dolor sit amet, <a href="http://www.dynatrace.com">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <a href="http://www.dynatrace.com">commodo consequat</a>.</p></li>
<li class="list"><div class="list">Lorem ipsum dolor sit amet, <a href="http://www.dynatrace.com">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <a href="http://www.dynatrace.com">commodo consequat</a>.</div></li>
</ol>
<p class="step">Lorem ipsum dolor sit amet, <a href="http://www.dynatrace.com">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <a href="http://www.dynatrace.com">commodo consequat</a>.</p>
<div class="step">
<p>Lorem ipsum dolor sit amet, <a href="http://www.dynatrace.com">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <a href="http://www.dynatrace.com">commodo consequat</a>.</p>
<div class="img-container">
<img src="https://dt-cdn.net/wp-content/uploads/2016/12/seasonsgreetings.png" alt="" width="520" height="293" />
</div>
</div>
</div>
<div class="island">
<h2>Entity name</h2>
@@ -1,26 +1,26 @@
---
layout: components.hbs
meta:
title: "Unordered list"
description: "An unordered list component for Dynatrace styled web entities with css and markup examples."
keywords: "list, unordered, structure, Dynatrace, groundhog, css component"
title: "Lists"
description: "A list component for Dynatrace styled web entities with css and markup examples."
keywords: "list, unordered, ordered, steps, structure, Dynatrace, groundhog, css component"
---
## Introduction
The Groundhog **unordered list** visually enhances the default `<ul>` list styling and nested versions. Keep in mind that the Groundhog unordered list component does not apply to default `<ul>` elements. The `.list` class has to be specifically set on the root `<ul>` element.
The Groundhog **list** visually enhances the default `<ul>` and `<ol>` list styling and nested versions. Keep in mind that the Groundhog list component does not apply to default `<ul>` and `<ol>` elements. The `.list` class has to be specifically set on the root element.
## Including the unordered list component
## Including the list component
1. To include a Groundhog unordered list add a `.list` class to the `<ul>` tag. That's it.
1. To include a Groundhog list add a `.list` class to the `<ul>` or `<ol>` tag. That's it.
```html
<ul class="list">
<li>first list item</li>
<li>second list item</li>
<li>third list item</li>
</ul>
```
2. Add a wrapping `<div>` with a [theme class][themeClass] to set the theme (optional):
2. Add a wrapping `<div>` with a [theme class][themeClass] to set the theme (optional, just for `<ul>`):
```html
<div class="theme--blue">
<ul class="list">
@@ -31,7 +31,7 @@ The Groundhog **unordered list** visually enhances the default `<ul>` list styli
</div>
```
## Nested unordered lists
## Nested lists
It is possible to nest unordered lists.
```html
@@ -45,6 +45,36 @@ It is possible to nest unordered lists.
</li>
</ul>
```
```html
<ol class="list">
<li>first list item</li>
<li>
second list item
<ol>
<li>first nested list item</li>
</ol>
</li>
</ol>
```
## Number `<div>` or `<p>` elements
It is possible to number blocks by adding the `.step` class.
```html
<div class="step">
<p>First block</p>
</div>
<div class="step">
<p>Second block</p>
</div>
```
## Available classes for lists
| class name | effect |
|------------|--------|
| `.list` | Base class for unordered and ordered lists |
| `.step` | Class for numbering blocks |
## Available themes for unordered lists
@@ -59,6 +89,7 @@ The default theme for the unordered list is `turquoise`, other available themes
[themeClass]: #available-themes-for-unordered-lists
## Additional notes
To reset list styles use the following snippet:
@@ -119,9 +119,15 @@ ol.list ol ul ul {
.step {
display: block;
position: relative;
padding-left: 1.5rem;
counter-increment: b;
margin-top: 0.75rem;
}
.step + .step {
margin-top: 1.25rem;
}
.step:before {
@@ -3,3 +3,9 @@
<div class="step">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
</div>
<p class="step">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
</p>
<p class="step">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
</p>
View
@@ -12,7 +12,7 @@
/** Components **/
@import "icons/icons";
@import "pagination/pagination";
@import "unordered-list/unordered-list";
@import "list/list";
@import "navbar/navbar";
@import "header/header";
@import "footer/footer";

0 comments on commit c3e2188

Please sign in to comment.