From f5d50de771601a97478c901b8801cc824008a786 Mon Sep 17 00:00:00 2001 From: Kyle Malloy Date: Thu, 1 Aug 2024 14:26:22 -0400 Subject: [PATCH] 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 @@ + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+