Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 06:24:38 +04:00
Code Issues Projects Releases Wiki Activity

Merge branch 'dev' into dev-badges

Browse Source
This commit is contained in:
Paweł Kuna
2020-02-16 20:51:43 +01:00
committed by GitHub
parent 66332cbb51 4289a763b3
commit 0bf0378c24
1414 changed files with 80979 additions and 130155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_components/input-colors.html
+1 -1
View File
@@ -3,4 +3,4 @@ title: Color input
columns: false
---
{% include parts/input-color.html %}
{% include parts/form/input-color.html %}
pages/_components/input-image.html
+1 -1
View File
@@ -3,4 +3,4 @@ title: Image input
columns: 2
---
{% include parts/input-image.html %}
{% include parts/form/input-image.html %}
pages/_data/charts.yml
+2
View File
@@ -2,6 +2,7 @@ mentions:
stacked: true
datetime: true
show-x: true
demo: true
series:
- name: Web
data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6]
@@ -149,6 +150,7 @@ development-activity:
legend-position: 'top'
sparkline: true
datetime: true
title: Development Activity
series:
- name: 'Purchases'
color: blue
pages/_data/colors.yml
+18 -19
View File
@@ -74,7 +74,6 @@ orange-600: '#cc7522'
orange-700: '#99581a'
orange-800: '#663a11'
orange-900: '#331d09'
yellow: '#fab005'
yellow-100: '#feefcd'
yellow-200: '#fddf9b'
@@ -86,6 +85,17 @@ yellow-700: '#966a03'
yellow-800: '#644602'
yellow-900: '#322301'
lime: '#94d82d'
lime-100: '#eaf7d5'
lime-200: '#d4efab'
lime-300: '#bfe881'
lime-400: '#a9e057'
lime-500: '#94d82d'
lime-600: '#76ad24'
lime-700: '#59821b'
lime-800: '#3b5612'
lime-900: '#1e2b09'
green: '#5eba00'
green-100: '#dff1cc'
green-200: '#bfe399'
@@ -97,17 +107,6 @@ green-700: '#387000'
green-800: '#264a00'
green-900: '#132500'
lime: '#7bd235'
lime-100: '#e5f6d7'
lime-200: '#caedae'
lime-300: '#b0e486'
lime-400: '#95db5d'
lime-500: '#7bd235'
lime-600: '#62a82a'
lime-700: '#4a7e20'
lime-800: '#315415'
lime-900: '#192a0b'
teal: '#2bcbba'
teal-100: '#d5f5f1'
teal-200: '#aaeae3'
@@ -130,16 +129,16 @@ cyan-700: '#0e616e'
cyan-800: '#09414a'
cyan-900: '#052025'
gray: '#cdd1d8'
gray: '#cbcfd6'
gray-100: '#f5f7fb'
gray-200: '#f1f3f8'
gray-300: '#e9ecf1'
gray-400: '#dee1e7'
gray-500: '#cdd1d8'
gray-600: '#aeb3bc'
gray-700: '#8b929e'
gray-800: '#5f6877'
gray-500: '#cbcfd6'
gray-600: '#a8aeb7'
gray-700: '#7a828f'
gray-800: '#545d6d'
gray-900: '#354052'
border-color: '#dee1e7'
text-muted: '#8b929e'
border-color: 'rgba(126, 133, 144, 0.24)'
text-muted: '#7e8590'
pages/_data/menu.yml
+55 -51
View File
@@ -1,21 +1,23 @@
home:
url: index.html
title: Dashboard
title: Home
icon: home
forms:
url: form-elements.html
title: Form elements
title: Forms
icon: check-square
badge: New
badge-color: green
base:
title: Base
icon: package
columns: 2
children:
empty:
title: Empty page
url: empty.html
blank:
title: Starter page
title: Blank page
url: blank.html
buttons:
url: buttons.html
@@ -53,49 +55,47 @@ base:
title: Music
url: music.html
error:
title: Error pages
icon: file-minus
children:
400:
url: 400.html
title: 400 page
401:
url: 401.html
title: 401 page
403:
url: 403.html
title: 403 page
404:
url: 404.html
title: 404 page
500:
url: 500.html
title: 500 page
503:
url: 503.html
title: 503 page
maintenance:
url: maintenance.html
title: Maintenance page
a:
title: A
icon: menu
children:
b:
title: B
authentication:
title: Authentication
children:
c:
title: C
url: tmp.html
sign-in:
title: Sign in
url: sign-in.html
sign-up:
title: Sign up
url: sign-up.html
forgot-password:
title: Forgot password
url: forgot-password.html
terms-of-service:
title: Terms of service
url: terms-of-service.html
layouts:
title: Layouts
icon: layout
url: layouts.html
badge: New
badge-color: green
error:
title: Error pages
icon: file-minus
children:
400:
url: 400.html
title: 400 page
401:
url: 401.html
title: 401 page
403:
url: 403.html
title: 403 page
404:
url: 404.html
title: 404 page
500:
url: 500.html
title: 500 page
503:
url: 503.html
title: 503 page
maintenance:
url: maintenance.html
title: Maintenance page
extra:
title: Extra
@@ -113,10 +113,14 @@ extra:
search-results:
title: Search results
url: search-results.html
pricing cards:
url: pricing.html
title: Pricing cards
docs:
title: Documentation
title: Docs
icon: file-text
url: docs/index.html
columns: 3
children:
index:
title: Introduction
@@ -157,6 +161,9 @@ docs:
charts:
title: Charts
url: docs/charts.html
dropdowns:
title: Dropdowns
url: docs/dropdowns.html
divider:
title: Divider
url: docs/divider.html
@@ -175,10 +182,7 @@ docs:
input-mask:
title: Form input mask
url: docs/input-mask.html
layout:
title: Layout
url: docs/layout.html
progress:
progress:
title: Progress
url: docs/progress.html
payments:
pages/_data/pages.yml
+11 -8
View File
@@ -1,20 +1,23 @@
- uri: /about/
- uri: /about.html
visitors: 4896
unique: 3654
bounce-rate: 82.54%
- uri: /special-promo/
data: 17, 24, 20, 10, 5, 1, 4, 18, 13
- uri: /special-promo.html
visitors: 3652
unique: 3215
bounce-rate: 76.29%
- uri: /news/1,new-ui-kit
data: 13, 11, 19, 22, 12, 7, 14, 3, 21
- uri: /news/1,new-ui-kit.html
visitors: 3256
unique: 2865
bounce-rate: 72.65%
- uri: /lorem-ipsum-dolor-sit-amet-very-long-url/
data: 10, 13, 10, 4, 17, 3, 23, 22, 19
- uri: /lorem-ipsum-dolor-sit-amet-very-long-url.html
visitors: 986
unique: 865
bounce-rate: 44.89%
- uri: /lalala/
visitors: 12
unique: 10
bounce-rate: 90.6%
data: 9, 6, 14, 11, 8, 24, 2, 16, 15
pages/_docs/alerts.md
+21 -13
View File
@@ -8,68 +8,76 @@ done: true
### Default markup
{% example %}
{% capture code %}
{% for variant in site.variants %}
{% capture variant-text %}
This is a {{ variant.name }} alert — check it out!
{% endcapture %}
{% include ui/alert.html type=variant.name text=variant-text %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Alert Links
Add the `alert-link` class to any links inside the alert box to create "matching colored links":
{% example %}
{% capture code %}
{% for variant in site.variants %}
{% capture variant-text %}
This is a {{ variant.name }} alert — <a href="#" class="alert-link">check it out</a>!
{% endcapture %}
{% include ui/alert.html type=variant.name text=variant-text %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Dismissible Alerts
{% example %}
{% capture code %}
{% for variant in site.variants %}
{% capture variant-text %}
This is a {{ variant.name }} alert — check it out!
{% endcapture %}
{% include ui/alert.html type=variant.name text=variant-text close=true %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Alerts with icons
{% example %}
{% capture code %}
{% for variant in site.variants %}
{% capture variant-text %}
This is a {{ variant.name }} alert — check it out!
{% endcapture %}
{% include ui/alert.html type=variant.name icon=variant.icon text=variant-text %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Alert with avatar
{% example %}
{% capture code %}
{% for variant in site.variants %}
{% capture variant-text %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
{% endcapture %}
{% include ui/alert.html type=variant.name text=variant-text person-id=forloop.index %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Alert with buttons
{% example %}
{% capture variant-text %}
{% capture code %}
{% capture variant-text %}
<h3>Some Title</h3>
<p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
{% endcapture %}
{% include ui/alert.html type='success' close=true text=variant-text buttons=true %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/autosize.md
+3 -2
View File
@@ -7,7 +7,8 @@ done: true
### Default markup
{% example html %}
{% capture code %}
<label class="form-label">Autosize example</label>
{% include ui/form/textarea-autosize.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/avatars.md
+30 -20
View File
@@ -7,110 +7,120 @@ done: true
### Default markup
{% example html wrapper=avatar-list %}
{% capture code %}
{% include ui/avatar.html person-id=1 %}
{% include ui/avatar.html person-id=2 %}
{% include ui/avatar.html person-id=3 %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Avatar image
Set an image as the background.
{% example html wrapper=avatar-list %}
{% capture code %}
{% include ui/avatar.html person-id=1 %}
{% include ui/avatar.html person-id=3 %}
{% include ui/avatar.html person-id=4 %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Initials
You can easily use initials instead of images.
{% example html wrapper=avatar-list %}
{% capture code %}
{% include ui/avatar.html placeholder="AB" %}
{% include ui/avatar.html placeholder="CD" %}
{% include ui/avatar.html placeholder="EF" %}
{% include ui/avatar.html placeholder="GH" %}
{% include ui/avatar.html placeholder="IJ" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Avatar icons
You can also use icons in avatars.
{% example html wrapper=avatar-list %}
{% capture code %}
{% include ui/avatar.html icon="user" %}
{% include ui/avatar.html icon="plus" %}
{% include ui/avatar.html icon="user-plus" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Avatar initials color
Customize the color of the avatars' background. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html wrapper=avatar-list %}
{% capture code %}
{% include ui/avatar.html placeholder="AB" color="green" %}
{% include ui/avatar.html placeholder="CD" color="red" %}
{% include ui/avatar.html placeholder="EF" color="yellow" %}
{% include ui/avatar.html placeholder="GH" color="blue" %}
{% include ui/avatar.html placeholder="IJ" color="purple" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Avatar size
Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
{% example html wrapper=avatar-list %}
{% capture code %}
{% include ui/avatar.html person-id=10 size="xl" %}
{% include ui/avatar.html person-id=9 size="lg" %}
{% include ui/avatar.html person-id=8 size="md" %}
{% include ui/avatar.html person-id=7 %}
{% include ui/avatar.html person-id=6 size="sm" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Avatar status
Add an online or offline status indicator to show user's availability.
{% example html wrapper=avatar-list %}
{% capture code %}
{% include ui/avatar.html person-id=11 %}
{% include ui/avatar.html person-id=12 status="danger" %}
{% include ui/avatar.html person-id=13 status="success" %}
{% include ui/avatar.html person-id=14 status="warning" %}
{% include ui/avatar.html person-id=15 status="info" %}
{% include ui/avatar.html person-id=16 status="gray" status-text="5" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Avatar shape
Change the shape of an avatar with the default Bootstrap image classes.
{% example html wrapper=avatar-list %}
{% capture code %}
{% include ui/avatar.html person-id=17 %}
{% include ui/avatar.html person-id=18 shape="rounded" %}
{% include ui/avatar.html person-id=19 shape="rounded-circle" %}
{% include ui/avatar.html person-id=20 shape="rounded-0" %}
{% include ui/avatar.html person-id=21 shape="rounded-lg" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Avatars list
You can easily create a list of avatars.
{% example %}
{% capture code %}
{% include ui/avatar-list.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Stacked list
Make the list stack when it reaches a certain length.
{% example %}
{% capture code %}
<div class="avatar-list avatar-list-stacked">
{% for person in site.data.people limit: 5 offset: 30 %}
{% include ui/avatar.html person=person element="a" %}
{% endfor %}
<span class="avatar" element="a">+8</span>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/badges.md
+21 -14
View File
@@ -8,73 +8,80 @@ done: true
### Default markup
{% example %}
{% capture code %}
{% for color in site.colors %}
<span class="badge bg-{{ color[0] }}">{{ color[0] }}</span>
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Pill badges
To make a pill bagde (with rounded corners) add `.bagde-pill` class.
{% example %}
{% capture code %}
{% for color in site.colors %}
<span class="badge badge-pill bg-{{ color[0] }}">{{ forloop.index }}</span>
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Soft badges
Creates a soft variant of a corresponding contextual badge variation. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example %}
{% capture code %}
{% for color in site.colors %}
<span class="badge bg-{{ color[0] }}-lt">{{ color[0] }}</span>
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Links
Make a badge work as a link by putting it into an `<a>` element.
{% example %}
{% capture code %}
{% for color in site.colors %}
<a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Empty badges
If you don't want your badge to contain any text you can do it by leaving the html element empty.
{% example %}
{% capture code %}
{% for color in site.colors %}
<a href="#" class="badge bg-{{ color[0] }}"></a>
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Badge addons
You can add badge addon by adding `.badge-addon` class.
{% example %}
{% capture code %}
{% include ui/badge.html text="task" color="green" addon="finished" %}
{% include ui/badge.html text="bundle" color="purple" addon="passing" %}
{% include ui/badge.html text="CSS gzip size" color="red-lt" addon="20.9kB" addon-color="red" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Badge avatars
If you want to add an avatar to your badge just create `.badge-avatar` class.
{% example %}
{% capture code %}
{% include ui/badge.html person-id=1 color="blue" %}
{% include ui/badge.html person-id=2 color="blue" %}
{% include ui/badge.html person-id=3 color="blue" %}
{% include ui/badge.html person-id=4 color="blue" %}
{% include ui/badge.html person-id=5 color="blue" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/breadcrumb.md
+18 -12
View File
@@ -3,35 +3,41 @@ title: Breadcrumb
menu: docs.breadcrumb
description: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
bootstrap-link: components/breadcrumb/
done: true
---
### Default markup
### Default markup
The dividers are automatically created in the content of the `:before` pseudo-element of li tags. You can inform the current page using the `active` modifier in a `li` tag. It will disable the navigation of inner links.
{% example %}
{% capture code %}
{% include ui/breadcrumb.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Breadcrumb variations
You can add more variations by modify `$breadcrumb-variants` variable in Tabler config.
{% example %}
{% capture code %}
{% include ui/breadcrumb.html class="breadcrumb-dots" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
{% example %}
{% capture code %}
{% include ui/breadcrumb.html class="breadcrumb-arrows" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
{% example %}
{% capture code %}
{% include ui/breadcrumb.html class="breadcrumb-bullets" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Alternate version
{% example %}
{% capture code %}
{% include ui/breadcrumb.html class="breadcrumb-alternate" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/buttons.md
+113 -79
View File
@@ -4,112 +4,133 @@ 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
The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
{% example html wrapper=btn-list %}
{% capture code %}
<a href="#" class="btn btn-primary" role="button">Link</a>
<button class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input"/>
<input type="submit" class="btn btn-primary" value="Submit"/>
<input type="reset" class="btn btn-primary" value="Reset"/>
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Button variations
Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.
{% example html wrapper=btn-list %}
{% capture code %}
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include ui/button.html color=btn-color text=btn-title %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Disabled buttons
Make buttons look inactive by adding the disabled boolean attribute to any `.btn` element. `<a>`s don’t support the disabled attribute, so you must add the `.disabled` class to make it visually appear disabled.
{% example html wrapper=btn-list %}
{% capture code %}
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include ui/button.html color=btn-color text=btn-title disabled=true %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Color variations
The classic button, in different colors.
{% example html wrapper=btn-list %}
{% capture code %}
{% for button in site.colors %}
<a href="#" class="btn btn-{{ button[0] }}">{{ button[1].title }}</a>
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Ghost Buttons
Use `.btn-ghost-*` class for ghost buttons.
{% capture code %}
{% for button in site.button-variants %}
<a href="#" class="btn btn-ghost-{{ button[0] }}">{{ button[1].title }}</a>
{% endfor %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Square buttons
Add `.btn-square` to button to remove border-radius.
{% example html wrapper=btn-list %}
{% capture code %}
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include ui/button.html color=btn-color text=btn-title square=true %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Pill buttons
Add `.btn-pill` class to any button to make them more rounded.
{% example html wrapper=btn-list %}
{% capture code %}
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include ui/button.html color=btn-color text=btn-title pill=true %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Outline buttons
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
{% example html wrapper=btn-list %}
{% capture code %}
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include ui/button.html text=btn-title color=btn-color outline=true %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Button size
Add `.btn-lg` or `.btn-sm` for additional sizes.
{% example html wrapper=btn-list %}
{% capture code %}
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
{% example html wrapper=btn-list %}
{% capture code %}
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
{% example html %}
{% capture code %}
<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-block">Block level button</button>
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Button with icon
@@ -117,99 +138,90 @@ Basic buttons are traditional buttons with borders and background with an extra
Icons can be found [**here**](/docs/icons.html#icons)
{% example html wrapper=btn-list %}
{% capture code %}
<button type="button" class="btn btn-dark">
{% include ui/icon.html icon="upload" class="icon-sm" %}
{% include ui/icon.html icon="upload" %}
Upload
</button>
<button type="button" class="btn btn-warning">
{% include ui/icon.html icon="heart" class="icon-sm" %}
{% include ui/icon.html icon="heart" %}
I like
</button>
<button type="button" class="btn btn-success">
{% include ui/icon.html icon="check" class="icon-sm" %}
{% include ui/icon.html icon="check" %}
I agree
</button>
<button type="button" class="btn btn-outline-primary">
{% include ui/icon.html icon="plus" class="icon-sm" %}
{% include ui/icon.html icon="plus" %}
More
</button>
<button type="button" class="btn btn-danger">
{% include ui/icon.html icon="link" class="icon-sm" %}
{% include ui/icon.html icon="link" %}
Link
</button>
<button type="button" class="btn btn-info">
{% include ui/icon.html icon="message-circle" class="icon-sm" %}
{% include ui/icon.html icon="message-circle" %}
Comment
</button>
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Social buttons
A button can be formatted to link to a social website
{% example html wrapper=btn-list %}
{% capture code %}
{% for button in site.socials %}
{% assign btn-icon = button[1].icon %}
{% assign btn-title = button[1].title %}
{% assign btn-color = button[0] %}
{% include ui/button.html color=btn-color icon=btn-icon text=btn-title %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
You can use only icons.
{% example html wrapper=btn-list %}
{% capture code %}
{% for button in site.socials %}
{% assign btn-icon = button[1].icon %}
{% assign btn-color = button[0] %}
{% include ui/button.html color=btn-color icon=btn-icon icon-only=true %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Icon buttons
Icon only button. Add `.btn-icon` class to remove unnecessary padding from button.
{% example html wrapper=btn-list %}
<button type="button" class="btn btn-icon btn-primary">
{% include ui/icon.html icon="activity" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-github">
{% include ui/icon.html icon="github" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-success">
{% include ui/icon.html icon="bell" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-warning">
{% include ui/icon.html icon="star" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-danger">
{% include ui/icon.html icon="trash-2" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-purple">
{% include ui/icon.html icon="bar-chart" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-secondary">
{% include ui/icon.html icon="git-merge" class="icon-sm" %}
</button>
{% endexample %}
{% capture code %}
{% include ui/button.html icon="activity" color="primary" icon-only=true %}
{% include ui/button.html icon="github" color="github" icon-only=true %}
{% include ui/button.html icon="bell" color="success" icon-only=true %}
{% include ui/button.html icon="star" color="warning" icon-only=true %}
{% include ui/button.html icon="trash-2" color="danger" icon-only=true %}
{% include ui/button.html icon="bar-chart" color="purple" icon-only=true %}
{% include ui/button.html icon="git-merge" color="secondary" icon-only=true %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Button dropdown
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your potential needs.
{% example html wrapper=btn-list %}
{% capture code %}
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
{% include ui/icon.html icon="calendar" class="icon-sm" %}
{% include ui/icon.html icon="calendar" %}
</button>
{% include ui/dropdown-menu.html %}
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
{% include ui/icon.html icon="calendar" class="icon-sm" %}Show calendar
{% include ui/icon.html icon="calendar" %}Show calendar
</button>
{% include ui/dropdown-menu.html %}
</div>
@@ -220,33 +232,43 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
</button>
{% include ui/dropdown-menu.html %}
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
### Loading button
Add `.btn-loading` to use a loading state on a button. The width of the button depends on the length of the text inside.
Since the loading spinner is implemented using the `:after` pseudo-element, it is not supported by the `<input type="submit">` element.
{% example html wrapper=btn-list %}
{% capture code %}
{% include ui/button.html color="primary" text="Button" loading=true %}
{% include ui/button.html color="primary" text="Loading button with loooong content" loading=true %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
{% capture code %}
{% include ui/button.html color="primary" text="Button" spinner=true %}
{% endexample %}
{% endcapture %}
{% include example.html code=code centered=true %}
### List of buttons
You can now create a list of buttons with the `.btn-list` container.
{% example html %}
{% capture code %}
<div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.
{% example html %}
{% capture code %}
<div class="btn-list">
<a href="#" class="btn btn-secondary">One</a>
<a href="#" class="btn btn-secondary">Two</a>
@@ -268,27 +290,39 @@ If the list is very long, it will automatically wrap on multiple lines, while ke
<a href="#" class="btn btn-secondary">Eighteen</a>
<a href="#" class="btn btn-secondary">Nineteen</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
{% example html %}
<div class="btn-list text-center">
<a href="#" class="btn btn-primary">Save changes</a>
{% capture code %}
<div class="btn-list justify-content-center">
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
{% example html %}
<div class="btn-list text-right">
<a href="#" class="btn btn-primary">Save changes</a>
{% capture code %}
<div class="btn-list justify-content-end">
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
{% capture code %}
<div class="btn-list">
<a href="#" class="btn btn-outline-danger mr-auto">Delete</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
{% endcapture %}
{% include example.html code=code %}
### Button with avatar
{% example html wrapper=btn-list %}
{% capture code %}
<a href="#" class="btn btn-secondary">
{% include ui/avatar.html person-id="4" %} Avatar
</a>
@@ -298,5 +332,5 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
<a href="#" class="btn btn-secondary">
{% include ui/avatar.html person-id="6" %} Avatar
</a>
{% endexample %}
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
pages/_docs/cards.md
+61 -23
View File
@@ -4,34 +4,67 @@ 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
{% example html columns=1 %}
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." %}
{% endexample %}
{% endcapture %}
{% include example.html code=code columns=1 %}
### Card with title and image
### Card padding
{% example html columns=1 %}
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
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" %}
{% endexample %}
### Blog post card
{% endcapture %}
{% 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.
{% example html columns=1 %}
{% capture code %}
{% include cards/blog-single.html type="image" %}
{% endexample %}
{% endcapture %}
{% 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.
{% example html columns=3 %}
{% capture code %}
<div class="row row-deck">
<div class="col-md-4">
<div class="card">
@@ -49,19 +82,21 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code columns=2 %}
### 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:
{% example html columns=3 %}
{% capture code %}
{% include cards/blog-single.html type="aside" liked=1 article-id=3 %}
{% endexample %}
{% endcapture %}
{% include example.html code=code columns=2 %}
### Color variations
## Color variations
{% example html columns=3 %}
{% capture code %}
<div class="row row-deck">
<div class="col-md-6">
{% include cards/card.html status-top="danger" title="Card with top status" %}
@@ -70,17 +105,20 @@ You can also add the image on the left side of the card. All you need do to is:
{% include cards/card.html status-left="green" title="Card with side status" %}
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code columns=2 %}
### Stacked card
## Stacked card
{% example html columns=1 %}
{% capture code %}
{% include cards/card.html class="card-stacked" title="Stacked card" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code columns=1 %}
## Tabbed card
{% example html columns=2 %}
{% capture code %}
{% include cards/card-tabs.html count=4 %}
{% endexample %}
{% endcapture %}
{% include example.html code=code columns=2 %}
pages/_docs/carousel.md
+3 -2
View File
@@ -5,6 +5,7 @@ description: The Carousel is a slideshow for cycling through elements.
bootstrap-link: components/carousel/
---
{% example html columns=1 %}
{% capture code %}
{% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/charts.md
+3 -2
View File
@@ -7,7 +7,7 @@ menu: docs.charts
{% for chart in site.data.charts %}
{% if chart[1].display %}
{% example html %}
{% capture code %}
{% assign data = chart[0] %}
{% assign key = 'chart-' | append: data %}
<div class="card">
@@ -19,6 +19,7 @@ menu: docs.charts
</div>
</div>
{% include ui/chart.html id=key chart-id=data show-scripts=true %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
{% endif %}
{% endfor %}
pages/_docs/countup.md
+45 -34
View File
@@ -11,105 +11,116 @@ To make countup add `data-countup` to any html text tag.
Set number to count up.
{% example %}
<h1 data-countup>30000</h1>
{% endexample %}
{% capture code %}
<h1 data-countup>30000</h1>
{% endcapture %}
{% include example.html code=code %}
### Duration
Set the `duration` of the countup. (2s is set by default)
{% example %}
<h1 data-countup>30000</h1>
{% capture code %}
<h1 data-countup>30000</h1>
<h1 data-countup='{"duration":4}'>30000</h1>
<h1 data-countup='{"duration":6}'>30000</h1>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Starting value
Set the start value of countup using `startVal`.
If you set it bigger than the `count`, countup will run reverse.
{% example %}
<h1 data-countup='{"startVal":12345}'>30000</h1>
<h1 data-countup='{"startVal":47655}'>30000</h1>
{% endexample %}
{% capture code %}
<h1 data-countup='{"startVal":12345}'>30000</h1>
<h1 data-countup='{"startVal":47655}'>30000</h1>
{% endcapture %}
{% include example.html code=code %}
### Decimal places
Set how many decimal places to show using `decimalPlaces`.
{% example %}
<h1 data-countup>3.123</h1>
{% capture code %}
<h1 data-countup>3.123</h1>
<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
<h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
<h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Easing
Disable easing using `"useEasing": false`. (`true` by default)
{% example %}
<h1 data-countup>30000</h1>
{% capture code %}
<h1 data-countup>30000</h1>
<h1 data-countup='{"useEasing": false}'>30000</h1>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Use grouping
Disable grouping using `"useGrouping": false`. (`true` by default)
{% example %}
<h1 data-countup>30000</h1>
{% capture code %}
<h1 data-countup>30000</h1>
<h1 data-countup='{"useGrouping": false}'>30000</h1>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Separator
Set seperator that seperates groups using `separator`. (`,` by default)
{% example %}
<h1 data-countup>3000000</h1>
{% capture code %}
<h1 data-countup>3000000</h1>
<h1 data-countup='{"separator":" "}'>3000000</h1>
<h1 data-countup='{"separator":"-"}'>3000000</h1>
<h1 data-countup='{"separator":":"}'>3000000</h1>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Decimal separator
Set decimal separator using `decimal`. (`.` by default)
{% example %}
<h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
{% capture code %}
<h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
<h1 data-countup='{"decimalPlaces":2,"decimal":".."}'>3.12</h1>
<h1 data-countup='{"decimalPlaces":2,"decimal":"^"}'>3.12</h1>
<h1 data-countup='{"decimalPlaces":2,"decimal":":"}'>3.12</h1>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Prefix
Set countup prefix using `prefix`.
{% example %}
<h1 data-countup='{"prefix":"$"}'>30000</h1>
{% capture code %}
<h1 data-countup='{"prefix":"$"}'>30000</h1>
<h1 data-countup='{"prefix":"€"}'>30000</h1>
<h1 data-countup='{"prefix":"£"}'>30000</h1>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Suffix
Set countup suffix using `suffix`.
{% example %}
<h1 data-countup='{"suffix":"%"}'>30</h1>
{% capture code %}
<h1 data-countup='{"suffix":"%"}'>30</h1>
<h1 data-countup='{"suffix":"‰"}'>30</h1>
<h1 data-countup='{"suffix":"k"}'>30</h1>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
Of course you can mix all of these:
{% example %}
<h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
{% endexample %}
{% capture code %}
<h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
{% endcapture %}
{% include example.html code=code %}
To do more advanced stuff with countups go [**here**](https://inorganik.github.io/countUp.js/) to check how it's done.
pages/_docs/cursors.md
+3 -2
View File
@@ -12,7 +12,7 @@ menu: docs.cursors
- `.cursor-zoom-in` - cursor showing that user can zoom in
- `.cursor-zoom-out` - cursor showing that user can zoom out
{% example html %}
{% capture code %}
<div class="row text-center">
<div class="col-4 mb-3">
<div class="cursor-auto bg-light py-3">Cursor auto</div>
@@ -33,4 +33,5 @@ menu: docs.cursors
<div class="cursor-zoom-out bg-light py-3">Cursor zoom out</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/divider.md
+8 -6
View File
@@ -6,15 +6,15 @@ done: true
---
### Default markup
{% example html columns=1 %}
{% capture code %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% include ui/hr.html text="Left divider" %}
{% include ui/hr.html text="Left divider" position="left" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% include ui/hr.html text="Centered divider" position="center" %}
{% include ui/hr.html text="Centered divider" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
@@ -22,13 +22,14 @@ done: true
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Divider color
Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html columns=1 %}
{% capture code %}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
@@ -36,4 +37,5 @@ Customize the color of the divider. You can click [here]({% docs_url colors %})
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/dropdowns.md
+100
View File
@@ -0,0 +1,100 @@
---
title: Dropdowns
description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
bootstrap-link: components/dropdowns
toc: true
---
## Default dropdown
Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here’s how you can do this:
{% capture code %}
{% include ui/dropdown-menu.html show=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dropdown divider
Separate groups of related menu items with a divider.
{% capture code %}
{% include ui/dropdown-menu.html show=true separated=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Active state
{% capture code %}
{% include ui/dropdown-menu.html show=true active=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Disabled state
{% capture code %}
{% include ui/dropdown-menu.html show=true disabled=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dropdown header
Add a header to label sections of actions in any dropdown menu.
{% capture code %}
{% include ui/dropdown-menu.html show=true header=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dropdown with icons
{% capture code %}
{% include ui/dropdown-menu.html show=true icons=true header=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dropdown with arrow
{% capture code %}
{% include ui/dropdown-menu.html show=true arrow=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dropdown with badge
{% capture code %}
{% include ui/dropdown-menu.html show=true badge=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dropdown with checkboxes
{% capture code %}
{% include ui/dropdown-menu.html show=true check=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
{% capture code %}
{% include ui/dropdown-menu.html show=true radio=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dark dropdown
{% capture code %}
{% include ui/dropdown-menu.html show=true dark=true header=true icons=true arrow=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dropdown with card content
{% capture code %}
{% include ui/button.html color="secondary" text="Button" %}
<div class="dropdown{% hide %} show{% endhide %}">
<a href="#" class="btn btn-primary dropdown-toggle">Dropdown</a>
<div class="dropdown-menu dropdown-menu-card{% hide %} show position-static{% endhide %}" style="max-width: 20rem;">
{% include cards/blog-single.html type="image" %}
</div>
</div>
{% endcapture %}
{% include example.html code=code centered=true wrapper="btn-list align-items-start" %}
pages/_docs/empty.md
+6 -4
View File
@@ -5,12 +5,14 @@ description: Empty states/blanks are commonly used as placeholders for first tim
### Default markup
{% example html %}
{% capture code %}
{% include ui/empty.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Empty state with illustration
{% example html %}
{% capture code %}
{% include ui/empty.html illustration=true %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/flags.md
+6 -4
View File
@@ -7,22 +7,24 @@ done: true
### Flag
{% example html %}
{% capture code %}
{% include ui/flag.html flag="tg" class="mr-1" %}
{% include ui/flag.html flag="br" class="mr-1" %}
{% include ui/flag.html flag="pt" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Flag sizes
Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.
{% example html %}
{% capture code %}
{% include ui/flag.html flag="pl" size="xl" class="mr-1" %}
{% include ui/flag.html flag="pl" size="lg" class="mr-1" %}
{% include ui/flag.html flag="pl" size="md" %}
{% include ui/flag.html flag="pl" class="mr-1" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Types
pages/_docs/form-elements.md
+78 -58
View File
@@ -5,7 +5,7 @@ bootstrap-link: components/forms/
### Classic Input
{% example %}
{% capture code %}
<div class="mb-2">
<label class="form-label">Static</label>
<div class="form-control-plaintext">Username</div>
@@ -26,10 +26,11 @@ bootstrap-link: components/forms/
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
value="Well, how'd you become king, then?" readonly>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Password and validation
{% example %}
{% capture code %}
<div class="mb-2">
<label class="form-label">Password</label>
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
@@ -51,81 +52,94 @@ bootstrap-link: components/forms/
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Input size
{% include parts/input-sizes.html %}
{% include parts/form/input-sizes.html %}
### Select
{% example %}
{% include parts/select.html options="Germany,USA,Poland" %}
{% endexample %}
{% capture code %}
{% include parts/form/select.html options="Germany,USA,Poland" %}
{% endcapture %}
{% include example.html code=code %}
### Textarea
{% example %}
{% capture code %}
<div class="mb-2">
<label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Image check
{% example %}
{% include parts/input-image.html %}
{% endexample %}
{% capture code %}
{% include parts/form/input-image.html %}
{% endcapture %}
{% include example.html code=code %}
### Input color
{% example %}
{% include parts/input-color.html %}
{% endexample %}
{% capture code %}
{% include parts/form/input-color.html %}
{% endcapture %}
{% include example.html code=code %}
### Input color picker
{% example %}
{% include parts/input-colorpicker.html %}
{% endexample %}
{% capture code %}
{% include parts/form/input-colorpicker.html %}
{% endcapture %}
{% include example.html code=code %}
### Datalists
{% example %}
{% include parts/input-datalist.html %}
{% endexample %}
{% capture code %}
{% include parts/form/input-datalist.html %}
{% endcapture %}
{% include example.html code=code %}
### Custom selectboxes
{% example %}
{% include parts/input-selectgroups.html %}
{% endexample %}
{% capture code %}
{% include parts/form/input-selectgroups.html %}
{% endcapture %}
{% include example.html code=code %}
### Toggle switches
{% example %}
{% include parts/input-toggle.html %}
{% include parts/input-toggle-single.html %}
{% endexample %}
{% capture code %}
{% include parts/form/input-toggle.html %}
{% include parts/form/input-toggle-single.html %}
{% endcapture %}
{% include example.html code=code %}
### Radios
{% example %}
{% include parts/input-radios.html %}
{% include parts/input-radios-inline.html %}
{% endexample %}
{% capture code %}
{% include parts/form/input-radios.html %}
{% include parts/form/input-radios-inline.html %}
{% endcapture %}
{% include example.html code=code %}
### Checkboxes
{% example %}
{% include parts/input-checkboxes.html %}
{% include parts/input-checkboxes-inline.html %}
{% endexample%}
{% capture code %}
{% include parts/form/input-checkboxes.html %}
{% include parts/form/input-checkboxes-inline.html %}
{% endcapture %}
{% include example.html code=code %}
### Range input
{% example %}
{% include parts/input-range.html %}
{% endexample %}
{% capture code %}
{% include parts/form/input-range.html %}
{% endcapture %}
{% include example.html code=code %}
### Sample form
{% example %}
{% include parts/form-fieldset.html %}
{% endexample %}
{% capture code %}
{% include parts/form/fieldset.html %}
{% endcapture %}
{% include example.html code=code %}
### Input group
{% example %}
{% capture code %}
<div class="mb-2">
<label class="form-label">Input group</label>
<div class="input-group">
@@ -158,20 +172,23 @@ bootstrap-link: components/forms/
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Input with icon
{% example %}
{% include parts/input-icon.html %}
{% endexample %}
{% capture code %}
{% include parts/form/input-icon.html %}
{% endcapture %}
{% include example.html code=code %}
### Separated inputs
{% example %}
{% include parts/input-icon-separated.html %}
{% endexample %}
{% capture code %}
{% include parts/form/input-icon-separated.html %}
{% endcapture %}
{% include example.html code=code %}
### Custom Input examples
{% example %}
{% capture code %}
<div class="mb-2">
<label class="form-label">Username</label>
{% include ui/form/input-group.html prepend="@" placeholder="username" %}
@@ -191,13 +208,14 @@ bootstrap-link: components/forms/
<label class="form-label">Price</label>
{% include ui/form/input-group.html prepend="$" append=".00" %}
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Date component
{% example %}
{% capture code %}
<div class="mb-2">
<label class="form-label">Date of birth</label>
<div class="row row-xs">
<div class="row row-sm">
<div class="col-5">
<select name="user[month]" class="form-select">
<option value="">Month</option>
@@ -231,10 +249,11 @@ bootstrap-link: components/forms/
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Input with button
{% example %}
{% capture code %}
<div class="mb-2">
<label class="form-label">Button input</label>
<div class="input-group">
@@ -254,4 +273,5 @@ bootstrap-link: components/forms/
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/form-helpers.md
+3 -2
View File
@@ -4,6 +4,7 @@ title: Form helpers
### Input help
{% example %}
{% capture code %}
<span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/index.md
+18 -10
View File
@@ -5,29 +5,37 @@ icon: flag
order: -1
---
We’ve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
## What is Tabler?
### Setup environment
Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customisable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, you’ll be able to create dashboards that are fully functional and beautifully designed!
To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow these steps:
## What are the benefits?
Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully reponsive. Thanks to the big choice of ready-made components, you can customise your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.
To start using Tabler, first you need to set up the environment.
### Set up the environment
To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/), recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
4. [Install Bundler](https://bundler.io) with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
4. [Install Bundler](https://bundler.io) with `gem install bundler` and, finally, run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
**Windows users**:
1. [Install Git](https://git-scm.com/download/win) in `C:\\Program Files\\git\\bin` directory and run `npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"` to change default shell.
2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/), recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\Program Files\git\bin\bash.exe"` to change the default shell.
2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
When completed, you'll be able to run the various commands provided from the command line.
Once you've completed the setup, you'll be able to run the various commands provided from the command line.
### Build Tabler locally
1. From the root `/tabler` directory, run `npm run start` in the command line.
2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà.
3. Any change in `/pages` directory will build application and refresh the page.
3. Any change in `/pages` directory will build the application and refresh the page.
**Note**:
Run `npm run build` for rerforms a one off build application without refresh.
@@ -35,4 +43,4 @@ Open [http://localhost:3001](http://localhost:3001) to configure the Web server.
### Bugs and feature requests
Have a bug or a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
pages/_docs/input-mask.md
+3 -2
View File
@@ -2,7 +2,8 @@
title: Input mask
---
{% example %}
{% capture code %}
<label class="form-label">Telephone mask</label>
{% include ui/form/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/payments.md
+8 -6
View File
@@ -7,22 +7,24 @@ done: true
### Payment
{% example %}
{% capture code %}
{% include ui/payment.html class="mr-3" payment="shopify"%}
{% include ui/payment.html class="mr-3" payment="visa" %}
{% include ui/payment.html class="mr-3" payment="paypal"%}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Payment sizes
Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up to different sizes based on what’s needed.
{% example %}
{% capture code %}
{% include ui/payment.html class="mr-3" payment="shopify" size="xl" %}
{% include ui/payment.html class="mr-3" payment="visa" size="lg" %}
{% include ui/payment.html class="mr-3" payment="paypal" size="md" %}
{% include ui/payment.html class="mr-3" payment="amazon" size="sm" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Types
@@ -31,8 +33,8 @@ Using Bootstrap’s typical naming structure, you can create a standard payment,
<tr>
<td>{{ payment.name }}</td>
<td><code>{{ payment.logo }}</code></td>
<td class="w-1p">{% include ui/payment.html payment=payment.logo %}</td>
<td class="w-1p">{% include ui/payment.html payment=payment.logo dark=true %}</td>
<td class="w-1">{% include ui/payment.html payment=payment.logo %}</td>
<td class="w-1">{% include ui/payment.html payment=payment.logo dark=true %}</td>
</tr>
{% endfor %}
</table>
pages/_docs/progress.md
+19 -13
View File
@@ -1,7 +1,7 @@
---
title: Progress
description: A progress bar can be used to show a user how far along he is in a process.
bootstrap-link: components/progress/
bootstrap-link: components/progress
done: true
---
@@ -9,49 +9,55 @@ done: true
To create a default progress bar, add a `.progress` class to a `<div>` element:
{% example html %}
{% capture code %}
{% include ui/progress.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Progress size
Using Bootstrap’s typical naming structure, you can create a standard progress, or scale it up to different sizes based on what’s needed.
{% example html %}
{% capture code %}
{% include ui/progress.html value=57 size="sm" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Progress without value
Remove the showed value by adding a class called `.sr-only`.
{% example html %}
{% capture code %}
{% include ui/progress.html value=75 show-value=false %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Indeterminate progress
To create indeterminate progress add `.progress-bar-indeterminate` to the `.progress-bar` element.
{% example html %}
{% capture code %}
{% include ui/progress.html indeterminate=true size="sm" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Native progress element
You can also use native HTML5 `<progress>` element.
{% example html %}
{% capture code %}
<progress class="progress progress-sm" value="15" max="100"/>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Progress color
Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example %}
{% capture code %}
{% include ui/progress.html size="sm" color="red" class="mb-2" value=24 %}
{% include ui/progress.html size="sm" color="green" class="mb-2" value=45 %}
{% include ui/progress.html size="sm" color="purple" class="mb-2" value=64 %}
{% include ui/progress.html size="sm" color="pink" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/range-slider.md
+36 -27
View File
@@ -7,10 +7,11 @@ All options and features can be found [**here**](https://refreshless.com/nouisli
### Basic range slider
{% example %}
<div data-slider='{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}'></div>
{% capture code %}
<div data-slider='{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}'></div>
<p demo-slider="slider0"></p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
That's how values are displayed:
@@ -48,10 +49,11 @@ function slider(){
}
```
{% example %}
<div data-slider='{"js-name": "slider1","start": 50,"range": {"min": 0,"max": 100}}'></div>
{% capture code %}
<div data-slider='{"js-name": "slider1","start": 50,"range": {"min": 0,"max": 100}}'></div>
<p id="sliderText" demo-slider="slider1"></p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### start
@@ -59,40 +61,43 @@ The `start` option sets the number of handles and corresponding start positions.
The `start` option uses the slider's `'format'` option to decode the input. Number input will be cast to string and decoded.
{% example %}
<div data-slider='{"js-name": "slider2","start": 30,"range": {"min": 0,"max": 100}}'></div>
{% capture code %}
<div data-slider='{"js-name": "slider2","start": 30,"range": {"min": 0,"max": 100}}'></div>
<p demo-slider="slider2"></p>
<div data-slider='{"js-name": "slider3","start": [40,65],"range": {"min": 0,"max": 100}}'></div>
<p demo-slider="slider3"></p>
<div data-slider='{"js-name": "slider4","start": [25,50,75],"range": {"min": 0,"max": 100}}'></div>
<p demo-slider="slider4"></p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### range
All values on the slider are part of a range. The range has a minimum and maximum value. **The minimum value cannot be equal to the maximum value.**
{% example %}
<div data-slider='{"js-name": "slider5","start": 500,"range": {"min": -2000,"max": 10000}}'></div>
{% capture code %}
<div data-slider='{"js-name": "slider5","start": 500,"range": {"min": -2000,"max": 10000}}'></div>
<p demo-slider="slider5"></p>
<div data-slider='{"js-name": "slider6","start": [-250,800],"range": {"min": -500,"max": 1000}}'></div>
<p demo-slider="slider6"></p>
<div data-slider='{"js-name": "slider7","start": [0.1,0.4,0.9],"range": {"min": 0.1,"max": 1}}'></div>
<p demo-slider="slider7"></p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### step
By default, the slider slides fluently. In order to make the handles jump between intervals, you can use the step option.
{% example %}
<div data-slider='{"js-name": "slider8","start": 5000,"range": {"min": 1000,"max": 10000},"step": 1000}'></div>
{% capture code %}
<div data-slider='{"js-name": "slider8","start": 5000,"range": {"min": 1000,"max": 10000},"step": 1000}'></div>
<p demo-slider="slider8"></p>
<div data-slider='{"js-name": "slider9","start": 500,"range": {"min": 100,"max": 1000},"step": 125}'></div>
<p demo-slider="slider9"></p>
<div data-slider='{"js-name": "slider10","start": 50,"range": {"min": 10,"max": 100},"step": 5}'></div>
<p demo-slider="slider10"></p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### connect
@@ -103,42 +108,46 @@ For sliders with 2 or more handles, pass an array with a boolean for every conne
Setting true sets the bars between the handles, but not between the handles and the sliders edges.
{% example %}
<div data-slider='{"js-name": "slider11","start": 8000,"connect": "lower","range": {"min": [2000],"max": [20000]}}'></div>
{% capture code %}
<div data-slider='{"js-name": "slider11","start": 8000,"connect": "lower","range": {"min": [2000],"max": [20000]}}'></div>
<p demo-slider="slider11"></p>
<div data-slider='{"js-name": "slider12","start": 8000,"connect": "upper","range": {"min": [2000],"max": [20000]}}'></div>
<p demo-slider="slider12"></p>
<div data-slider='{"js-name": "slider13","start": [4000, 8000, 12000, 16000],"connect": [false, true, true, false, true],"range": {"min": [2000],"max": [20000]}}'></div>
<p demo-slider="slider13"></p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### margin
When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'. This option is only available on linear sliders.
{% example %}
<div data-slider='{"js-name": "slider14","start": [20,80],"range": {"min": 0,"max": 100},"margin":30}'></div>
{% capture code %}
<div data-slider='{"js-name": "slider14","start": [20,80],"range": {"min": 0,"max": 100},"margin":30}'></div>
<p demo-slider="slider14"></p>
<div data-slider='{"js-name": "slider15","start": [20,80],"range": {"min": 0,"max": 100},"margin":50}'></div>
<p demo-slider="slider15"></p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### limit
The `limit` option is the oposite of the margin option, limiting the maximum distance between two handles. As with the margin option, the `limit` option can only be used on linear sliders.
{% example %}
<div data-slider='{"js-name": "slider16","start": [10,120],"connect":true,"range": {"min": 0,"max": 100},"limit":40,"behaviour":"drag"}'></div>
{% capture code %}
<div data-slider='{"js-name": "slider16","start": [10,120],"connect":true,"range": {"min": 0,"max": 100},"limit":40,"behaviour":"drag"}'></div>
<p demo-slider="slider16"></p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### padding
Padding limits how close to the slider edges handles can be.
{% example %}
<div data-slider='{"js-name": "slider17","start": [20,80],"range": {"min": 0,"max": 100},"padding":[10,15]}'></div>
{% capture code %}
<div data-slider='{"js-name": "slider17","start": [20,80],"range": {"min": 0,"max": 100},"padding":[10,15]}'></div>
<p demo-slider="slider17"></p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
That's only the basic features and options of range slider. More possibilities can be found [**here**](https://refreshless.com/nouislider/).
pages/_docs/ribbons.md
+15 -10
View File
@@ -6,9 +6,10 @@ done: true
### Default markup
{% example html columns=1 %}
{% capture code %}
{% include cards/ribbon.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Ribbon position
@@ -21,30 +22,34 @@ You can easily change the position of a ribbon by adding a class to the element.
You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
{% example html columns=1 %}
{% capture code %}
{% include cards/ribbon.html top=true left=true %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Ribbon color
Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html columns=1 %}
{% capture code %}
{% include cards/ribbon.html color="red" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Ribbon text
Set your own text in a ribbon.
{% example html columns=1 %}
{% capture code %}
{% include cards/ribbon.html color="green" text="-50%" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Ribbon style
Change the style of a ribbon.
{% example html columns=1 %}
{% capture code %}
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/spinners.md
+18 -12
View File
@@ -7,46 +7,52 @@ done: true
### Default markup
{% example %}
{% capture code %}
{% include ui/spinner.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Colors
{% example %}
{% capture code %}
{% for color in site.colors %}
{% assign c = color[0] %}
{% include ui/spinner.html color=c %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Size
{% example %}
{% capture code %}
{% include ui/spinner.html %}
{% include ui/spinner.html size="sm" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Growing spinner
{% example %}
{% capture code %}
{% include ui/spinner.html type="grow" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
{% example %}
{% capture code %}
{% for color in site.colors %}
{% assign c = color[0] %}
{% include ui/spinner.html color=c type="grow" %}
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Buttons
{% example html wrapper=btn-list %}
{% capture code %}
{% include ui/button.html spinner=true text="Button" color="primary" %}
{% include ui/button.html spinner=true text="Button" color="danger" %}
{% include ui/button.html spinner=true text="Button" color="warning" %}
{% include ui/button.html spinner=true color="success" %}
{% include ui/button.html spinner=true color="secondary" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/steps.md
+17 -10
View File
@@ -4,35 +4,42 @@ menu: docs.steps
new: true
---
Steps are progress indicators of a sequence of task steps.
### Default markup
{% example %}
{% capture code %}
{% include ui/steps.html show-title=true %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Tooltips
{% example %}
{% capture code %}
{% include ui/steps.html show-title=true show-tooltip=true %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Color
{% example %}
{% capture code %}
{% include ui/steps.html color="green" show-title=true %}
{% include ui/steps.html color="red" show-title=true %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Steps without title
{% example %}
{% capture code %}
{% include ui/steps.html show-tooltip=true %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Steps with numbers
{% example %}
{% capture code %}
{% include ui/steps.html count=5 active=2 numbers=true color="lime" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/tables.md
+6 -4
View File
@@ -10,14 +10,16 @@ A basic Bootstrap table has a light padding and only horizontal dividers.
The `.table` class adds basic styling to a table:
{% example %}
{% capture code %}
{% include ui/table.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### No wrap
Prevents table cell content from wrapping to another line.
{% example %}
{% capture code %}
{% include ui/table.html nowrap=true responsive=true %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/tabs.md
+18 -12
View File
@@ -6,36 +6,42 @@ bootstrap-link: components/navs/
### Default markup
{% example html columns=1 %}
{% capture code %}
{% include cards/tabs.html id="ex1" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Tabs with icons
{% example html columns=1 %}
{% capture code %}
{% include cards/tabs.html icons=true settings=true id="ex2" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Tabs only with icons
{% example html columns=1 %}
{% capture code %}
{% include cards/tabs.html icons=true settings=true hide-text=true id="ex3" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Tabs with dropdown
{% example html columns=1 %}
{% capture code %}
{% include cards/tabs.html dropdown=true id="ex4" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Full-width tabs
{% example html columns=1 %}
{% capture code %}
{% include cards/tabs.html justified=true icons=true hide-text=true activity=true id="ex5" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Alternate style
{% example html columns=1 %}
{% capture code %}
{% include cards/tabs.html icons=true alternative=true settings=true id="ex6" %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/timelines.md
+8 -6
View File
@@ -4,11 +4,13 @@ menu: docs.timelines
---
### Timeline
{% example html columns=3 %}
{% include cards/timeline.html %}
{% endexample %}
{% capture code %}
{% include cards/timeline.html %}
{% endcapture %}
{% include example.html code=code %}
### Simple Timeline
{% example html columns=1 %}
{% include cards/timeline.html simple=true %}
{% endexample %}
{% capture code %}
{% include cards/timeline.html simple=true %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/toasts.md
+9 -6
View File
@@ -7,23 +7,26 @@ bootstrap-link: components/toasts/
### Default markup
{% example %}
{% capture code %}
{% include ui/toast.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Translucent
Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we’ll also attempt to blur the elements under a toast.
{% example html class=bg-gray %}
{% capture code %}
{% include ui/toast.html %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Stacking toasts
If you want to stack toasts just put them in the same container.
{% example %}
{% capture code %}
{% include ui/toast.html person-id=3 %}
{% include ui/toast.html date="7 mins ago" text="This is another toast message." %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/tooltips.md
+6 -4
View File
@@ -7,7 +7,7 @@ bootstrap-link: components/tooltips/
### Default markup
{% example html wrapper=btn-list %}
{% capture code %}
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
@@ -20,12 +20,14 @@ bootstrap-link: components/tooltips/
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Tooltip with HTML
{% example html wrapper=btn-list %}
{% capture code %}
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_docs/typography.md
+50 -39
View File
@@ -7,49 +7,53 @@ bootstrap-link: content/typography/
### Headings
{% example %}
{% capture code %}
{% for i in (1..6) %}<h{{ i }}>H{{ i }} Heading</h{{ i }}>
{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Paragraphs
{% example %}
{% capture code %}
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Semantic text elements
{% example %}
<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br/></hide>
<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br/></hide>
<cite>Citation</cite><hide> <code class="ml-2">cite</code><br/></hide>
<code>Hello World!</code><hide> <code class="ml-2">code</code><br/></hide>
<del>Deleted</del><hide> <code class="ml-2">del</code><br/></hide>
<em>Emphasis</em><hide> <code class="ml-2">em</code><br/></hide>
<i>Italic</i><hide> <code class="ml-2">i</code><br/></hide>
<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br/></hide>
<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br/></hide>
<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br/></hide>
<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br/></hide>
<samp>Sample</samp><hide> <code class="ml-2">samp</code><br/></hide>
Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br/></hide>
Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
<time>20:00</time><hide> <code class="ml-2">time</code><br/></hide>
<u>Underline</u><hide> <code class="ml-2">u</code><br/></hide>
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br/></hide>
{% endexample %}
{% capture code %}
<abbr title="Internationalization">I18N</abbr>{% hide %} <code class="ml-2">abbr</code><br/>{% endhide %}
<strong>Bold</strong>{% hide %} <code class="ml-2">strong</code> <code>b</code><br/>{% endhide %}
<cite>Citation</cite>{% hide %} <code class="ml-2">cite</code><br/>{% endhide %}
<code>Hello World!</code>{% hide %} <code class="ml-2">code</code><br/>{% endhide %}
<del>Deleted</del>{% hide %} <code class="ml-2">del</code><br/>{% endhide %}
<em>Emphasis</em>{% hide %} <code class="ml-2">em</code><br/>{% endhide %}
<i>Italic</i>{% hide %} <code class="ml-2">i</code><br/>{% endhide %}
<ins>Inserted</ins>{% hide %} <code class="ml-2">ins</code><br/>{% endhide %}
<kbd>Ctrl + S</kbd>{% hide %} <code class="ml-2">kbd</code><br/>{% endhide %}
<mark>Highlighted</mark>{% hide %} <code class="ml-2">mark</code><br/>{% endhide %}
<s>Strikethrough</s{% hide %}> <code class="ml-2">s</code><br/>{% endhide %}
<samp>Sample</samp>{% hide %} <code class="ml-2">samp</code><br/>{% endhide %}
Text <sub>Subscripted</sub>{% hide %} <code class="ml-2">sub</code><br/>{% endhide %}
Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% endhide %}
<time>20:00</time>{% hide %} <code class="ml-2">time</code><br/>{% endhide %}
<u>Underline</u>{% hide %} <code class="ml-2">u</code><br/>{% endhide %}
<var>x</var> = <var>y</var> + 2{% hide %} <code class="ml-2">var</code><br/>{% endhide %}
{% endcapture %}
{% include example.html code=code %}
### Horizontal rules
{% example %}
{% capture code %}
<hr>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
#### Horizontal rules with label
{% example %}
{% capture code %}
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
@@ -71,12 +75,13 @@ Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
<p>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Optimized for Asian, African, and Middle Eastern alphabets
{% example %}
{% capture code %}
<h5>Chinese</h5>
<p>汉字</p>
@@ -106,38 +111,42 @@ Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
<h5>Thai</h5>
<p>อักษรไทย</p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Text transform
Transform text in components with text capitalization classes.
{% example %}
{% capture code %}
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Letter spacing
Utilities for controlling the tracking (letter spacing) of an element.
{% example %}
{% capture code %}
<p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
<p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
<p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Line Height
Utilities for controlling the leading (line height) of an element.
{% example %}
{% capture code %}
<p class="lh-1">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
<p class="lh-sm">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
<p class="lh-base">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
<p class="lh-lg">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Antialiasing
@@ -145,16 +154,17 @@ Utilities for controlling the font smoothing of an element.
Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` render without antialiasing.
{% example %}
{% capture code %}
<div class="antialiased">Text with antialiasing</div>
<div class="subpixel-antialiased">Text without antialiasing</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
### Markdown elements
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.markdown` as container. It can handle almost any HTML tag.
{% example %}
{% capture code %}
<div class="markdown">
<h1>Hello World</h1>
<p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
@@ -167,4 +177,5 @@ When you can't use the CSS classes you want, or when you just want to directly u
<li>Ut non enim metus.</li>
</ul>
</div>
{% endexample %}
{% endcapture %}
{% include example.html code=code %}
pages/_includes/cards/charts/active-users.html
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Active users</div>
<div class="ml-auto">
<div class="ml-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
pages/_includes/cards/charts/new-clients.html
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">New clients</div>
<div class="ml-auto">
<div class="ml-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
pages/_includes/cards/charts/revenue.html
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Revenue</div>
<div class="ml-auto">
<div class="ml-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
pages/_includes/cards/charts/sales.html
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Sales</div>
<div class="ml-auto">
<div class="ml-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
pages/_includes/cards/company-employees.html
+1 -1
View File
@@ -12,7 +12,7 @@
{% for person in site.data.people limit: 5 offset: 20 %}
<tr>
<td class="w-1p">{% include ui/avatar.html src=person.photo %}</td>
<td class="w-1">{% include ui/avatar.html src=person.photo %}</td>
<td><a href="#" class="text-reset">{{ person.full_name }}</a></td>
<td>{{ person.department }}</td>
<td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td>
pages/_includes/cards/credit-card.html
+47
View File
@@ -0,0 +1,47 @@
<div class="card">
<div class="card-body">
<div class="mb-3">
<div class="form-label">Card number</div>
{% include ui/form/input-mask.html mask="0000 0000 0000 0000" visible=true %}
</div>
<div class="mb-3">
<div class="form-label">Card name</div>
<input type="text" class="form-control">
</div>
<div class="row">
<div class="col-8">
<div class="mb-3">
<label class="form-label">Expiration date</label>
<div class="row row-sm">
<div class="col">
<select class="form-select">
{% for month in (1..12) %}
<option value="{{ month }}">{{ month }}</option>
{% endfor %}
</select>
</div>
<div class="col">
<select class="form-select">
{% for year in (2020..2030) %}
<option value="{{ year }}">{{ year }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
<div class="col">
<div class="mb-3">
<div class="form-label">CVV</div>
<input type="number" class="form-control">
</div>
</div>
</div>
<div class="mt-2">
{% include ui/button.html text="Pay now" color="primary" block=true %}
</div>
</div>
</div>
pages/_includes/cards/development-activity.html
+5 -5
View File
@@ -12,7 +12,7 @@
</thead>
<tbody>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=10 %}
</td>
<td>{{ site.data.people[10].full_name }}</td>
@@ -20,7 +20,7 @@
<td class="text-nowrap text-muted">May 6, 2019</td>
</tr>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=17 %}
</td>
<td>{{ site.data.people[17].full_name }}</td>
@@ -28,7 +28,7 @@
<td class="text-nowrap text-muted">April 22, 2019</td>
</tr>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=16 %}
</td>
<td>{{ site.data.people[16].full_name }}</td>
@@ -36,7 +36,7 @@
<td class="text-nowrap text-muted">April 15, 2019</td>
</tr>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=12 %}
</td>
<td>{{ site.data.people[12].full_name }}</td>
@@ -44,7 +44,7 @@
<td class="text-nowrap text-muted">April 8, 2019</td>
</tr>
<tr>
<td class="w-1p">
<td class="w-1">
{% include ui/avatar.html person-id=19 %}
</td>
<td>{{ site.data.people[19].full_name }}</td>
pages/_includes/cards/feed-card.html
+4 -4
View File
@@ -18,7 +18,7 @@
{% endif %}
{% if include.feed %}
<div class="row row-xs">
<div class="row row-sm">
{% if include.feed == 1 %}
<div class="col-6 mb-2">
<div class="media media-2x1 rounded">
@@ -61,7 +61,7 @@
<div class="media media-2x1 mb-2 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[7].file }})"></a>
</div>
<div class="row row-xs">
<div class="row row-sm">
<div class="col-6">
<div class="media rounded">
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[8].file }})"></a>
@@ -109,7 +109,7 @@
</div>
</div>
<div class="col-6">
<div class="row row-xs">
<div class="row row-sm">
<div class="col-6">
<div class="media mb-2 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[16].file }})"></a>
@@ -140,7 +140,7 @@
</div>
</div>
<div class="col-6">
<div class="row row-xs">
<div class="row row-sm">
<div class="col-6">
<div class="media mb-2 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[21].file }})"></a>
pages/_includes/cards/forgot-password.html
+18
View File
@@ -0,0 +1,18 @@
<form class="card card-md" action="{{ site.base }}" method="get">
<div class="card-body">
<h2 class="mb-5 text-center">Forgot password</h2>
<p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
<div class="mb-3">
<label class="form-label">Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary btn-block">Send me new password</button>
</div>
</div>
</form>
<div class="text-center text-muted">
Forget it, <a href="{{ site.base }}/sign-in.html">send me back</a> to the sign in screen.
</div>
pages/_includes/cards/forgot.html
-18
View File
@@ -1,18 +0,0 @@
<form class="card" action="" method="post">
<div class="card-body p-5">
<div class="card-title">Forgot password</div>
<p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
<div class="mb-2">
<label class="form-label" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary btn-block">Send me new password</button>
</div>
</div>
</form>
<div class="text-center text-muted">
Forget it, <a href="{{ site.base }}/login.html">send me back</a> to the sign in screen.
</div>
pages/_includes/cards/invoices.html
+13 -18
View File
@@ -5,7 +5,7 @@
<div class="card-body border-bottom py-3">
<div class="d-flex">
<div class="mb-0">
<div class="text-muted">
Show
<div class="mx-2 d-inline-block">
<input type="text" class="form-control form-control-sm" value="8" size="3">
@@ -13,7 +13,7 @@
entries
</div>
<div class="mb-0 ml-auto">
<div class="ml-auto text-muted">
Search:
<div class="ml-2 d-inline-block">
<input type="text" class="form-control form-control-sm">
@@ -26,15 +26,14 @@
<table class="table card-table table-vcenter text-nowrap datatable">
<thead>
<tr>
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
<th class="w-1p">No. {% include ui/icon.html icon="chevron-up" class="icon-sm text-dark icon-thick" %}</th>
<th>Invoice Subject {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>Client {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>VAT No. {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>Created {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>Status {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>Price {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th></th>
<th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
<th class="w-1">No. {% include ui/icon.html icon="chevron-up" class="icon-sm text-dark icon-thick" %}</th>
<th>Invoice Subject {% include ui/icon.html icon="code" %}</th>
<th>Client {% include ui/icon.html icon="code" %}</th>
<th>VAT No. {% include ui/icon.html icon="code" %}</th>
<th>Created {% include ui/icon.html icon="code" %}</th>
<th>Status {% include ui/icon.html icon="code" %}</th>
<th>Price {% include ui/icon.html icon="code" %}</th>
<th></th>
</tr>
</thead>
@@ -61,21 +60,17 @@
<td>{{ invoice.price }}</td>
<td class="text-right">
<button class="btn btn-secondary btn-sm align-text-top">Manage</button>
<span class="dropdown ml-1">
<button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
{% include ui/dropdown-menu.html %}
<button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">Actions</button>
{% include ui/dropdown-menu.html right=true %}
</span>
</td>
<td>
{% include ui/icon.html icon="edit" class="icon-sm float-right" %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="card-footer d-flex align-items-center border-top-0">
<div class="card-footer d-flex align-items-center">
<p class="m-0 text-muted">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
{% include ui/pagination.html class="m-0 ml-auto" %}
</div>
pages/_includes/cards/login.html
-33
View File
@@ -1,33 +0,0 @@
<form class="card" action="" method="get">
<div class="card-body p-6">
<div class="card-title">Login to your account</div>
<div class="mb-2">
<label class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter email" autocomplete="off">
</div>
<div class="mb-2">
<a href="{{ site.base }}/forgot-password.html" class="float-right small">I forgot password</a>
<label class="form-label">
Password
</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" autocomplete="off">
</div>
<div class="mb-2">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" {{ site.base }}/>
<span class="custom-control-label">Remember me</span>
</label>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
</div>
</form>
<div class="text-center text-muted">
Don't have account yet? <a href="{{ site.base }}/register.html">Sign up</a>
</div>
pages/_includes/cards/most-visited-pages.html
+14 -8
View File
@@ -4,22 +4,28 @@
</div>
<div class="table-responsive">
<table class="table card-table table-vcenter">
<thead>
<tr>
<th colspan="2">Page name</th>
<th>Page name</th>
<th>Visitors</th>
<th>Unique page visits</th>
<th>Unique</th>
<th colspan="2">Bounce rate</th>
</tr>
</thead>
{% for page in site.data.pages %}
{% assign data = page.data | join: ',' %}
<tr>
<td>{{ page.uri }}</td>
<td><a href="#" class="text-muted">{% include ui/icon.html icon="link" %}</a></td>
<td>{{ page.visitors | format_number }}</td>
<td>{{ page.unique | format_number }}</td>
<td>{{ page.bounce-rate }}</td>
<td>
{{ page.uri }}
<a href="#" class="link-secondary ml-2">{% include ui/icon.html icon="link" %}</a>
</td>
<td class="text-muted">{{ page.visitors | format_number }}</td>
<td class="text-muted">{{ page.unique | format_number }}</td>
<td class="text-muted">{{ page.bounce-rate }}</td>
<td class="text-right">
{% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" wide=true %}
{% include ui/sparkline.html type="line" data=data %}
</td>
</tr>
{% endfor %}
pages/_includes/cards/music/tracks-list.html
+5 -2
View File
@@ -21,10 +21,13 @@
{{ track.duration_ms | miliseconds_to_minutes }}
</div>
<div class="col-auto">
{% include ui/icon.html icon="heart" %}
<a href="#" class="link-secondary">{% include ui/icon.html icon="heart" %}</a>
</div>
<div class="col-auto">
{% include ui/icon.html icon="more-horizontal" %}
<div class="dropdown">
<a href="#" class="link-secondary" data-toggle="dropdown">{% include ui/icon.html icon="more-horizontal" %}</a>
{% include ui/dropdown-menu.html right=true %}
</div>
</div>
</div>
</div>
pages/_includes/cards/order-statistics.html
+22 -20
View File
@@ -1,27 +1,29 @@
<div class="card">
<div class="card-body">
<div class="card-body">
<div>Total orders</div>
<div>Total orders</div>
<div class="d-flex align-items-baseline mb-3">
<div class="h1 mb-0 mr-2">2,137</div>
<div class="mr-auto">{% include ui/trending.html value=7 %}</div>
</div>
<div class="d-flex align-items-baseline mb-3">
<div class="h1 mb-0 mr-2">2,137</div>
<div class="mr-auto">{% include ui/trending.html value=7 %}</div>
</div>
{% include ui/progress.html values="40,15,25,15,5" class="mb-4" %}
{% include ui/progress.html values="40,15,25,15,5" class="mb-4" %}
<ul class="list-unstyled">
{% for item in site.data.orders %}
<li class="row row-sm lh-sm align-items-center mb-2">
<div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
<div class="col">
{{ item.title }}
<div class="text-h6 text-muted">{{ item.subtitle }}</div>
</div>
<div class="col-auto small text-muted"><strong class="text-body">{{ forloop.index | random_number: 500, 2000 | intcomma }}</strong> orders</div>
</li>
{% endfor %}
</ul>
</div>
<ul class="list-unstyled">
{% for item in site.data.orders %}
<li class="row row-sm lh-sm align-items-center mb-2">
<div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
<div class="col">
{{ item.title }}
<div class="text-h6 text-muted">{{ item.subtitle }}</div>
</div>
<div class="col-auto small text-muted"><strong class="text-body">{{ forloop.index | random_number: 500, 2000
| intcomma }}</strong> orders
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
pages/_includes/cards/pricing-card.html
+3 -3
View File
@@ -2,12 +2,12 @@
{% assign available-features = include.features | default: '1000' | split: '' %}
<div class="card">
{% if include.featured-color %}
<div class="card-status bg-{{ include.featured-color }}"></div>
{% include ui/ribbon.html color=include.featured-color bookmark=true top=true %}
{% endif %}
<div class="card-body text-center">
<div class="text-uppercase text-muted">{{ include.category | default: 'Enterprise' }}</div>
<div class="h1 my-4">${{ include.price | default: '79' }}</div>
<div class="h1 my-3">${{ include.price | default: '79' }}</div>
<ul class="list-unstyled lh-lg">
<li><strong>{{ include.users | default: 10 }}</strong> Users</li>
@@ -23,7 +23,7 @@
{% endfor %}
</ul>
<div class="text-center mt-6">
<div class="text-center mt-4">
<a href="#" class="btn btn-{{ include.featured-color | default: 'secondary' }} btn-block">Choose plan</a>
</div>
</div>
pages/_includes/cards/profile-2.html
+26 -26
View File
@@ -1,29 +1,29 @@
<div class="card">
<div class="card-body">
<div class="media">
{% include ui/avatar.html person-id=8 size="xl" %}
<div class="media-body ml-4">
<h3>{{ site.data.people[20].first_name }} {{ site.data.people[20].last_name }}</h3>
<p class="text-muted mb-0">{{ site.data.people[20].job_title }}</p>
<div class="card-body">
<div class="media">
{% include ui/avatar.html person-id=8 size="xl" %}
<div class="media-body ml-4">
<h3>{{ site.data.people[20].first_name }} {{ site.data.people[20].last_name }}</h3>
<p class="text-muted mb-0">{{ site.data.people[20].job_title }}</p>
<ul class="social-links list-inline mb-0 mt-2">
<li class="list-inline-item">
<a href="#" title="Facebook" data-toggle="tooltip">
{% include ui/icon.html icon="facebook" %}
</a>
</li>
<li class="list-inline-item">
<a href="#" title="Twitter" data-toggle="tooltip">
{% include ui/icon.html icon="twitter" %}
</a>
</li>
<li class="list-inline-item">
<a href="#" title="1234567890" data-toggle="tooltip">
{% include ui/icon.html icon="phone" %}
</a>
</li>
</ul>
</div>
</div>
</div>
<ul class="social-links list-inline mb-0 mt-2">
<li class="list-inline-item">
<a href="#" title="Facebook" data-toggle="tooltip">
{% include ui/icon.html icon="facebook" %}
</a>
</li>
<li class="list-inline-item">
<a href="#" title="Twitter" data-toggle="tooltip">
{% include ui/icon.html icon="twitter" %}
</a>
</li>
<li class="list-inline-item">
<a href="#" title="1234567890" data-toggle="tooltip">
{% include ui/icon.html icon="phone" %}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
pages/_includes/cards/profile-edit-big.html
+70 -70
View File
@@ -1,76 +1,76 @@
<form class="card">
<div class="card-body">
<h3 class="card-title">Edit Profile</h3>
<div class="card-body">
<h3 class="card-title">Edit Profile</h3>
<div class="row">
<div class="col-md-5">
<div class="mb-2">
<label class="form-label">Company</label>
<input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc.">
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="mb-2">
<label class="form-label">Username</label>
<input type="text" class="form-control" placeholder="Username" value="michael23">
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="mb-2">
<label class="form-label">Email address</label>
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="mb-2">
<label class="form-label">First Name</label>
<input type="text" class="form-control" placeholder="Company" value="Chet">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="mb-2">
<label class="form-label">Last Name</label>
<input type="text" class="form-control" placeholder="Last Name" value="Faker">
</div>
</div>
<div class="col-md-12">
<div class="mb-2">
<label class="form-label">Address</label>
<input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia">
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="mb-2">
<label class="form-label">City</label>
<input type="text" class="form-control" placeholder="City" value="Melbourne">
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="mb-2">
<label class="form-label">Postal Code</label>
<input type="number" class="form-control" placeholder="ZIP Code">
</div>
</div>
<div class="col-md-5">
<div class="mb-2">
<label class="form-label">Country</label>
<select class="form-select">
<option value="">Germany</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="mb-2 mb-0">
<label class="form-label">About Me</label>
<textarea rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Oh so, your weak rhyme
<div class="row">
<div class="col-md-5">
<div class="mb-2">
<label class="form-label">Company</label>
<input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc.">
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="mb-2">
<label class="form-label">Username</label>
<input type="text" class="form-control" placeholder="Username" value="michael23">
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="mb-2">
<label class="form-label">Email address</label>
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="mb-2">
<label class="form-label">First Name</label>
<input type="text" class="form-control" placeholder="Company" value="Chet">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="mb-2">
<label class="form-label">Last Name</label>
<input type="text" class="form-control" placeholder="Last Name" value="Faker">
</div>
</div>
<div class="col-md-12">
<div class="mb-2">
<label class="form-label">Address</label>
<input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia">
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="mb-2">
<label class="form-label">City</label>
<input type="text" class="form-control" placeholder="City" value="Melbourne">
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="mb-2">
<label class="form-label">Postal Code</label>
<input type="number" class="form-control" placeholder="ZIP Code">
</div>
</div>
<div class="col-md-5">
<div class="mb-2">
<label class="form-label">Country</label>
<select class="form-select">
<option value="">Germany</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="mb-2 mb-0">
<label class="form-label">About Me</label>
<textarea rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Oh so, your weak rhyme
You doubt I'll bother, reading into it
I'll probably won't, left to my own devices
But that's the difference in our opinions.</textarea>
</div>
</div>
</div>
</div>
<div class="card-footer text-right">
<button type="submit" class="btn btn-primary">Update Profile</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer text-right">
<button type="submit" class="btn btn-primary">Update Profile</button>
</div>
</form>
pages/_includes/cards/profile-edit.html
+33 -33
View File
@@ -1,39 +1,39 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">My Profile</h3>
</div>
<div class="card-body">
<form>
<div class="row mb-3">
<div class="col-auto">
<span class="avatar avatar-lg" style="background-image: url({{ site.data.people[11].photo }})"></span>
</div>
<div class="col">
<div class="mb-2">
<label class="form-label">Email-Address</label>
<input class="form-control" placeholder="your-email@domain.com"/>
</div>
</div>
</div>
<div class="card-header">
<h3 class="card-title">My Profile</h3>
</div>
<div class="card-body">
<form>
<div class="row mb-3">
<div class="col-auto">
<span class="avatar avatar-lg" style="background-image: url({{ site.data.people[11].photo }})"></span>
</div>
<div class="col">
<div class="mb-2">
<label class="form-label">Email-Address</label>
<input class="form-control" placeholder="your-email@domain.com"/>
</div>
</div>
</div>
<div class="mb-2">
<label class="form-label">Bio</label>
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
</div>
<div class="mb-2">
<label class="form-label">Bio</label>
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
</div>
<div class="mb-2">
<label class="form-label">Email-Address</label>
<input class="form-control" placeholder="your-email@domain.com"/>
</div>
<div class="mb-2">
<label class="form-label">Email-Address</label>
<input class="form-control" placeholder="your-email@domain.com"/>
</div>
<div class="mb-2">
<label class="form-label">Password</label>
<input type="password" class="form-control" value="password"/>
</div>
<div class="mb-2">
<label class="form-label">Password</label>
<input type="password" class="form-control" value="password"/>
</div>
<div class="form-footer">
<button class="btn btn-primary btn-block">Save</button>
</div>
</form>
</div>
<div class="form-footer">
<button class="btn btn-primary btn-block">Save</button>
</div>
</form>
</div>
</div>
pages/_includes/cards/profile-timeline.html
+96 -96
View File
@@ -1,102 +1,102 @@
<div class="card">
<div class="card-header">
<div class="input-group">
<input type="text" class="form-control" placeholder="Message">
<div class="input-group-append">
{% include ui/button.html icon="camera" icon-only=true color="secondary" %}
</div>
</div>
</div>
<ul class="list-group card-list-group">
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=5 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">4 min</small>
<h4>{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h4>
</div>
<div class="card-header">
<div class="input-group">
<input type="text" class="form-control" placeholder="Message">
<div class="input-group-append">
{% include ui/button.html icon="camera" icon-only=true color="secondary" %}
</div>
</div>
</div>
<ul class="list-group card-list-group">
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=5 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">4 min</small>
<h4>{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h4>
</div>
<div>
Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
</div>
<div>
Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
</div>
<ul class="list-unstyled">
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=8 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[7].first_name }} {{ site.data.people[7].last_name }}: </strong>
Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
</div>
</li>
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=10 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[9].first_name }} {{ site.data.people[9].last_name }}: </strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
amet risus.
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=11 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">12 min</small>
<h4>{{ site.data.people[10].first_name }} {{ site.data.people[10].last_name }}</h4>
</div>
<div>
Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</li>
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=15 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">34 min</small>
<h4>{{ site.data.people[14].first_name }} {{ site.data.people[14].last_name }}</h4>
</div>
<ul class="list-unstyled">
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=8 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[7].first_name }} {{ site.data.people[7].last_name }}: </strong>
Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
</div>
</li>
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=10 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[9].first_name }} {{ site.data.people[9].last_name }}: </strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
amet risus.
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=11 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">12 min</small>
<h4>{{ site.data.people[10].first_name }} {{ site.data.people[10].last_name }}</h4>
</div>
<div>
Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</li>
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=15 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">34 min</small>
<h4>{{ site.data.people[14].first_name }} {{ site.data.people[14].last_name }}</h4>
</div>
<div>
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</div>
<div>
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</div>
<ul class="list-unstyled">
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=6 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[5].first_name }} {{ site.data.people[5].last_name }}: </strong>
Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
<ul class="list-unstyled">
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=6 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[5].first_name }} {{ site.data.people[5].last_name }}: </strong>
Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
pages/_includes/cards/profile.html
+10 -10
View File
@@ -1,14 +1,14 @@
<div class="card">
<div class="card-body text-center">
<h2 class="mb-3">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h2>
<div class="card-body text-center">
<h2 class="mb-3">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h2>
<p class="mb-4">
Big belly rude boy, million dollar hustler. Unemployed.
</p>
<p class="mb-4">
Big belly rude boy, million dollar hustler. Unemployed.
</p>
<button class="btn btn-outline-primary btn-sm">
{% include ui/icon.html icon="twitter" %}
Follow
</button>
</div>
<button class="btn btn-outline-primary btn-sm">
{% include ui/icon.html icon="twitter" %}
Follow
</button>
</div>
</div>
pages/_includes/cards/register.html
-32
View File
@@ -1,32 +0,0 @@
<form class="card" action="" method="post">
<div class="card-body p-6">
<div class="card-title">Create new account</div>
<div class="mb-2">
<label class="form-label">Name</label>
<input type="text" class="form-control" placeholder="Enter name">
</div>
<div class="mb-2">
<label class="form-label">Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="mb-2">
<label class="form-label">Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="mb-2">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input"{{ site.base }}/>
<span class="custom-control-label">Agree the <a href="terms.html">terms and policy</a></span>
</label>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary btn-block">Create new account</button>
</div>
</div>
</form>
<div class="text-center text-muted">
Already have account? <a href="{{ site.base }}/login.html">Sign in</a>
</div>
pages/_includes/cards/ribbon.html
+5 -5
View File
@@ -3,11 +3,11 @@
<div class="card">
<div class="card-body{% unless include.lorem %} h-8{% endunless %}">
{% if include.lorem %}
<h3 class="card-title">Card with ribbon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
{% endif %}
{% if include.lorem %}
<h3 class="card-title">Card with ribbon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
{% endif %}
</div>
<div class="ribbon{% if include.top %} ribbon-top{% endif %}{% if include.left %} ribbon-left{% endif %}{% if include.bottom %} ribbon-bottom{% endif %}{% if include.bookmark %} ribbon-bookmark{% endif %}{% if include.color %} bg-{{ include.color }}{% endif %}">{% if include.text %}{{ include.text }}{% else %}{% include ui/icon.html icon="star" class="icon-filled" use-svg=true %}{% endif %}</div>
{% include ui/ribbon.html color=include.color top=include.top left=include.left bottom=include.bottom bookmark=include.bookmark %}
</div>
pages/_includes/cards/sign-in.html
+42
View File
@@ -0,0 +1,42 @@
<form class="card card-md" action="{{ site.base }}" method="get">
<div class="card-body">
<h2 class="mb-5 text-center">Login to your account</h2>
<div class="mb-3">
<label class="form-label">Email address</label>
<input type="email" class="form-control" placeholder="Enter email" autocomplete="off">
</div>
<div class="mb-2">
<label class="form-label">
Password
<span class="form-label-description">
<a href="{{ site.base }}/forgot-password.html">I forgot password</a>
</span>
</label>
{% include ui/form/input-group.html type="password" append-button="eye:Show password" flat=true placeholder="Password" %}
</div>
<div class="mb-2">
<label class="form-check">
<input type="checkbox" class="form-check-input"/>
<span class="form-check-label">Remember me on this device</span>
</label>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
</div>
{% include ui/hr.html text="or" %}
<div class="card-body">
<div class="btn-list">
{% include ui/button.html color="secondary" block=true icon="brand/github" icon-color="github" text="Login with Github" %}
{% include ui/button.html color="secondary" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
</div>
</div>
</form>
<div class="text-center text-muted">
Don't have account yet? <a href="{{ site.base }}/sign-up.html" tabindex="-1">Sign up</a>
</div>
pages/_includes/cards/sign-up.html
+32
View File
@@ -0,0 +1,32 @@
<form class="card card-md" action="{{ site.base }}" method="get">
<div class="card-body">
<h2 class="mb-5 text-center">Create new account</h2>
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" class="form-control" placeholder="Enter name">
</div>
<div class="mb-3">
<label class="form-label">Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
{% include ui/form/input-group.html type="password" append-button="eye:Show password" flat=true placeholder="Password" %}
</div>
<div class="mb-3">
<label class="form-check">
<input type="checkbox" class="form-check-input"/>
<span class="form-check-label">Agree the <a href="{{ site.base }}/terms-of-service.html" tabindex="-1">terms and policy</a>.</span>
</label>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary btn-block">Create new account</button>
</div>
</div>
</form>
<div class="text-center text-muted">
Already have account? <a href="{{ site.base }}/sign-in.html" tabindex="-1">Sign in</a>
</div>
pages/_includes/cards/small-stats-3.html
+7 -7
View File
@@ -1,9 +1,9 @@
<div class="card">
<div class="card-body p-2 text-center">
<div class="text-right {% if include.percentage > 0 %}text-green{% elsif include.percentage < 0 %}text-red{% endif %}">
{% include ui/trending.html value=include.percentage %}
</div>
<div class="h1 m-0">{{ include.number }}</div>
<div class="text-muted mb-4">{{ include.title }}</div>
</div>
<div class="card-body p-2 text-center">
<div class="text-right {% if include.percentage > 0 %}text-green{% elsif include.percentage < 0 %}text-red{% endif %}">
{% include ui/trending.html value=include.percentage %}
</div>
<div class="h1 m-0">{{ include.number }}</div>
<div class="text-muted mb-4">{{ include.title }}</div>
</div>
</div>
pages/_includes/cards/small-stats.html
+27 -27
View File
@@ -1,33 +1,33 @@
{% assign chart-type = include.chart-type | default: 'line' %}
{% assign chart-position = include.chart-position | default: 'right' %}
<div class="card">
<div class="card-body p-3 d-flex align-items-center">
{% if include.icon %}
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include ui/icon.html icon=include.icon %}</span>
{% elsif include.person-id %}
{% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %}
{% endif %}
<div class="card card-sm">
<div class="card-body d-flex align-items-center">
{% if include.icon %}
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include ui/icon.html icon=include.icon %}</span>
{% elsif include.person-id %}
{% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %}
{% endif %}
{% if include.chart-data and chart-position == "left" %}
<div class="mr-3">
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
</div>
{% endif %}
{% if include.chart-data and chart-position == "left" %}
<div class="mr-3">
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
</div>
{% endif %}
<div class="mr-3 lh-sm">
<div class="strong">
{{ include.count | default: 1700 | format_number }} {{ include.subtitle }}
{% if include.small-icon %}
{% include ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
{% endif %}
</div>
<div class="text-muted">{{ include.description | default: "Users" }}</div>
</div>
<div class="mr-3 lh-sm">
<div class="strong">
{{ include.count | default: 1700 | format_number }} {{ include.subtitle }}
{% if include.small-icon %}
{% include ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
{% endif %}
</div>
<div class="text-muted">{{ include.description | default: "Users" }}</div>
</div>
{% if include.chart-data and chart-position=="right" %}
<div class="ml-auto">
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
</div>
{% endif %}
</div>
{% if include.chart-data and chart-position=="right" %}
<div class="ml-auto">
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
</div>
{% endif %}
</div>
</div>
pages/_includes/cards/social-traffic.html
+75 -46
View File
@@ -1,48 +1,77 @@
<div class="card">
<div class="card-header">
<h4 class="card-title">Social Media Traffic</h4>
</div>
<table class="table card-table table-vcenter">
<tr>
<th>Network</th>
<th colspan="2">Visitors</th>
</tr>
<tr>
<td>Instagram</td>
<td>3,550</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 76%"></div>
</div>
</td>
</tr>
<tr>
<td>Twitter</td>
<td>1,789</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 62%"></div>
</div>
</td>
</tr>
<tr>
<td>Facebook</td>
<td>1,245</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 46%"></div>
</div>
</td>
</tr>
<tr>
<td>Pinterest</td>
<td>95</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 6%"></div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="card-header">
<h4 class="card-title">Social Media Traffic</h4>
</div>
<table class="table card-table table-vcenter">
<thead>
<tr>
<th>Network</th>
<th colspan="2">Visitors</th>
</tr>
</thead>
<tr>
<td>Instagram</td>
<td>3,550</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 76%"></div>
</div>
</td>
</tr>
<tr>
<td>Twitter</td>
<td>1,789</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 62%"></div>
</div>
</td>
</tr>
<tr>
<td>Facebook</td>
<td>1,245</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 46%"></div>
</div>
</td>
</tr>
<tr>
<td>Pinterest</td>
<td>854</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 26%"></div>
</div>
</td>
</tr>
<tr>
<td>VK</td>
<td>650</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 20%"></div>
</div>
</td>
</tr>
<tr>
<td>Pinterest</td>
<td>95</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 6%"></div>
</div>
</td>
</tr>
<tr>
<td>Pinterest</td>
<td>95</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 6%"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
pages/_includes/cards/sponsor.html
+3
View File
@@ -0,0 +1,3 @@
<a href="{{ site.sponsor_url }}" class="card card-sponsor" target="_blank" style="background-image: url({{ site.base }}/static/sponsor-banner-homepage.svg)">
<div class="card-body"></div>
</a>
pages/_includes/cards/store-product-grid.html
+20
View File
@@ -0,0 +1,20 @@
<div class="row">
{% for product in site.data.products%}
<div class="col-lg-3">
<div class="card p-3">
<img src="{{ site.base }}/img/products/{{ product.image }}" alt="" class="mb-3">
<h3 class="mb-0">{{product.name}}</h3>
<div class="text-muted mb-2">{{product.producer}}</div>
<h1 class="text-azure">{{product.price}}$</h1>
<div class="d-flex justify-content-between align-items-center">
{% include ui/stars.html %}
<a href="#" class="btn btn-primary">Add to cart</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="d-flex">
{% include parts/pagination.html class="ml-auto" %}
</div>
pages/_includes/cards/subscribe.html
+31 -31
View File
@@ -1,35 +1,35 @@
{% assign person-id = include.person-id | default: 0 %}
{% assign person = site.data.people[person-id] %}
<div class="card">
<div class="card-body">
<div class="row row-sm align-items-center">
<div class="col-auto">
{% include ui/avatar.html person=person size="lg" %}
</div>
<div class="col">
<h4 class="card-title m-0">
<a href="#">{{ person.full_name }}</a>
</h4>
<div class="text-muted">
Working in {{ person.company }}
</div>
<div class="small mt-1">
<span class="text-success">●</span> Online
</div>
</div>
<div class="col-auto">
<a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block">
Subscribe
</a>
</div>
<div class="col-auto">
<div class="dropdown">
<button class="btn-options" type="button" data-toggle="dropdown">
{% include ui/icon.html icon="more-vertical" %}
</button>
{% include ui/dropdown-menu.html right=true %}
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row row-sm align-items-center">
<div class="col-auto">
{% include ui/avatar.html person=person size="lg" %}
</div>
<div class="col">
<h4 class="card-title m-0">
<a href="#">{{ person.full_name }}</a>
</h4>
<div class="text-muted">
Working in {{ person.company }}
</div>
<div class="small mt-1">
<span class="text-success">●</span> Online
</div>
</div>
<div class="col-auto">
<a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block">
Subscribe
</a>
</div>
<div class="col-auto">
<div class="dropdown">
<button class="btn-options" type="button" data-toggle="dropdown">
{% include ui/icon.html icon="more-vertical" %}
</button>
{% include ui/dropdown-menu.html right=true %}
</div>
</div>
</div>
</div>
</div>
pages/_includes/cards/table-users.html
+2 -11
View File
@@ -7,8 +7,7 @@
<th>Usage</th>
<th class="text-center">Payment</th>
<th>Activity</th>
<th class="text-center">Satisfaction</th>
<th class="text-center"><i class="icon-settings"></i></th>
<th class="w-1">Satisfaction</th>
</tr>
</thead>
<tbody>
@@ -20,7 +19,7 @@
{% assign percentage_color = percentage | number_color %}
<tr>
<td class="text-center w-1p">
<td class="text-center w-1">
{% include ui/avatar.html person-id=person.id %}
</td>
<td>
@@ -59,14 +58,6 @@
<!-- </div>-->
{% include ui/sparkline.html percentage=percentage type="pie" %}
</td>
<td class="text-center">
<div class="dropdown">
<a class="btn-icon mx-2" data-toggle="dropdown">
{% include ui/icon.html icon="more-vertical" %}
</a>
{% include ui/dropdown-menu.html %}
</div>
</td>
</tr>
{% endfor %}
</tbody>
pages/_includes/cards/tasks.html
+37 -33
View File
@@ -1,35 +1,39 @@
<div class="card">
<div class="card-header">
<h4 class="card-title">Tasks</h4>
</div>
<div class="table-responsive">
<table class="table card-table table-vcenter">
{% for task in site.data.tasks %}
<tr>
<td class="w-1 pr-0">
<label class="custom-control custom-checkbox m-0">
<input type="checkbox" class="custom-control-input" name="" value=""{% if task.checked %} checked{% endif %}>
<span class="custom-control-label"></span>
</label>
</td>
<td class="w-100">
<a href="#" class="text-reset">{{ task.name }}</a>
</td>
<td class="text-nowrap text-muted">
{% include ui/icon.html icon="calendar" %}
{{ forloop.index | random_date: "2019-01-01", "2018-01-01" | date: '%B %d, %Y' }}
</td>
<td class="text-nowrap">
<a href="#" class="text-muted">{% include ui/icon.html icon="check" %} {{ forloop.index | random_number: 0, 6 }}/{{ forloop.index | random_number: 5, 10 }}</a>
</td>
<td class="text-nowrap">
<a href="#" class="text-muted">{% include ui/icon.html icon="message-square" %} {{ forloop.index | random_number: 0, 12 }}</a>
</td>
<td>
{% include ui/avatar.html person-id=forloop.index size="sm" %}
</td>
</tr>
{% endfor %}
</table>
</div>
<div class="card-header">
<h4 class="card-title">Tasks</h4>
</div>
<div class="table-responsive">
<table class="table card-table table-vcenter">
{% for task in site.data.tasks %}
<tr>
<td class="w-1 pr-0">
<label class="form-check m-0">
<input type="checkbox" class="form-check-input"{% if task.checked %} checked{% endif %}>
<span class="form-check-label"></span>
</label>
</td>
<td class="w-100">
<a href="#" class="text-reset">{{ task.name }}</a>
</td>
<td class="text-nowrap text-muted">
{% include ui/icon.html icon="calendar" %}
{{ forloop.index | random_date: "2019-01-01", "2018-01-01" | date: '%B %d, %Y' }}
</td>
<td class="text-nowrap">
<a href="#" class="text-muted">
{% include ui/icon.html icon="check" %}
{{ forloop.index | random_number: 0, 6 }}/{{ forloop.index | random_number: 5, 10 }}
</a>
</td>
<td class="text-nowrap">
<a href="#" class="text-muted">
{% include ui/icon.html icon="message-square" %} {{ forloop.index | random_number: 0, 12 }}</a>
</td>
<td>
{% include ui/avatar.html person-id=forloop.index size="sm" %}
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
pages/_includes/cards/timeline.html
+1 -1
View File
@@ -54,7 +54,7 @@
<div class="list-timeline-time">3 days ago</div>
<p class="list-timeline-title">+2 New photos</p>
<div class="mt-3">
<div class="row row-xs">
<div class="row row-sm">
<div class="col-6">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url({% include ui/image.html id=6 %})"></a>
pages/_includes/cards/user-card-bg.html
+1 -1
View File
@@ -1,7 +1,7 @@
{% assign person-id = include.person-id | default: 0 %}
{% assign person = site.data.people[person-id] %}
<a class="card card-link" href="#">
<div class="card-cover text-center{% if include.blurred %} card-cover-blurred{% endif %}" style="background-image: url({% include ui/image.html id=person-id %})">
<div class="card-cover text-center{% if include.blurred %} card-cover-blurred{% endif %}" style="background-image: url({%include ui/image.html id=person-id %})">
{% include ui/avatar.html size="xl" person=person thumb=true %}
</div>
<div class="card-body text-center">
pages/_includes/cards/user-card.html
+9 -9
View File
@@ -1,13 +1,13 @@
{% assign person-id = include.person-id | default: 0 %}
{% assign person = site.data.people[person-id] %}
<a class="card card-link" href="#">
<div class="card-body">
<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
{% include ui/avatar.html person=person class="rounded" %}
</div>
<div class="lh-sm">
<div class="strong">{{ person.full_name }}</div>
<div class="text-muted">{{ person.job_title }}</div>
</div>
</div>
<div class="card-body">
<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
{% include ui/avatar.html person=person class="rounded" %}
</div>
<div class="lh-sm">
<div class="strong">{{ person.full_name }}</div>
<div class="text-muted">{{ person.job_title }}</div>
</div>
</div>
</a>
pages/_includes/cards/user-info.html
+27 -27
View File
@@ -2,31 +2,31 @@
{% assign person = site.data.people[person-id] %}
<div class="card">
<div class="card-body">
<div class="card-title">{{ include.title | default: 'Basic info' }}</div>
<div class="mb-2">
{% include ui/icon.html icon="book" class="mr-2 text-muted" %}
Went to: <strong>{{ person.university }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="briefcase" class="mr-2 text-muted" %}
Worked at: <strong>{{ person.company }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="home" class="mr-2 text-muted" %}
Lives in: <strong>{{ person.city }}, {{ person.country }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="map-pin" class="mr-2 text-muted" %}
From: <strong>{% include ui/flag.html flag=person.country_code %} {{ person.country }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="calendar" class="mr-2 text-muted" %}
Birth date: <strong>{{ person.birth_date }}</strong>
</div>
<div>
{% include ui/icon.html icon="clock" class="mr-2 text-muted" %}
Time zone: <strong>{{ person.time_zone }}</strong>
</div>
</div>
<div class="card-body">
<div class="card-title">{{ include.title | default: 'Basic info' }}</div>
<div class="mb-2">
{% include ui/icon.html icon="book" class="mr-2 text-muted" %}
Went to: <strong>{{ person.university }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="briefcase" class="mr-2 text-muted" %}
Worked at: <strong>{{ person.company }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="home" class="mr-2 text-muted" %}
Lives in: <strong>{{ person.city }}, {{ person.country }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="map-pin" class="mr-2 text-muted" %}
From: <strong>{% include ui/flag.html flag=person.country_code %} {{ person.country }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="calendar" class="mr-2 text-muted" %}
Birth date: <strong>{{ person.birth_date }}</strong>
</div>
<div>
{% include ui/icon.html icon="clock" class="mr-2 text-muted" %}
Time zone: <strong>{{ person.time_zone }}</strong>
</div>
</div>
</div>
pages/_includes/cards/users-list-2.html
+20 -20
View File
@@ -1,24 +1,24 @@
{% assign limit = include.limit | default: 10 %}
{% assign offset = include.offset | default: 0 %}
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ include.title | default: 'Top users' }}</h3>
</div>
<div class="card-body">
<div class="row mb-n3">
{% assign colors = 'green,red,yellow,x,x' | split: ',' %}
{% for person in site.data.people limit: limit offset: offset %}
{% assign color = forloop.index | plus: 5 | random_item: colors %}
<div class="col-6 row row-sm mb-3 align-items-center">
<a href="#" class="col-auto">
{% include ui/avatar.html person=person status=color %}
</a>
<div class="col text-truncate">
<a href="#" class="text-body d-block text-truncate">{{ person.full_name }}</a>
<small class="d-block text-muted text-truncate mt-n1">{{ forloop.index | random_date_ago: 6 | timeago }}</small>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="card-header">
<h3 class="card-title">{{ include.title | default: 'Top users' }}</h3>
</div>
<div class="card-body">
<div class="row mb-n3">
{% assign colors = 'green,red,yellow,x,x' | split: ',' %}
{% for person in site.data.people limit: limit offset: offset %}
{% assign color = forloop.index | plus: 5 | random_item: colors %}
<div class="col-6 row row-sm mb-3 align-items-center">
<a href="#" class="col-auto">
{% include ui/avatar.html person=person status=color %}
</a>
<div class="col text-truncate">
<a href="#" class="text-body d-block text-truncate">{{ person.full_name }}</a>
<small class="d-block text-muted text-truncate mt-n1">{{ forloop.index | random_date_ago: 6 | timeago }}</small>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
pages/_includes/cards/users-list.html
+32 -32
View File
@@ -3,36 +3,36 @@
{% assign hoverable = include.hoverable | default: false %}
{% assign checked-ids = include.checked-ids | default: '3,5,6' | extract: ',' %}
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ include.title | default: 'Last commits' }}</h3>
</div>
<div class="list list-row{% if hoverable %} list-hoverable{% endif %}">
{% assign colors = 'green,red,yellow,x,x' | split: ',' %}
{% for person in site.data.people limit: limit offset: offset %}
{% assign color = forloop.index | plus: 5 | random_item: colors %}
<div class="list-item">
{% if include.checkbox %}
<div><input type="checkbox" class="form-check-input"{% if checked-ids contains forloop.index %} checked{% endif %}></div>
{% else %}
<div><span class="badge{% if color != 'x' %} bg-{{ color }}{% endif %}"></span></div>
{% endif %}
<a href="#">
{% include ui/avatar.html person=person %}
</a>
<div class="text-truncate">
<a href="#" class="text-body d-block">{{ person.full_name }}</a>
{% assign i = forloop.index | plus: offset %}
<small class="d-block text-muted text-truncate mt-n1">{{ site.data.commits[i].description }}</small>
</div>
{% if hoverable %}
{% if checked-ids contains forloop.index %}
{% assign star-color = 'text-yellow' %}
{% else %}
{% assign star-color = 'text-muted' %}
{% endif %}
<a href="#" class="list-item-actions{% if checked-ids contains forloop.index %} show{% endif %}">{% include ui/icon.html icon="star" class=star-color %}</a>
{% endif %}
</div>
{% endfor %}
</div>
<div class="card-header">
<h3 class="card-title">{{ include.title | default: 'Last commits' }}</h3>
</div>
<div class="list list-row{% if hoverable %} list-hoverable{% endif %}">
{% assign colors = 'green,red,yellow,x,x' | split: ',' %}
{% for person in site.data.people limit: limit offset: offset %}
{% assign color = forloop.index | plus: 5 | random_item: colors %}
<div class="list-item">
{% if include.checkbox %}
<div><input type="checkbox" class="form-check-input"{% if checked-ids contains forloop.index %} checked{% endif %}></div>
{% else %}
<div><span class="badge{% if color != 'x' %} bg-{{ color }}{% endif %}"></span></div>
{% endif %}
<a href="#">
{% include ui/avatar.html person=person %}
</a>
<div class="text-truncate">
<a href="#" class="text-body d-block">{{ person.full_name }}</a>
{% assign i = forloop.index | plus: offset %}
<small class="d-block text-muted text-truncate mt-n1">{{ site.data.commits[i].description }}</small>
</div>
{% if hoverable %}
{% if checked-ids contains forloop.index %}
{% assign star-color = 'text-yellow' %}
{% else %}
{% assign star-color = 'text-muted' %}
{% endif %}
<a href="#" class="list-item-actions{% if checked-ids contains forloop.index %} show{% endif %}">{% include ui/icon.html icon="star" class=star-color %}</a>
{% endif %}
</div>
{% endfor %}
</div>
</div>
pages/_includes/example.html
+32
View File
@@ -0,0 +1,32 @@
{% assign demo-code = code %}
{% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %}
{% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void(0)"' %}
<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 %}
{{ demo-code }}
{% if include.columns %}</div>{% endif %}
{% if include.wrapper %}</div>{% endif %}
</div>
</div>
{% assign code = code | strip %}
{% capture new_line %}
{% endcapture %}
{% assign code = code | replace_regex: "\n\n+", new_line %}
{% assign code = code | replace_regex: '<svg[^>]*>.*?<\/svg>', '<!-- SVG icon code -->' %}
{% assign code = code | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %}
{% assign code = code | replace_regex: 'src="([^"]+)"', 'src="..."' %}
{% assign code = code | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %}
{% assign code = code | replace_regex: '\{% hide %\}.*?\{% endhide %\}', '' %}
{% assign code = code | htmlbeautifier %}
<div class="example-code">
{% highlight html %}{{ code }}{% endhighlight %}
</div>
pages/_includes/forms/form-elements-1.html
+4 -4
View File
@@ -26,8 +26,8 @@
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div>
{% include parts/select.html %}
{% include parts/select.html label="Select multiple" multiple=true %}
{% include parts/form/select.html %}
{% include parts/form/select.html label="Select multiple" multiple=true %}
<div class="mb-3">
<label class="form-label">Input group</label>
@@ -59,8 +59,8 @@
</div>
</div>
{% include parts/input-icon.html %}
{% include parts/input-icon-separated.html %}
{% include parts/form/input-icon.html %}
{% include parts/form/input-icon-separated.html %}
<div class="mb-3">
pages/_includes/forms/form-elements-2.html
+4 -4
View File
@@ -24,20 +24,20 @@
<div class="mb-3">
<label class="form-label">Input with prepended text</label>
{% include ui/form/input-group.html prepend="https://tabler.io/users/" class="input-group-flat" input-class="pl-0" value="yourfancyusername" %}
{% include ui/form/input-group.html prepend="https://tabler.io/users/" flat=true input-class="pl-0" value="yourfancyusername" %}
</div>
<div class="mb-3">
<label class="form-label">Input with appended text</label>
{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" class="input-group-flat" value="yourfancydomain" %}
{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" flat=true value="yourfancydomain" %}
</div>
<div class="mb-3">
<label class="form-label">Input with appended link</label>
{% include ui/form/input-group.html append-link="Show password" class="input-group-flat" type="password" value="ultrastrongpassword" %}
{% include ui/form/input-group.html append-link="Show password" flat=true type="password" value="ultrastrongpassword" %}
</div>
<div class="mb-3">
<label class="form-label">Input with appended icon links</label>
{% include ui/form/input-group.html append-button="x:Clear search,sliders:Search settings,bell:Add notification" class="input-group-flat" %}
{% include ui/form/input-group.html append-button="x:Clear search,sliders:Search settings,bell:Add notification" flat=true %}
</div>
pages/_includes/forms/form-elements-3.html
+4 -4
View File
@@ -1,6 +1,6 @@
{% include parts/input-image.html %}
{% include parts/input-color.html %}
{% include parts/input-colorpicker.html %}
{% include parts/form/input-image.html %}
{% include parts/form/input-color.html %}
{% include parts/form/input-colorpicker.html %}
<div class="mb-3">
<label class="form-label">Validation States</label>
@@ -16,4 +16,4 @@
</div>
<label class="form-label">Form fieldset</label>
{% include parts/form-fieldset.html %}
{% include parts/form/fieldset.html %}
pages/_includes/forms/form-elements-4.html
+47 -3
View File
@@ -1,6 +1,50 @@
{% include parts/input-selectgroups.html %}
{% include parts/form-payments.html %}
{% include parts/form-project-manager.html %}
{% include parts/form/input-selectgroups.html %}
{% include parts/form/selectgroup-payments.html %}
{% include parts/form/selectgroup-project-manager.html %}
<div class="mb-3">
<label class="form-label">Buttons group</label>
<div class="btn-group w-100">
<button type="button" class="btn btn-secondary">1 min</button>
<button type="button" class="btn btn-secondary active">5 min</button>
<button type="button" class="btn btn-secondary">10 min</button>
<button type="button" class="btn btn-secondary">30 min</button>
</div>
</div>
<div class="mb-3">
<label class="form-label">Buttons group with dropdown</label>
<div class="btn-group w-100">
<button type="button" class="btn btn-secondary">Option 1</button>
<button type="button" class="btn btn-secondary">Option 2</button>
<button type="button" class="btn btn-secondary active">Option 3</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
Option 4
</a>
<a class="dropdown-item" href="#">
Option 5
</a>
<a class="dropdown-item" href="#">
Option 6
</a>
</div>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Toolbar</label>
<div class="btn-group w-100">
{% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus" | split: ',' %}
{% for icon in icons %}
{% include ui/button.html color="secondary" icon=icon icon-only=true %}
{% endfor %}
</div>
</div>
pages/_includes/forms/form-elements-5.html
+37 -8
View File
@@ -1,18 +1,47 @@
{% include parts/input-radios.html %}
{% include parts/input-radios-inline.html %}
{% include parts/form/input-radios.html %}
{% include parts/form/input-radios-inline.html %}
{% include parts/input-checkboxes.html %}
{% include parts/input-checkboxes-inline.html %}
{% include parts/form/input-checkboxes.html %}
{% include parts/form/input-checkboxes-inline.html %}
{% include parts/input-toggle.html %}
{% include parts/input-toggle-single.html %}
<div class="mb-3">
<label class="form-label">Checkboxes with description</label>
{% include parts/input-file.html %}
<label class="form-check form-check-highlight mb-2">
<input class="form-check-input" type="checkbox">
<div class="form-check-label">
Default checkbox
</div>
<div class="form-check-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</label>
<label class="form-check form-check-highlight mb-2">
<input class="form-check-input" type="checkbox">
<div class="form-check-label">
Longer checkbox item that wraps on to two separate lines
</div>
<div class="form-check-description">
Ab alias aut, consequuntur cumque esse eveniet incidunt laborum minus molestiae.
</div>
</label>
<label class="form-check form-check-highlight">
<input class="form-check-input" type="checkbox">
<div class="form-check-label">
Default checkbox without description
</div>
</label>
</div>
{% include parts/form/input-toggle.html %}
{% include parts/form/input-toggle-single.html %}
{% include parts/form/input-file.html %}
<div class="mb-3">
<label class="form-label">Date of birth</label>
<div class="row row-xs">
<div class="row row-sm">
<div class="col-5">
<select name="user[month]" class="form-select">
<option value="">Month</option>
pages/_includes/forms/form-elements-6.html
+2 -2
View File
@@ -1,5 +1,5 @@
{% include parts/input-datalist.html %}
{% include parts/input-range.html %}
{% include parts/form/input-datalist.html %}
{% include parts/form/input-range.html %}
<div class="mb-3">
<label class="form-label">Datepicker</label>
pages/_includes/layout/css.html
+2
View File
@@ -14,3 +14,5 @@
{% for plugin in site.tabler-plugins %}
<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/{{ plugin }}{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
{% endfor %}
<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/demo{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
pages/_includes/layout/customize.html
View File
pages/_includes/layout/debug.html
-4
View File
@@ -47,10 +47,6 @@
display: flex;
}
.content-page {
padding-bottom: 2rem;
}
.debug a {
color: inherit;
margin-right: 1rem;
pages/_includes/layout/footer.html
+24
View File
@@ -0,0 +1,24 @@
<footer class="footer footer-transparent">
<div class="container">
<div class="row align-items-center flex-row-reverse">
<div class="col-auto ml-lg-auto">
<div class="row align-items-center">
<div class="col-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="{{ site.base }}/docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="{{ site.base }}/faq.html" class="link-secondary">FAQ</a></li>
</ul>
</div>
<div class="col-auto">
{% include ui/button.html color="secondary" size="sm" text="Source code" href=site.github_url external=true %}
</div>
</div>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
Copyright © {{ site.time | date: '%Y' }}
<a href="{{ site.base }}" class="link-secondary">{{ site.title }}</a>.
All rights reserved.
</div>
</div>
</div>
</footer>
pages/_includes/layout/homepage.html
+12 -12
View File
@@ -13,7 +13,7 @@
{% include cards/charts/active-users.html %}
</div>
<div class="col-7">
<div class="col-lg-7">
<div class="card">
<div class="card-body">
<h3 class="card-title">Traffic summary</h3>
@@ -22,12 +22,12 @@
</div>
</div>
<div class="col-5">
<div class="col-lg-5">
{% include cards/map.html title="Top countries" %}
</div>
<div class="col-lg-6">
<div class="row row-cards">
<div class="row row-cards row-deck">
<div class="col-sm-6">
{% include cards/project-summary.html stage-color="red" %}
</div>
@@ -35,13 +35,13 @@
{% include cards/project-summary.html title="UI Redesign" date="11 Nov 2019" stage="Final review" avatar-limit=3 avatar-offset=9 project-color="green" value=80 percentage-color="green" %}
</div>
<div class="col-6 col-sm-4">
<div class="col-sm-4">
{% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
</div>
<div class="col-6 col-sm-4">
<div class="col-sm-4">
{% include cards/small-stats-3.html number=95 number-prefix="$" title="Daily Earnings" percentage=-2 %}
</div>
<div class="col-6 col-sm-4">
<div class="col-sm-4">
{% include cards/small-stats-3.html number=7 title="New Replies" percentage=9 %}
</div>
</div>
@@ -58,17 +58,17 @@
{% include cards/small-stats.html color="green" icon="shopping-cart" count="78" subtitle="Orders" description="32 shipped" %}
</div>
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" chart-label="56%" color="red" count="1352" subtitle="Members" description="163 registered today" %}
{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" chart-label="56%" color="red" count="1352" subtitle="Members" description="163 registered today" %}
</div>
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
</div>
<div class="col-12">
{% include cards/invoices.html %}
<div class="col-md-6 col-lg-8">
{% include cards/most-visited-pages.html %}
</div>
<div class="col-12">
{% include cards/table-users.html %}
<div class="col-md-6 col-lg-4">
{% include cards/sponsor.html %}
</div>
</div>
</div>
pages/_includes/layout/js.html
-1
View File
@@ -10,4 +10,3 @@
<!-- Tabler Core -->
<script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
<script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler-range-sliders{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
pages/_includes/layout/layouts.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="card card-md">
<div class="card card-lg">
<div class="card-body">
{% include layout/layouts-list.html %}
</div>
pages/_includes/layout/menu-aside.html
-64
View File
@@ -1,64 +0,0 @@
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
<ul class="sidebar-nav">
<li class="sidebar-nav-title">Navigation</li>
{% for level-1 in site.data.menu %}
<li class="sidebar-nav-item">
<a {% unless level-1[1].children %}href="{{ site.base }}/{{ level-1[1].url }}"{% endunless %} class="sidebar-nav-link{% if level-1[0] == current-page[0] and current-page.size == 1 %} active{% endif %}" {% if level-1[1].children %}data-toggle="collapse" data-target="#sidebar-menu-{{ level-1[0] }}"{% if level-1[0] == current-page[0] %} aria-expanded="true"{% endif %}{% endif %}>
{% if level-1[1].icon %}
{% assign icon = level-1[1].icon %}
{% include ui/icon.html icon=icon class="nav-icon" %}
{% endif %}
<span class="nav-text">{{ level-1[1].title }}</span>
{% if level-1[1].badge %}
{% assign badge = level-1[1].badge %}
{% assign badge-color = level-1[1].badge-color | default: "green" %}
{% include ui/badge.html text=badge color=badge-color %}
{% endif %}
{% if level-1[1].children %}
<span class="sidebar-nav-arrow"></span>
{% endif %}
</a>
{% if level-1[1].children %}
<ul class="sidebar-subnav collapse{% if level-1[0] == current-page[0] %} show{% endif %}" id="sidebar-menu-{{ level-1[0] }}">
{% for level-2 in level-1[1].children %}
<li class="sidebar-nav-item">
<a {% unless level-2[1].children %} href="{{ site.base }}/{{ level-2[1].url }}"{% endunless %} class="sidebar-nav-link{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}data-toggle="collapse" data-target="#sidebar-menu-{{ level-2[0] }}"{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] %} aria-expanded="true"{% endif %}{% endif %}>
<span>{{ level-2[1].title }}</span>
{% if level-2[1].badge %}
{% assign badge = level-2[1].badge %}
{% include ui/badge.html text=badge color="green" %}
{% endif %}
{% if level-2[1].children %}
<span class="sidebar-nav-arrow"></span>
{% endif %}
</a>
{% if level-2[1].children %}
<ul class="sidebar-subnav collapse{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] %} show{% endif %}" id="sidebar-menu-{{ level-2[0] }}">
{% for level-3 in level-2[1].children %}
<li class="sidebar-nav-item">
<a href="{{ site.base }}/{{ level-3[1].url }}" class="sidebar-nav-link{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and level-3[0] == current-page[2] and current-page.size == 3 %} active{% endif %}">
<span>{{ level-3[1].title }}</span>
{% if level-3[1].badge %}
{% assign badge = level-3[1].badge %}
{% include ui/badge.html text=badge color="green" %}
{% endif %}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
pages/_includes/layout/menu.html
-51
View File
@@ -1,51 +0,0 @@
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
<ul class="navbar-nav flex-wrap flex-fill{% if include.class %} {{ include.class }}{% endif %}">
{% for level-1 in site.data.menu %}
{% assign icon = level-1[1].icon %}
<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% elsif level-1[1].toggle
%}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}" {% else
%}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
<span class="nav-icon">
{% include ui/icon.html icon=icon %}
</span>
{{ level-1[1].title }}
{% if level-1[1].badge %}
{% assign badge = level-1[1].badge %}
{% assign badge-color = level-1[1].badge-color | default: "green" %}
{% include ui/badge.html text=badge color=badge-color class="ml-2" %}
{% endif %}
</a>
{% if level-1[1].children %}
<ul class="dropdown-menu">
{% for level-2 in level-1[1].children %}
<li {% if level-2[1].children %}class="dropright"{% endif %}>
<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
{{ level-2[1].title }}
{% if level-2[1].badge %}
{% assign badge = level-2[1].badge %}
{% assign badge-color = level-2[1].badge-color | default: "green" %}
{% include ui/badge.html text=badge color=badge-color class="ml-auto" %}
{% endif %}
</a>
{% if level-2[1].children %}
<div class="dropdown-menu">
{% for level-3 in level-2[1].children %}
<a href="{{ site.base }}/{{ level-3[1].url }}" class="dropdown-item">{{ level-3[1].title }}</a>
{% endfor %}
</div>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
pages/_includes/layout/navbar-logo.html
+3 -3
View File
@@ -1,6 +1,6 @@
{% assign prefix = include.prefix | default: 'navbar' %}
<a href="{{ site.base }}" class="{{ prefix }}-brand{% if include.class %} {{ include.class }}{% endif %}">
<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-lg">
<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-sm">
<a href="{{ site.base }}" class="{{ prefix }}-brand {{ prefix }}-brand-autodark{% if include.class %} {{ include.class }}{% endif %}">
<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-large">
<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-small">
</a>
pages/_includes/layout/navbar-menu.html
+41
View File
@@ -0,0 +1,41 @@
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
<ul class="navbar-nav">
{% for level-1 in site.data.menu %}
{% assign icon = level-1[1].icon %}
<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}">
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
<span class="nav-link-icon">{% include ui/icon.html icon=icon %}</span>
<span class="nav-link-title">{{ level-1[1].title }}</span>
</a>
{% if level-1[1].children %}
<ul class="dropdown-menu dropdown-menu-arrow{% if level-1[1].right %} dropdown-menu-right{% endif %}{% if level-1[1].columns %} dropdown-menu-columns dropdown-menu-columns-{{ level-1[1].columns }}{% endif %}">
{% for level-2 in level-1[1].children %}
<li {% if level-2[1].children %}class="dropright"{% endif %}>
<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
{{ level-2[1].title }}
</a>
{% if level-2[1].children %}
<div class="dropdown-menu">
{% for level-3 in level-2[1].children %}
<a href="{{ site.base }}/{{ level-3[1].url }}" class="dropdown-item">{{ level-3[1].title }}</a>
{% endfor %}
</div>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
<li class="nav-item d-none-navbar-vertical">
<a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
<span class="nav-link-icon">{% include ui/icon.html icon="sliders" %}</span>
<span class="nav-link-title">Customize</span>
</a>
</li>
</ul>
pages/_includes/layout/navbar-primary.html
+20
View File
@@ -0,0 +1,20 @@
{% assign breakpoint = 'lg' %}
<nav class="navbar navbar-expand-{{ breakpoint }} navbar-light navbar-primary" id="navbar-primary">
<div class="container">
{% include layout/navbar-logo.html class="d-none-navbar-horizontal" %}
<div class="navbar-collapse collapse">
<h6 class="navbar-heading">Navigation</h6>
{% include layout/navbar-menu.html %}
<h6 class="navbar-heading mt-4">Tools</h6>
<div class="navbar-side">
{% include layout/navbar-search.html class="d-none-navbar-vertical-narrow" %}
{% include ui/button.html text="Customize" icon="sliders" color="primary" block=true modal-id="customize" class="d-none-navbar-horizontal d-none-navbar-vertical-narrow" %}
{% include ui/button.html icon="sliders" icon-only=true color="primary" block=true modal-id="customize" class="d-none-navbar-horizontal d-none-navbar-vertical-wide" %}
</div>
</div>
</div>
</nav>
pages/_includes/layout/navbar-search.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="d-none d-xl-block ml-auto">
<div class="d-none d-xl-block ml-auto{% if include.class %} {{ include.class }}{% endif %}">
<form action="." method="get">
{% include ui/form/input-icon.html prepend=true %}
</form>
pages/_includes/layout/navbar-secondary.html
+21
View File
@@ -0,0 +1,21 @@
<nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
<div class="container">
{% include layout/navbar-logo.html class="d-none-navbar-vertical" %}
<ul class="navbar-nav ml-auto">
<li class="nav-item">
{% include ui/button.html color="secondary" size="sm" text="Source code" href=site.github_url external=true %}
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}
</li>
</ul>
</div>
</nav>
pages/_includes/layout/page-title-actions.html → pages/_includes/layout/page-header-actions.html
View File
pages/_includes/layout/page-header.html
+27
View File
@@ -0,0 +1,27 @@
<!-- Page title -->
<div class="page-header">
<div class="row align-items-center">
<div class="col-auto">
{% if include.pretitle %}
<!-- Page pre-title -->
<div class="page-pretitle">
{{ include.pretitle }}
</div>
{% endif %}
<h2 class="page-title">
{{ include.title }}
</h2>
</div>
{% if include.description %}
<div class="col-auto">
<div class="text-muted text-h5 mt-2">{{ include.description }}</div>
</div>
{% endif %}
{% if include.actions %}
{% include layout/page-header-actions.html actions=include.actions %}
{% endif %}
</div>
</div>
pages/_includes/layout/page-title.html
-29
View File
@@ -1,29 +0,0 @@
{% if page.page-title or layout.page-title %}
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
{% if page.page-pretitle %}
<!-- Page pre-title -->
<div class="page-pretitle">
{{ page.page-pretitle }}
</div>
{% endif %}
<h2 class="page-title">
{{ page.page-title | default: layout.page-title }}
</h2>
</div>
{% if page.page-title-description %}
<div class="col-auto">
<div class="text-muted text-h5 mt-2">{{ page.page-title-description }}</div>
</div>
{% endif %}
{% if page.page-title-actions %}
{% include layout/page-title-actions.html actions=page.page-title-actions %}
{% endif %}
</div>
</div>
{% endif %}

Some files were not shown because too many files have changed in this diff Show More