From f5d50de771601a97478c901b8801cc824008a786 Mon Sep 17 00:00:00 2001 From: Kyle Malloy Date: Thu, 1 Aug 2024 14:26:22 -0400 Subject: [PATCH 1/2] image layouts --- .../docs/resources/cookbook/image-layouts.mdx | 65 +++++++++++++++++++ .../image-layouts/ExampleFeatured.astro | 28 ++++++++ .../cookbook/image-layouts/ExampleGrid.astro | 36 ++++++++++ .../image-layouts/ExampleMasonry.astro | 27 ++++++++ .../cookbook/image-layouts/ExampleQuad.astro | 18 +++++ 5 files changed, 174 insertions(+) create mode 100644 sites/next.skeleton.dev/src/content/docs/resources/cookbook/image-layouts.mdx create mode 100644 sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleFeatured.astro create mode 100644 sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleGrid.astro create mode 100644 sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleMasonry.astro create mode 100644 sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleQuad.astro diff --git a/sites/next.skeleton.dev/src/content/docs/resources/cookbook/image-layouts.mdx b/sites/next.skeleton.dev/src/content/docs/resources/cookbook/image-layouts.mdx new file mode 100644 index 000000000..51e689237 --- /dev/null +++ b/sites/next.skeleton.dev/src/content/docs/resources/cookbook/image-layouts.mdx @@ -0,0 +1,65 @@ +--- +layout: '@layouts/LayoutDoc.astro' +title: Image Layouts +description: Various layouts for displaying images. +showDocsUrl: true +--- + +export const components = componentSet; + +import ExampleGrid from '@examples/resources/cookbook/image-layouts/ExampleGrid.astro'; +import ExampleGridRaw from '@examples/resources/cookbook/image-layouts/ExampleGrid.astro?raw'; +import ExampleQuad from '@examples/resources/cookbook/image-layouts/ExampleQuad.astro'; +import ExampleQuadRaw from '@examples/resources/cookbook/image-layouts/ExampleQuad.astro?raw'; +import ExampleMasonry from '@examples/resources/cookbook/image-layouts/ExampleMasonry.astro'; +import ExampleMasonryRaw from '@examples/resources/cookbook/image-layouts/ExampleMasonry.astro?raw'; +import ExampleFeatured from '@examples/resources/cookbook/image-layouts/ExampleFeatured.astro'; +import ExampleFeaturedRaw from '@examples/resources/cookbook/image-layouts/ExampleFeatured.astro?raw'; + +## Grid + + + + + + + + + + +## Quad + + + + + + + + + + +## Masonry + + + + + + + + + + +## Featured + + + + + + + + + + +## Attribution +Image layout markup and styles based on [Flowbite](https://flowbite.com/docs/components/gallery/#masonry-grid). +Please [view our guide](https://www.skeleton.dev/blog/skeleton-plus-flowbite) to learn more about integrating Flowbite elements and blocks in your Skeleton projects. diff --git a/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleFeatured.astro b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleFeatured.astro new file mode 100644 index 000000000..d8ecde307 --- /dev/null +++ b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleFeatured.astro @@ -0,0 +1,28 @@ + +
+ +
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
diff --git a/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleGrid.astro b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleGrid.astro new file mode 100644 index 000000000..ba85f6404 --- /dev/null +++ b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleGrid.astro @@ -0,0 +1,36 @@ + +
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+
diff --git a/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleMasonry.astro b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleMasonry.astro new file mode 100644 index 000000000..d78935610 --- /dev/null +++ b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleMasonry.astro @@ -0,0 +1,27 @@ + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+
diff --git a/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleQuad.astro b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleQuad.astro new file mode 100644 index 000000000..ccb03f37d --- /dev/null +++ b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleQuad.astro @@ -0,0 +1,18 @@ + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
From ecf06cb8956b7ec2d5e88ec80c1414a4f08b4df7 Mon Sep 17 00:00:00 2001 From: endigo9740 Date: Thu, 15 Aug 2024 13:26:52 -0500 Subject: [PATCH 2/2] Updated doc and examples --- .../docs/resources/cookbook/image-layouts.mdx | 6 +-- .../image-layouts/ExampleFeatured.astro | 38 +++++---------- .../cookbook/image-layouts/ExampleGrid.astro | 48 +++++-------------- .../image-layouts/ExampleMasonry.astro | 25 +++++----- .../cookbook/image-layouts/ExampleQuad.astro | 22 ++------- 5 files changed, 45 insertions(+), 94 deletions(-) diff --git a/sites/next.skeleton.dev/src/content/docs/resources/cookbook/image-layouts.mdx b/sites/next.skeleton.dev/src/content/docs/resources/cookbook/image-layouts.mdx index 51e689237..8b6b6e2f7 100644 --- a/sites/next.skeleton.dev/src/content/docs/resources/cookbook/image-layouts.mdx +++ b/sites/next.skeleton.dev/src/content/docs/resources/cookbook/image-layouts.mdx @@ -1,7 +1,7 @@ --- layout: '@layouts/LayoutDoc.astro' title: Image Layouts -description: Various layouts for displaying images. +description: Layouts for displaying sets of images. showDocsUrl: true --- @@ -61,5 +61,5 @@ import ExampleFeaturedRaw from '@examples/resources/cookbook/image-layouts/Examp ## Attribution -Image layout markup and styles based on [Flowbite](https://flowbite.com/docs/components/gallery/#masonry-grid). -Please [view our guide](https://www.skeleton.dev/blog/skeleton-plus-flowbite) to learn more about integrating Flowbite elements and blocks in your Skeleton projects. + +Images courtesy of [Lorem Picsum](https://picsum.photos/). Markup and styles inspired by [Flowbite](https://flowbite.com/docs/components/gallery/#masonry-grid). diff --git a/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleFeatured.astro b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleFeatured.astro index d8ecde307..4165c427e 100644 --- a/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleFeatured.astro +++ b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleFeatured.astro @@ -1,28 +1,14 @@ - -
- -
- -
- -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+
+ +
+ +
+ +
+ + + + +
diff --git a/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleGrid.astro b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleGrid.astro index ba85f6404..3fa373cc5 100644 --- a/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleGrid.astro +++ b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleGrid.astro @@ -1,36 +1,14 @@ - -
- -
- -
- -
-
- -
-
- -
- -
- -
-
- -
-
- -
- -
- -
-
- -
-
- -
-
+
+ + + + + + + + + + + +
diff --git a/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleMasonry.astro b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleMasonry.astro index d78935610..987de603e 100644 --- a/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleMasonry.astro +++ b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleMasonry.astro @@ -1,27 +1,26 @@ -
- - - + + +
- - - + + +
- - - + + +
- - - + + +
diff --git a/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleQuad.astro b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleQuad.astro index ccb03f37d..a99f00ccc 100644 --- a/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleQuad.astro +++ b/sites/next.skeleton.dev/src/examples/resources/cookbook/image-layouts/ExampleQuad.astro @@ -1,18 +1,6 @@ - -
- -
-
- -
-
- -
-
- -
-
- -
-
+
+ + + +