@fluid-theme/core 0.4.3

package/src/layouts/positioning.css

@@ -0,0 +1,626 @@
+/**
+ * Fluid Framework - Positioning System
+ * @layer layouts
+ *
+ * A simple, flexible system for positioning content within containers.
+ * Same HTML, different layouts - just change a data attribute.
+ *
+ * Philosophy:
+ * - Finite options, not infinite (left/center/right, start/center/end)
+ * - Data attributes for easy editor/CMS integration
+ * - Works on any container (sections, cards, divs)
+ * - Composable - combine alignment options as needed
+ *
+ * Usage:
+ *   <section data-align="center">Centered text</section>
+ *   <section data-layout="center">Centered content block</section>
+ *   <section data-layout="split">Two columns</section>
+ */
+
+@layer layouts {
+
+  /* ========================================
+     TEXT ALIGNMENT
+     Controls text-align within the element
+     ======================================== */
+
+  [data-align="start"] {
+    text-align: start;
+  }
+
+  [data-align="center"] {
+    text-align: center;
+  }
+
+  [data-align="end"] {
+    text-align: end;
+  }
+
+
+  /* ========================================
+     CONTENT POSITIONING
+     For block-level content positioning
+     Uses flexbox for vertical centering
+     ======================================== */
+
+  /* Horizontal content position within flex/grid containers */
+  [data-items="start"] {
+    align-items: flex-start;
+  }
+
+  [data-items="center"] {
+    align-items: center;
+  }
+
+  [data-items="end"] {
+    align-items: flex-end;
+  }
+
+  /* Justify content (main axis) */
+  [data-justify="start"] {
+    justify-content: flex-start;
+  }
+
+  [data-justify="center"] {
+    justify-content: center;
+  }
+
+  [data-justify="end"] {
+    justify-content: flex-end;
+  }
+
+  [data-justify="between"] {
+    justify-content: space-between;
+  }
+
+
+  /* ========================================
+     PLACE - Combined alignment (Grid shorthand)
+     For simple center-center type layouts
+     ======================================== */
+
+  [data-place="center"] {
+    display: grid;
+    place-items: center;
+  }
+
+  [data-place="start"] {
+    display: grid;
+    place-items: start;
+  }
+
+  [data-place="end"] {
+    display: grid;
+    place-items: end;
+  }
+
+
+  /* ========================================
+     SECTION LAYOUTS
+     Common content arrangement patterns
+     These turn any element into a layout container
+     ======================================== */
+
+  /*
+   * LAYOUT: center
+   * Content block centered horizontally
+   * Good for: hero headlines, centered sections
+   */
+  [data-layout="center"] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  [data-layout="center"] > * {
+    max-inline-size: var(--content-width, var(--container-md));
+  }
+
+  /*
+   * LAYOUT: left
+   * Content aligned to start (left in LTR)
+   * Good for: standard content, articles
+   */
+  [data-layout="left"] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: start;
+  }
+
+  [data-layout="left"] > * {
+    max-inline-size: var(--content-width, var(--container-md));
+  }
+
+  /*
+   * LAYOUT: right
+   * Content aligned to end (right in LTR)
+   * Good for: alternate sections, variation
+   */
+  [data-layout="right"] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    text-align: start; /* Text still reads left-to-right */
+  }
+
+  [data-layout="right"] > * {
+    max-inline-size: var(--content-width, var(--container-md));
+  }
+
+  /*
+   * LAYOUT: split
+   * Two-column layout: content | media (or any two children)
+   * Good for: hero with image, feature sections
+   */
+  [data-layout="split"] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--split-gap, var(--space-8));
+    align-items: center;
+  }
+
+  /*
+   * LAYOUT: split-reverse
+   * Two-column layout: media | content (reversed)
+   * Good for: alternating sections
+   */
+  [data-layout="split-reverse"] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--split-gap, var(--space-8));
+    align-items: center;
+  }
+
+  [data-layout="split-reverse"] > :first-child {
+    order: 2;
+  }
+
+  [data-layout="split-reverse"] > :last-child {
+    order: 1;
+  }
+
+  /*
+   * LAYOUT: stack
+   * Vertical stack with controlled gap
+   * Good for: any vertical content flow
+   */
+  [data-layout="stack"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--stack-gap, var(--space-5));
+  }
+
+  /*
+   * LAYOUT: overlay
+   * Content positioned over background (for heroes with bg images)
+   * Requires a background to be set separately
+   */
+  [data-layout="overlay"] {
+    display: grid;
+    place-items: center;
+    text-align: center;
+    position: relative;
+    isolation: isolate;
+  }
+
+  [data-layout="overlay"]::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--overlay-color, oklch(0% 0 0 / 0.4));
+    z-index: -1;
+  }
+
+
+  /* ========================================
+     RESPONSIVE LAYOUTS
+     Split layouts stack on narrow containers
+     ======================================== */
+
+  @container (max-width: 40rem) {
+    [data-layout="split"],
+    [data-layout="split-reverse"] {
+      grid-template-columns: 1fr;
+    }
+
+    [data-layout="split-reverse"] > :first-child {
+      order: 1;
+    }
+
+    [data-layout="split-reverse"] > :last-child {
+      order: 2;
+    }
+  }
+
+  /* Media query fallback for when container-type is not set on ancestor */
+  @media (max-width: 40rem) {
+    [data-layout="split"],
+    [data-layout="split-reverse"] {
+      grid-template-columns: 1fr;
+    }
+
+    [data-layout="split-reverse"] > :first-child {
+      order: 1;
+    }
+
+    [data-layout="split-reverse"] > :last-child {
+      order: 2;
+    }
+  }
+
+
+  /* ========================================
+     CONTENT WIDTH CONTROL
+     Constrain content width within layouts
+     ======================================== */
+
+  [data-width="narrow"] {
+    --content-width: var(--container-sm);
+  }
+
+  [data-width="default"] {
+    --content-width: var(--container-md);
+  }
+
+  [data-width="wide"] {
+    --content-width: var(--container-lg);
+  }
+
+  [data-width="full"] {
+    --content-width: 100%;
+  }
+
+
+  /* ========================================
+     VERTICAL ALIGNMENT (within containers)
+     For positioning content vertically
+     ======================================== */
+
+  [data-valign="start"] {
+    align-content: start;
+    align-items: flex-start;
+  }
+
+  [data-valign="center"] {
+    align-content: center;
+    align-items: center;
+  }
+
+  [data-valign="end"] {
+    align-content: end;
+    align-items: flex-end;
+  }
+
+
+  /* ========================================
+     GAP CONTROL
+     Override default gaps
+     ======================================== */
+
+  [data-gap="none"] {
+    gap: 0;
+  }
+
+  [data-gap="sm"] {
+    gap: var(--space-3);
+  }
+
+  [data-gap="md"] {
+    gap: var(--space-5);
+  }
+
+  [data-gap="lg"] {
+    gap: var(--space-8);
+  }
+
+  [data-gap="xl"] {
+    gap: var(--space-12);
+  }
+
+
+  /* ========================================
+     PADDING CONTROL
+     Section padding variations
+     ======================================== */
+
+  [data-padding="none"] {
+    padding-block: 0;
+  }
+
+  [data-padding="sm"] {
+    padding-block: var(--space-8);
+  }
+
+  [data-padding="md"] {
+    padding-block: var(--space-12);
+  }
+
+  [data-padding="lg"] {
+    padding-block: var(--space-16);
+  }
+
+  [data-padding="xl"] {
+    padding-block: var(--space-24);
+  }
+
+  /* Reduce vertical padding on mobile — large values waste screen space */
+  @media (max-width: 40rem) {
+    [data-padding="lg"] {
+      padding-block: var(--space-10);
+    }
+
+    [data-padding="xl"] {
+      padding-block: var(--space-12);
+    }
+  }
+
+
+  /* ========================================
+     INLINE PADDING CONTROL
+     Horizontal padding for content spacing from edges
+     ======================================== */
+
+  [data-padding-inline="none"] {
+    padding-inline: 0;
+  }
+
+  [data-padding-inline="sm"] {
+    padding-inline: var(--space-4);
+  }
+
+  [data-padding-inline="md"] {
+    padding-inline: var(--space-6);
+  }
+
+  [data-padding-inline="lg"] {
+    padding-inline: var(--space-8);
+  }
+
+  [data-padding-inline="xl"] {
+    padding-inline: var(--space-12);
+  }
+
+
+  /* ========================================
+     FLEX UTILITIES
+     Composable flex layout controls
+     ======================================== */
+
+  /* Flex direction */
+  [data-flex] {
+    display: flex;
+  }
+
+  [data-flex="row"] {
+    display: flex;
+    flex-direction: row;
+  }
+
+  [data-flex="col"] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  [data-flex="row-reverse"] {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  [data-flex="col-reverse"] {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  /* Flex wrap */
+  [data-wrap] {
+    flex-wrap: wrap;
+  }
+
+  [data-wrap="nowrap"] {
+    flex-wrap: nowrap;
+  }
+
+  /* Flex child: grow/shrink */
+  [data-grow] {
+    flex-grow: 1;
+  }
+
+  [data-shrink="0"] {
+    flex-shrink: 0;
+  }
+
+  /* Flex basis shortcuts */
+  [data-basis="full"] { flex-basis: 100%; }
+  [data-basis="half"] { flex-basis: 50%; }
+  [data-basis="third"] { flex-basis: 33.333%; }
+  [data-basis="quarter"] { flex-basis: 25%; }
+
+
+  /* ========================================
+     GRID UTILITIES
+     Composable grid layout controls
+     ======================================== */
+
+  /* Explicit column grids */
+  [data-grid] {
+    display: grid;
+  }
+
+  [data-grid="2"] {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--grid-gap, var(--space-5));
+  }
+
+  [data-grid="3"] {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--grid-gap, var(--space-5));
+  }
+
+  [data-grid="4"] {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--grid-gap, var(--space-5));
+  }
+
+  /* Auto-fit responsive grids */
+  [data-grid="auto-sm"] {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+    gap: var(--grid-gap, var(--space-5));
+  }
+
+  [data-grid="auto"] {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+    gap: var(--grid-gap, var(--space-5));
+  }
+
+  [data-grid="auto-lg"] {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
+    gap: var(--grid-gap, var(--space-5));
+  }
+
+  /* Grid span */
+  [data-span="2"] { grid-column: span 2; }
+  [data-span="3"] { grid-column: span 3; }
+  [data-span="full"] { grid-column: 1 / -1; }
+
+  /* Responsive: multi-column grids collapse on mobile */
+  @media (max-width: 40rem) {
+    [data-grid="2"],
+    [data-grid="3"],
+    [data-grid="4"] {
+      grid-template-columns: 1fr;
+    }
+
+    [data-span="2"],
+    [data-span="3"],
+    [data-span="full"] {
+      grid-column: auto;
+    }
+  }
+
+  @media (min-width: 40rem) and (max-width: 64rem) {
+    [data-grid="3"],
+    [data-grid="4"] {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+
+  /* ========================================
+     COMMON LAYOUT PATTERNS
+     Pre-built structural layouts
+     ======================================== */
+
+  /*
+   * LAYOUT: sidebar
+   * Content with a fixed-width sidebar
+   * Sidebar is first child, content is second
+   */
+  [data-layout="sidebar"] {
+    display: grid;
+    grid-template-columns: minmax(12rem, 16rem) 1fr;
+    gap: var(--space-6);
+    align-items: start;
+  }
+
+  [data-layout="sidebar-right"] {
+    display: grid;
+    grid-template-columns: 1fr minmax(12rem, 16rem);
+    gap: var(--space-6);
+    align-items: start;
+  }
+
+  /* Responsive: sidebar stacks on narrow screens */
+  @media (max-width: 48rem) {
+    [data-layout="sidebar"],
+    [data-layout="sidebar-right"] {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  /*
+   * LAYOUT: holy-grail
+   * Classic 3-column layout: sidebar | content | sidebar
+   */
+  [data-layout="holy-grail"] {
+    display: grid;
+    grid-template-columns: minmax(10rem, 14rem) 1fr minmax(10rem, 14rem);
+    gap: var(--space-6);
+    align-items: start;
+  }
+
+  @media (max-width: 64rem) {
+    [data-layout="holy-grail"] {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  /*
+   * LAYOUT: dashboard
+   * Dense auto-fill grid for dashboard cards/widgets
+   */
+  [data-layout="dashboard"] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
+    gap: var(--space-5);
+    align-items: start;
+  }
+
+
+  /* ========================================
+     POSITION UTILITIES
+     Static positioning helpers
+     ======================================== */
+
+  [data-position="sticky"] {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--z-sticky);
+  }
+
+  [data-position="relative"] {
+    position: relative;
+  }
+
+  /* Overflow control */
+  [data-overflow="hidden"] { overflow: hidden; }
+  [data-overflow="auto"] { overflow: auto; }
+  [data-overflow="scroll"] { overflow: scroll; }
+
+  /* Z-index layers */
+  [data-z="base"] { z-index: var(--z-base); }
+  [data-z="raised"] { z-index: var(--z-raised); }
+  [data-z="dropdown"] { z-index: var(--z-dropdown); }
+  [data-z="overlay"] { z-index: var(--z-overlay); }
+
+
+  /* ========================================
+     DISPLAY UTILITIES
+     ======================================== */
+
+  [data-display="none"] { display: none; }
+  [data-display="block"] { display: block; }
+  [data-display="inline"] { display: inline; }
+  [data-display="inline-flex"] { display: inline-flex; }
+  [data-display="inline-block"] { display: inline-block; }
+
+  /* Responsive visibility */
+  @media (max-width: 40rem) {
+    [data-hide="mobile"] { display: none; }
+  }
+
+  @media (min-width: 40rem) and (max-width: 64rem) {
+    [data-hide="tablet"] { display: none; }
+  }
+
+  @media (min-width: 64rem) {
+    [data-hide="desktop"] { display: none; }
+  }
+}