✨ NEW: Add animations (#12)

Author: chrisjsewell

docs/css_classes.md

@@ -253,6 +253,8 @@ These classes center an image, set their size and add a circular crop:
 - `sd-avatar-md`
 - `sd-avatar-lg`
 - `sd-avatar-xl`
+- `sd-avatar-inherit`
+- `sd-avatar-initial`
 
 ````{grid} 1 2 3 3
 :gutter: 1
@@ -273,3 +275,13 @@ These classes center an image, set their size and add a circular crop:
 <img src="images/ebp-logo.png" class="sd-avatar-xl sd-border-1">
 ```
 ````
+
+## Load Animations
+
+Add CSS animations when loading elements using the `sd-animate-{name}` classes:
+
+- `sd-animate-slide-from-left`
+- `sd-animate-slide-from-right`
+- `sd-animate-grow100`
+- `sd-animate-grow50`
+- `sd-animate-grow50-rot20`

docs/grids.md

@@ -2,6 +2,8 @@
 
 # Grids
 
+## Introduction
+
 Grids are based on a 12 column system, which can adapt to the size of the viewing screen.
 
 A `grid` directive can be set with the number of default columns (1 to 12);
@@ -65,6 +67,8 @@ short text content
 :::
 ::::
 
+## Placing a card in a grid
+
 The `grid-item-card` directive is a short-hand for placing a card content container inside a grid item (see [Cards](./cards.md)). Most of the `card` directive's options can be used also here:
 
 ::::{grid} 2
@@ -90,6 +94,8 @@ B
 ````
 `````
 
+## Controlling spacing between items
+
 You can set the spacing between grid items with the `gutter` option.
 Like for grid columns, you can either provide a single number or four for small, medium and large and extra-large screens.
 
@@ -129,6 +135,8 @@ B
 ````
 `````
 
+## Item level column width
+
 You can override the number of columns a single item takes up by using the `columns` option of the `grid-item` directive.
 Given the total columns are 12, this means 12 would indicate a single item takes up the entire grid row, or 6 half.
 Alternatively, use `auto` to automatically decide how many columns to use based on the item content.
@@ -166,6 +174,29 @@ C
 ````
 `````
 
+## Reversing the item order
+
+Use the `grid` directive's `reverse` option to reverse the order of the items.
+This can be useful if you want an item to be on the right side on large screens, but at the top on small screens.
+
+::::{grid} 1 1 2 2
+:reverse:
+
+:::{grid-item}
+```{image} ./images/ebp-logo.png
+:width: 200px
+:class: sd-m-auto
+```
+:::
+
+:::{grid-item-card}
+Some text
+:::
+
+::::
+
+## Nesting grids
+
 Grids can be nested in other grids to create complex, adaptive layouts:
 
 ::::::{grid} 1 1 2 2
@@ -259,6 +290,9 @@ text-align
 outline
 : Create a border around the grid.
 
+reverse
+: Reverse the order of the grid items.
+
 class-container
 : Additional CSS classes for the grid container element.
 

docs/index.md

@@ -1,11 +1,12 @@
 # sphinx-design
 
 ```{article-info}
-:avatar: images/mugshot.jpeg
-:avatar-link: https://github.com/chrisjsewell
+:avatar: images/ebp-logo.png
+:avatar-link: https://executablebooks.org
 :author: "[Chris Sewell](https://github.com/chrisjsewell)"
 :date: "{sub-ref}`today`"
 :read-time: "5 min read"
+:class-avatar: sd-animate-grow50-rot20
 ```
 
 A sphinx extension for designing beautiful, screen-size responsive web components.

sphinx_design/compiled/style.min.css

@@ -107,6 +107,7 @@ class GridDirective(SphinxDirective):
         "padding": padding_option,
         "text-align": text_align,
         "outline": directives.flag,
+        "reverse": directives.flag,
         "class-container": directives.class_option,
         "class-row": directives.class_option,
     }
@@ -138,6 +139,7 @@ def run(self) -> List[nodes.Node]:
             ["sd-row"]
             + column_classes
             + self.options.get("gutter", [])
+            + (["sd-flex-row-reverse"] if "reverse" in self.options else [])
             + self.options.get("class-row", []),
         )
         self.set_source_info(row)

sphinx_design/grids.py

@@ -0,0 +1,81 @@
+@keyframes sd-slide-from-left {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes sd-slide-from-right {
+  0% {
+    transform: translateX(200%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes sd-grow100 {
+  0% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes sd-grow50 {
+  0% {
+    transform: scale(0.5);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes sd-grow50-rot20 {
+  0% {
+    transform: scale(0.5) rotateZ(-20deg);
+    opacity: 0.5;
+  }
+  75% {
+    transform: scale(1) rotateZ(5deg);
+    opacity: 1;
+  }
+  95% {
+    transform: scale(1) rotateZ(-1deg);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1) rotateZ(0);
+    opacity: 1;
+  }
+}
+
+// animation is shorthand for 'animation-' properties:
+// duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name
+
+.sd-animate-slide-from-left {
+  animation: 1s ease-out 0s 1 normal none running sd-slide-from-left;
+}
+
+.sd-animate-slide-from-right {
+  animation: 1s ease-out 0s 1 normal none running sd-slide-from-right;
+}
+
+.sd-animate-grow100 {
+  animation: 1s ease-out 0s 1 normal none running sd-grow100;
+}
+
+.sd-animate-grow50 {
+  animation: 1s ease-out 0s 1 normal none running sd-grow50;
+}
+
+.sd-animate-grow50-rot20 {
+  animation: 1s ease-out 0s 1 normal none running sd-grow50-rot20;
+}

style/_animations.scss

@@ -172,3 +172,7 @@ $gutter-widths: $spacings;
     }
   }
 }
+
+.sd-flex-row-reverse {
+  flex-direction: row-reverse !important;
+}

style/_grids.scss

@@ -10,6 +10,8 @@ $avatar-sizes: (
   md: 5rem,
   lg: 7rem,
   xl: 10rem,
+  inherit: inherit,
+  initial: initial
 );
 
 @each $size, $value in $avatar-sizes {

style/_icons.scss

@@ -4,6 +4,7 @@
 @import './display';
 @import './text';
 @import './borders';
+@import './animations';
 @import './badge';
 @import './button';
 @import './icons';