cards, buttons

_config.yml

@@ -42,7 +42,7 @@ jekyll_tidy:
 
 toc:
   min_level: 2
-  max_level: 2
+  max_level: 3
   list_class: list-unstyled
 
 collections:

pages/_docs/buttons.md

@@ -4,6 +4,7 @@ icon: fe fe-plus-square
 description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
 bootstrap-link: components/buttons/
 done: true
+toc: true
 ---
 
 ### Button tag
@@ -263,7 +264,7 @@ You can now create a list of buttons with the `.btn-list` container.
   <a href="#" class="btn btn-danger">Cancel</a>
 </div>
 {% endcapture %}
-{% include example.html code=code centered=true %}
+{% include example.html code=code %}
 
 If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.
 

pages/_docs/cards.md

@@ -4,33 +4,63 @@ menu: docs.cards
 description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. 
 bootstrap-link: components/card/
 done: true
+toc: true
 ---
 
 The `.card` element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
 
-### Default card
+## Default card
+
+To create a new card you have to use the `.card` and `.card-body` classes. You can put any content inside. 
 
 {% capture code %}
 {% include cards/card.html body="This is some text within a card body." %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
+
+### Card padding
+
+You can change the padding of a newly created card. You can do this with the `.card-sm`, `.card-md` and `.card-lg` classes. 
+
+Cards with the `.card-sm` class are very well suited for small items such as snippets, etc., while `.card-lg` can be used for large blocks of text. On small devices, padding will automatically be reduced to fit on the screen.
+
+{% capture code %}
+{% include cards/card.html class="card-sm" body="This is some text within a card body." %}
+{% include cards/card.html body="This is some text within a card body." %}
+{% include cards/card.html class="card-md" body="This is some text within a card body." %}
+{% include cards/card.html class="card-lg" body="This is some text within a card body." %}
+{% endcapture %}
+{% include example.html code=code columns=2 %}
 
-### Card with title and image
+## Card with title
+
+To add a title to a card you should add a class `.card-title` inside `.card-body`.
+
+You can also place the title inside the `.card-header` element - then the title will be separated from the content by a horizontal line.
+
+{% capture code %}
+{% include cards/card.html title="Card title" body="This is some text within a card body." %}
+{% include cards/card.html header-title="Card title" body="This is some text within a card body." %}
+{% endcapture %}
+{% include example.html code=code columns=1 %}
+
+## Card with title and image
 
 {% capture code %}
 {% include cards/card.html img-top=true title="Card with title and image" %}
 {% endcapture %}
-{% include example.html code=code %}
-### Blog post card
+{% include example.html code=code columns=1 %}
+
+## Blog post card
 
 The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
 
 {% capture code %}
 {% include cards/blog-single.html type="image" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
 
-### Row deck
+## Row deck
 
 If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height.
 
@@ -55,7 +85,7 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
 {% endcapture %}
 {% include example.html code=code %}
 
-### Post card with aside image
+## Post card with aside image
 
 You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:
 
@@ -64,7 +94,7 @@ You can also add the image on the left side of the card. All you need do to is:
 {% endcapture %}
 {% include example.html code=code %}
 
-### Color variations
+## Color variations
 
 {% capture code %}
 <div class="row row-deck">
@@ -78,7 +108,7 @@ You can also add the image on the left side of the card. All you need do to is:
 {% endcapture %}
 {% include example.html code=code %}
 
-### Stacked card
+## Stacked card
 
 {% capture code %}
 {% include cards/card.html class="card-stacked" title="Stacked card" %}

pages/_includes/example.html

-<div class="example{% if include.centered %} example-centered{% endif %}">
+<div class="example no_toc_section{% if include.centered %} example-centered{% endif %}{% if include.columns %} example-bg{% endif %}">
 	<div class="example-content">
 		{% if include.wrapper %}<div class="{{ include.wrapper }}">{% endif %}
+		{% if include.columns %}<div class="example-column example-column-{{ include.columns }}">{% endif %}
 
 		{{ code }}
 
+		{% if include.columns %}</div>{% endif %}
 		{% if include.wrapper %}</div>{% endif %}
 	</div>
 </div>

pages/_layouts/docs.html

@@ -8,9 +8,19 @@ page-header: Documentation
 {% assign current-url = page.url | replace_regex: "^/", "" %}
 
 <div class="row justify-content-center">
-	<div class="col-lg-3 order-lg-1 mb-4">
-		{% include ui/button.html href=site.github_url text="Browse source code" icon="brand/github" icon-color="github" external=true block=true class="mb-4" %}
+	<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
 
+
+		<div class="sticky-top pt-4">
+			<h5 class="subheader">On this page</h5>
+			{{ content | toc_only }}
+
+			{% include ui/button.html href=site.github_url text="Browse source code" icon="brand/github" icon-color="github" external=true block=true class="mb-4" %}
+		</div>
+
+
+
+		{% comment %}
 		<div class="list-group list-group-transparent mb-0">
 			{% for doc in site.data.menu.docs.children %}
 			{% assign key = doc[0] %}
@@ -22,32 +32,30 @@ page-header: Documentation
 				{% endif %}
 
 				{{ doc[1].title }}
-
-				{% if doc[1].badge %}
-					{% assign badge = doc[1].badge %}
-					{% include ui/badge.html text=badge color="green" class="ml-auto" %}
-				{% endif %}
 			</a>
 			{% endfor %}
 		</div>
+		{% endcomment %}
 	</div>
 	<div class="col-lg-9">
 		<div class="card">
 			<div class="card-body p-md-6 p-xl-7">
 
 				<div class="markdown">
-					{% if page.bootstrap-link %}
-					<p class="mb-4 float-right">
-						<a href="https://getbootstrap.com/docs/4.4/{{ page.bootstrap-link }}" target="_blank">
-							{% include ui/icon.html icon="external-link" color="blue" class="pr-1" %}
-							Bootstrap documentation
-						</a>
-					</p>
-					{% endif %}
+					<div class="d-flex">
+						<h2 class="h1 mt-0 mb-3">{{ page.title }}
+							{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}
+						</h2>
 
-					<h2 class="h1 mt-0 mb-3">{{ page.title }}
-						{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}
-					</h2>
+						{% if page.bootstrap-link %}
+						<p class="ml-auto">
+							<a href="https://getbootstrap.com/docs/4.4/{{ page.bootstrap-link }}" target="_blank">
+								{% include ui/icon.html icon="external-link" color="blue" class="pr-1" %}
+								Bootstrap documentation
+							</a>
+						</p>
+						{% endif %}
+					</div>
 
 					{% if page.plugin %}
 					<div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code>
@@ -59,10 +67,6 @@ page-header: Documentation
 					<p>{{ page.description }}</p>
 					{% endif %}
 
-					{% if page.toc %}
-					{{ content | toc_only }}
-					{% endif %}
-
 					{{ content | toc_generate }}
 				</div>
 			</div>