From 0cd61a8c7a7adedcf20eac8b8bcf8483d410ee6e Mon Sep 17 00:00:00 2001 From: codecalm Date: Thu, 13 Feb 2020 23:07:17 +0100 Subject: [PATCH] cards, buttons --- _config.yml | 2 +- pages/_docs/buttons.md | 3 ++- pages/_docs/cards.md | 50 ++++++++++++++++++++++++++++-------- pages/_includes/example.html | 4 ++- pages/_layouts/docs.html | 48 ++++++++++++++++++---------------- 5 files changed, 72 insertions(+), 35 deletions(-) diff --git a/_config.yml b/_config.yml index b8c3669a..c4d027c1 100644 --- a/_config.yml +++ b/_config.yml @@ -42,7 +42,7 @@ jekyll_tidy: toc: min_level: 2 - max_level: 2 + max_level: 3 list_class: list-unstyled collections: diff --git a/pages/_docs/buttons.md b/pages/_docs/buttons.md index 28abb384..04b169ae 100644 --- a/pages/_docs/buttons.md +++ b/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. Cancel {% 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. diff --git a/pages/_docs/cards.md b/pages/_docs/cards.md index 72829a67..e83872b8 100644 --- a/pages/_docs/cards.md +++ b/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 %}
@@ -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" %} diff --git a/pages/_includes/example.html b/pages/_includes/example.html index f296bba4..9eb53fc8 100644 --- a/pages/_includes/example.html +++ b/pages/_includes/example.html @@ -1,9 +1,11 @@ -
+
{% if include.wrapper %}
{% endif %} + {% if include.columns %}
{% endif %} {{ code }} + {% if include.columns %}
{% endif %} {% if include.wrapper %}
{% endif %}
diff --git a/pages/_layouts/docs.html b/pages/_layouts/docs.html index 614651ce..41748686 100644 --- a/pages/_layouts/docs.html +++ b/pages/_layouts/docs.html @@ -8,9 +8,19 @@ page-header: Documentation {% assign current-url = page.url | replace_regex: "^/", "" %}
-
- {% 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" %} +
+ +
+
On this page
+ {{ 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" %} +
+ + + + {% comment %}
{% 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 %} {% endfor %}
+ {% endcomment %}
- {% if page.bootstrap-link %} -

- - {% include ui/icon.html icon="external-link" color="blue" class="pr-1" %} - Bootstrap documentation - -

- {% endif %} +
+

{{ page.title }} + {% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %} +

-

{{ page.title }} - {% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %} -

+ {% if page.bootstrap-link %} +

+ + {% include ui/icon.html icon="external-link" color="blue" class="pr-1" %} + Bootstrap documentation + +

+ {% endif %} +
{% if page.plugin %}
This module is available in tabler-{{ page.plugin }} @@ -59,10 +67,6 @@ page-header: Documentation

{{ page.description }}

{% endif %} - {% if page.toc %} - {{ content | toc_only }} - {% endif %} - {{ content | toc_generate }}
-- GitLab