Merge pull request #706 from tabler/dev-skeleton

src/pages/_data/menu.yml

@@ -50,6 +50,9 @@ base:
       url: pagination.html
       title: Pagination
       icon: pie-chart
+    skeleton:
+      url: skeleton.html
+      title: Skeleton
     tables:
       url: tables.html
       title: Tables
@@ -260,6 +263,9 @@ docs:
     ribbons:
       title: Ribbons
       url: docs/ribbons.html
+    skeleton:
+      title: Skeleton
+      url: docs/skeleton.html
     spinners:
       title: Spinners
       url: docs/spinners.html

src/pages/_docs/skeleton.md

@@ -0,0 +1,126 @@
+---
+title: Skeleton
+menu: docs.skeleton
+description: Skeleton is used to reserve space for content that soon will appear in a layout.
+---
+
+## Skeleton line
+
+Skeleton lines can contain have lines of text. Their length is different and depends on the `text-align` property.
+
+{% capture code %}
+<div class="skeleton-line"></div>
+<div class="skeleton-line"></div>
+<div class="skeleton-line"></div>
+<div class="skeleton-line"></div>
+{% endcapture %}
+{% include example.html code=code %}
+
+However, it may be useful, however, to specify the full width in order to fit the content more effectively.
+
+{% capture code %}
+<div class="skeleton-line skeleton-line-full"></div>
+<div class="skeleton-line skeleton-line-full"></div>
+<div class="skeleton-line skeleton-line-full"></div>
+<div class="skeleton-line skeleton-line-full"></div>
+{% endcapture %}
+{% include example.html code=code %}
+
+You can also move the lines to right or to center:
+
+{% capture code %}
+<div class="text-right">
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line"></div>
+</div>
+<div class="text-center mt">
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line"></div>
+</div>
+{% endcapture %}
+{% include example.html code=code %}
+
+
+## Skeleton heading
+
+A skeleton can contain also a header element looks like header:
+
+{% capture code %}
+<div class="skeleton-heading"></div>
+<div class="skeleton-line"></div>
+<div class="skeleton-line"></div>
+{% endcapture %}
+{% include example.html code=code %}
+
+## Skeleton avatar
+
+You can make your skeleton item look like an avatar.
+
+{% capture code %}
+<div class="row">
+  <div class="col-auto">
+    <div class="skeleton-avatar"></div>
+  </div>
+  <div class="col">
+    <div class="skeleton-line"></div>
+    <div class="skeleton-line"></div>
+  </div>
+</div>
+{% endcapture %}
+{% include example.html code=code %}
+
+The size of avatars is exactly the same as a regular avatar.
+
+{% capture code %}
+<div class="skeleton-avatar skeleton-avatar-xl"></div>
+<div class="skeleton-avatar skeleton-avatar-lg"></div>
+<div class="skeleton-avatar skeleton-avatar-md"></div>
+<div class="skeleton-avatar"></div>
+<div class="skeleton-avatar skeleton-avatar-sm"></div>
+<div class="skeleton-avatar skeleton-avatar-xs"></div>
+{% endcapture %}
+{% include example.html code=code %}
+
+## Skeleton image
+
+You can use a skeleton, which will look like a picture. You can easily change its height and width. Standard image ratio is 16:9.
+
+{% capture code %}
+<div class="skeleton-image"></div>
+<div class="skeleton-image" style="width: 80px; height: 200px;"></div>
+<div class="skeleton-image" style="width: 80px; height: 80px;"></div>
+{% endcapture %}
+{% include example.html code=code max-width="200px" wrapper="space-y" %}
+
+You can also use the `ratio` component, and get the image in the right proportions.
+
+{% capture code %}
+<div class="ratio ratio-1x1">
+  <div class="skeleton-image"></div>
+</div>
+<div class="ratio ratio-4x3">
+  <div class="skeleton-image"></div>
+</div>
+<div class="ratio ratio-16x9">
+  <div class="skeleton-image"></div>
+</div>
+<div class="ratio ratio-21x9">
+  <div class="skeleton-image"></div>
+</div>
+{% endcapture %}
+{% include example.html code=code max-width="200px" wrapper="space-y" %}
+
+## Live examples
+
+See in the following examples how else you can use the skeleton component
+
+{% capture code %}
+{% include cards/skeleton/card-1.html %}
+{% include cards/skeleton/card-2.html %}
+{% include cards/skeleton/card-3.html %}
+{% include cards/skeleton/card-4.html %}
+{% include cards/skeleton/card-6.html %}
+{% endcapture %}
+{% include example.html code=code columns=1 wrapper="space-y" %}

src/pages/_includes/cards/skeleton/card-1.html

@@ -0,0 +1,10 @@
+<div class="card">
+	<div class="ratio ratio-21x9 card-img-top">
+		<div class="skeleton-image"></div>
+	</div>
+	<div class="card-body">
+		<div class="skeleton-heading"></div>
+		<div class="skeleton-line"></div>
+		<div class="skeleton-line"></div>
+	</div>
+</div>

src/pages/_includes/cards/skeleton/card-2.html

@@ -0,0 +1,16 @@
+<div class="card">
+	<div class="row g-0 align-items-center">
+		<div class="col-3">
+			<div class="ratio ratio-1x1 card-img-left">
+				<div class="skeleton-image"></div>
+			</div>
+		</div>
+		<div class="col">
+			<div class="card-body">
+				<div class="skeleton-heading"></div>
+				<div class="skeleton-line"></div>
+				<div class="skeleton-line"></div>
+			</div>
+		</div>
+	</div>
+</div>

src/pages/_includes/cards/skeleton/card-3.html

@@ -0,0 +1,13 @@
+<div class="card">
+	<div class="card-body">
+		<div class="row">
+			<div class="col-auto">
+				<div class="skeleton-avatar"></div>
+			</div>
+			<div class="col">
+				<div class="skeleton-line"></div>
+				<div class="skeleton-line"></div>
+			</div>
+		</div>
+	</div>
+</div>

src/pages/_includes/cards/skeleton/card-4.html

@@ -0,0 +1,11 @@
+<div class="card">
+	<div class="card-body py-5 text-center">
+		<div>
+			<div class="skeleton-avatar skeleton-avatar-lg"></div>
+		</div>
+		<div class="mt w-75 mx-auto">
+			<div class="skeleton-heading"></div>
+			<div class="skeleton-line"></div>
+		</div>
+	</div>
+</div>

src/pages/_includes/cards/skeleton/card-5.html

@@ -0,0 +1,10 @@
+<div class="card">
+	<div class="card-body text-right">
+		<div class="skeleton-heading"></div>
+		<div class="skeleton-line"></div>
+		<div class="skeleton-line"></div>
+		<div class="skeleton-line"></div>
+		<div class="skeleton-line"></div>
+		<div class="skeleton-line"></div>
+	</div>
+</div>

src/pages/_includes/cards/skeleton/card-6.html

@@ -0,0 +1,21 @@
+<div class="card">
+	<ul class="list-group list-group-flush">
+		{% for i in (1..4) %}
+		<li class="list-group-item">
+			<div class="row align-items-center">
+				<div class="col-auto">
+					<div class="skeleton-avatar"></div>
+				</div>
+				<div class="col-7">
+					<div class="skeleton-line"></div>
+					<div class="skeleton-line"></div>
+				</div>
+				<div class="col-2 ml-auto text-right">
+					<div class="skeleton-line"></div>
+					<div class="skeleton-line"></div>
+				</div>
+			</div>
+		</li>
+		{% endfor %}
+	</ul>
+</div>

src/pages/_includes/example.html

@@ -6,14 +6,14 @@
 <div class="example no_toc_section{% if include.centered %} example-centered{% endif %}{% if include.columns %} example-bg{% endif %}">
 	<div class="example-content">
 		{% if include.max-width %}<div style="max-width: {{ include.max-width }}">{% endif %}
-		{% if include.wrapper %}<div class="{{ include.wrapper }}">{% endif %}
 		{% if include.columns %}<div class="example-column example-column-{{ include.columns }}">{% endif %}
 		{% if include.modal %}<div class="example-modal-backdrop"></div>{% endif %}
+		{% if include.wrapper %}<div class="{{ include.wrapper }}">{% endif %}
 
 		{{ demo-code }}
 
-		{% if include.columns %}</div>{% endif %}
 		{% if include.wrapper %}</div>{% endif %}
+		{% if include.columns %}</div>{% endif %}
 		{% if include.max-width %}</div>{% endif %}
 	</div>
 </div>

src/pages/skeleton.html

@@ -0,0 +1,42 @@
+---
+page-header: Skeleton
+menu: base.skeleton
+---
+
+<div class="row row-cards">
+	{% for i in (1..4) %}
+		<div class="col-3">
+			{% include cards/skeleton/card-1.html %}
+		</div>
+	{% endfor %}
+	<div class="col-4">
+		<div class="row row-cards">
+			<div class="col-12">
+				{% include cards/skeleton/card-3.html %}
+			</div>
+			<div class="col-12">
+				{% include cards/skeleton/card-4.html %}
+			</div>
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="row row-cards">
+			<div class="col-12">
+				{% include cards/skeleton/card-1.html %}
+			</div>
+			<div class="col-12">
+				{% include cards/skeleton/card-2.html %}
+			</div>
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="row row-cards">
+			<div class="col-12">
+				{% include cards/skeleton/card-5.html %}
+			</div>
+			<div class="col-12">
+				{% include cards/skeleton/card-6.html %}
+			</div>
+		</div>
+	</div>
+</div>

src/scss/_tabler-core.scss

@@ -39,6 +39,7 @@
 @import "ui/popovers";
 @import "ui/progress";
 @import "ui/ribbons";
+@import "ui/skeleton";
 @import "ui/steps";
 @import "ui/tables";
 @import "ui/toasts";

src/scss/demo/_examples.scss

@@ -52,11 +52,11 @@
 }
 
 .example-column-1 {
-  max-width: 20rem;
+  max-width: 26rem;
 }
 
 .example-column-2 {
-  max-width: 40rem;
+  max-width: 52rem;
 }
 
 .example-modal-backdrop {

src/scss/ui/_avatars.scss

@@ -41,10 +41,6 @@
 @each $avatar-size, $size in $avatar-sizes {
   .avatar-#{$avatar-size} {
     --#{$variable-prefix}avatar-size: #{$size};
-    //width: $size;
-    //height: $size;
-    //font-size: $size / 2;
-    //line-height: $size;
   }
 }
 

src/scss/ui/_cards.scss

@@ -17,6 +17,16 @@
   }
 }
 
+.card-img,
+.card-img-left {
+  @include border-left-radius($card-inner-border-radius);
+}
+
+.card-img,
+.card-img-right {
+  @include border-right-radius($card-inner-border-radius);
+}
+
 .card-inactive {
   pointer-events: none;
   box-shadow: none;

src/scss/ui/_grid.scss

@@ -62,4 +62,52 @@
     --#{$variable-prefix}gutter-x: #{$cards-grid-gap / 2};
     --#{$variable-prefix}gutter-y: #{$cards-grid-gap / 2};
   }
+}
+
+@each $name, $size in map-merge((null: $spacer), $spacers) {
+  $name-prefixed: if($name == null, null, '-#{$name}');
+
+  .space-y#{$name-prefixed} {
+    > :not(template) ~ :not(template) {
+      margin-top: $size !important;
+    }
+  }
+
+  .space-x#{$name-prefixed} {
+    > :not(template) ~ :not(template) {
+      margin-left: $size !important;
+    }
+  }
+}
+
+@each $name, $size in map-merge((null: $spacer), $spacers) {
+  $name-prefixed: if($name == null, null, '-#{$name}');
+
+  .divide-y#{$name-prefixed} {
+    > :not(template) ~ :not(template) {
+      border-top: 1px solid $border-color-transparent !important;
+    }
+
+    > :not(template):not(:first-child) {
+      padding-top: $size/2 !important;
+    }
+
+    > :not(template):not(:last-child) {
+      padding-bottom: $size/2 !important;
+    }
+  }
+
+  .divide-x#{$name-prefixed} {
+    > :not(template) ~ :not(template) {
+      border-left: 1px solid $border-color-transparent !important;
+    }
+
+    > :not(template):not(:first-child) {
+      padding-left: $size/2 !important;
+    }
+
+    > :not(template):not(:last-child) {
+      padding-right: $size/2 !important;
+    }
+  }
 }

src/scss/ui/_lists.scss

@@ -1,3 +1,8 @@
+.list-group {
+  margin-left: 0;
+  margin-right: 0;
+}
+
 .list-item {
   position: relative;
   display: flex;

src/scss/ui/_skeleton.scss

@@ -0,0 +1,98 @@
+@keyframes skeleton-load {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 100vw 0;
+  }
+}
+
+%skeleton-common {
+  background-image: linear-gradient(to right, mix($body-bg, $body-color, 98%) 0, mix($body-bg, $body-color, 90%) 40%, mix($body-bg, $body-color, 98%) 80%);
+  background-size: 50vw 100%;
+  background-attachment: fixed;
+  animation: skeleton-load 2s linear infinite
+}
+
+.skeleton-avatar {
+  @extend %skeleton-common;
+  display: inline-block;
+  vertical-align: bottom;
+  width: $avatar-size;
+  height: $avatar-size;
+  border-radius: $border-radius-full;
+
+  @each $name, $size in $avatar-sizes {
+    &-#{$name} {
+      width: $size;
+      height: $size;
+    }
+  }
+}
+
+.skeleton-line {
+  padding: .375rem 0;
+  display: block;
+  line-height: 0;
+  height: $font-size-base * $line-height-base;
+
+  &:after {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    border-radius: $border-radius;
+    width: 100%;
+    @extend %skeleton-common;
+  }
+
+  &:nth-child(5n+2):after {
+    width: 80%;
+  }
+
+  &:nth-child(5n+3):after {
+    width: 90%;
+  }
+
+  &:nth-child(5n+4):after {
+    width: 95%;
+  }
+
+  &:nth-child(5n+5):after {
+    width: 85%;
+  }
+}
+
+.skeleton-line-full {
+  &:after {
+    width: 100% !important;
+  }
+}
+
+.skeleton-heading {
+  @extend .skeleton-line;
+  height: 1.5rem;
+  margin-bottom: .5rem;
+
+  &:after {
+    width: 70%;
+  }
+}
+
+.skeleton-image {
+  @extend %skeleton-common;
+
+  &:after {
+    content: '';
+    padding-top: percentage(9/16);
+    display: block;
+  }
+}
+
+.card-img-top,
+.card-img-bottom,
+.card-img-left,
+.card-img-right {
+  .skeleton-image {
+    border-radius: inherit;
+  }
+}