diff --git a/docs/_includes/base-wide.njk b/docs/_includes/base-wide.njk new file mode 100644 index 000000000..58811216a --- /dev/null +++ b/docs/_includes/base-wide.njk @@ -0,0 +1,98 @@ + + + + + + + + {% if noindex %}{% endif %} + + {{ title }} + + + + + {# Scripts #} + + + + + + + + {# Web Awesome #} + + + + + + + {# Docs styles #} + + + {# Set the theme to prevent flashing #} + + + + + +
+ {# Nav toggle #} + + + + + {# Logo #} + + + +
+ + {# Sidebar #} + {% if hasSidebar %} + + {% endif %} + + {# Outline #} + {% if hasOutline %} + + {% endif %} + + {# Main #} +
+ {# Expandable outline #} + + + {% block beforeContent %}{% endblock %} + + {% block content %} +

{{ title }}

+ + {{ content | safe }} + {% endblock %} + + {% block afterContent %}{% endblock %} +
+ + {% include 'search.njk' %} + + + + diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index ced7aeb51..12ec0973b 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -229,3 +229,13 @@ Visually Hidden + + +{# Patterns #} +

Patterns

+ + \ No newline at end of file diff --git a/docs/_layouts/page-wide.njk b/docs/_layouts/page-wide.njk new file mode 100644 index 000000000..f0b287b8f --- /dev/null +++ b/docs/_layouts/page-wide.njk @@ -0,0 +1,4 @@ +{% set hasSidebar = true %} +{% set hasOutline = true %} + +{% extends "../_includes/base-wide.njk" %} diff --git a/docs/_layouts/page.njk b/docs/_layouts/page.njk index a55a02c21..090efc8b3 100644 --- a/docs/_layouts/page.njk +++ b/docs/_layouts/page.njk @@ -1,4 +1,4 @@ {% set hasSidebar = true %} -{% set hasOutline = false %} +{% set hasOutline = true %} {% extends "../_includes/base.njk" %} diff --git a/docs/docs/patterns/app.md b/docs/docs/patterns/app.md index 734cae0b5..1b3d8382a 100644 --- a/docs/docs/patterns/app.md +++ b/docs/docs/patterns/app.md @@ -1,6 +1,7 @@ --- title: App description: TODO +layout: page.njk --- TODO Page Description @@ -9,7 +10,7 @@ TODO Page Description ### Action Plan -```html:preview +```html {.example}

Manage subscription

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae voluptatibus corrupti atque repudiandae nam.

@@ -19,7 +20,7 @@ TODO Page Description ### Feeds -```html:preview +```html {.example}
@@ -101,7 +102,7 @@ TODO Page Description ### Grid -```html:preview +```html {.example}
  • @@ -118,8 +119,8 @@ TODO Page Description
-
Email
-
Phone
+
Email
+
Phone
@@ -137,8 +138,8 @@ TODO Page Description
-
Email
-
Phone
+
Email
+
Phone
@@ -156,12 +157,69 @@ TODO Page Description
-
Email
-
Phone
+
Email
+
Phone
 +
  • + +
    +
    John Carpenter Brand

    Master of Horror

    +
    +
    +
    +
    Email
    +
    Phone
    +
    +     +
    • +
  • + +
    +
    John Carpenter Brand

    Master of Horror

    +
    +
    + +
    +
    Email
    +
    Phone
    +
    +     +
    • +
  • + +
    +
    John Carpenter Brand

    Master of Horror

    +
    +
    + +
    +
    Email
    +
    Phone
    +
    +     +
    • + @@ -205,18 +263,325 @@ TODO Page Description display: grid; - grid-template-columns: 1fr; + gap: 1rem; + grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); list-style-type: none; + margin: 0; } - @media (min-width: 1024px) { + /* @media (min-width: 1140px) { .grid-list { display: grid; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(3, 1fr); + gap: 1rem; list-style-type: none; } } + @media (min-width: 768px) { + .grid-list { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + list-style-type: none; + } + } */ + ``` + +## Pagination + +### Simple Pagination + +```html {.example} + +
    Card body
    +
    + Showing 1 to 10 of 50 Results + + Prev + Next + +
    +     + +``` +### Multi Page + +```html {.example} + +
    Card body
    +
    + Showing 1 to 10 of 50 Results + + + + 1 + 2 + ... + 9 + 10 + + + +
    +     + +``` + +## Comment Box + +```html{.example} +
    + + +
    + + + Attach a file +Comment +
    +     +
    + +``` + +## Description List + +```html{.example} +
    +
    +

    Client Information

    +

    Personal details

    +
    +
    +
    +
    Beast of Bodmin
    +
    A large feline inhabiting Bodmin Moor.
    +
    +
    +
    Beast of Bodmin
    +
    A large feline inhabiting Bodmin Moor.
    +
    +
    +
    Beast of Bodmin
    +
    A large feline inhabiting Bodmin Moor.
    +
    +
    +
    Beast of Bodmin
    +
    A large feline inhabiting Bodmin Moor.
    +
    +
    +
    + +``` + +## FAQ/Details + +```html{.example} +
    +
    +
    +
    Beast of Bodmin
    +
    A large feline inhabiting Bodmin Moor.
    +
    +
    +
    +``` + +## Pricing Tiers + +```html{.example} +``` + +## Empty States + +### Simple + +```html{.example} +
    + +

    No Project

    +

    Get started by one.

    + + + New Project + +
    + +``` + +### With dashed border + +```html{.example} + +
    + +

    No DBs

    +

    Get started by creating a database.

    + +
    +     + +``` +### With starting points + +```html{.example} + +
    +

    Projects

    +

    You haven’t created a project yet. Get started by selecting a template or start from an empty project.

    +
    + +
    + Or start from an empty project → +
    +     + +``` + +### With templates + +### With recommendations grid diff --git a/docs/docs/patterns/blog.md b/docs/docs/patterns/blog.md index 736ac9fee..aee659cec 100644 --- a/docs/docs/patterns/blog.md +++ b/docs/docs/patterns/blog.md @@ -1,4 +1,13 @@ --- title: Blog description: TODO +layout: page.njk --- + +TODO Page Description + +## Examples + +### Newsletter signup + +### Posts List \ No newline at end of file diff --git a/docs/docs/patterns/ecommerce.md b/docs/docs/patterns/ecommerce.md index c52f76f75..6ae88fc1e 100644 --- a/docs/docs/patterns/ecommerce.md +++ b/docs/docs/patterns/ecommerce.md @@ -386,7 +386,7 @@ TODO Page Description grid-template-columns: 35% 65%; grid-column-gap: 1rem; "> - +

    Quality Cotton Tee

    $45.00 @@ -463,6 +463,10 @@ TODO Page Description border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; } + + .cart-item-image { + width: 100%; + } ``` @@ -691,6 +695,7 @@ TODO Page Description img { grid-column: 1/4; + width: 100%; } .summary-item-info {