adding folder structure, cleaning up font, add readme for page grid

_code-samples/build-a-desktop-wallet/js/7-send-xrp/view/template.html

@@ -92,7 +92,7 @@
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <h1 class="modal-title fs-5" id="send-xrp-modal-label">Send XRP</h1>
+                        <h1 class="modal-title subhead-sm-r" id="send-xrp-modal-label">Send XRP</h1>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">

_code-samples/build-a-desktop-wallet/js/8-domain-verification/view/template.html

@@ -92,7 +92,7 @@
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <h1 class="modal-title fs-5" id="send-xrp-modal-label">Send XRP</h1>
+                        <h1 class="modal-title subhead-sm-r" id="send-xrp-modal-label">Send XRP</h1>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">

about/index.page.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from '@redocly/theme/components/Link/Link';
-import { PageGrid, PageGridCol, PageGridRow } from "shared/components/page-grid";
+import { PageGrid, PageGridCol, PageGridRow } from "shared/components/PageGrid/page-grid";
 
 export const frontmatter = {
   seo: {

about/xrp.page.tsx

@@ -229,7 +229,7 @@ export default function XrpOverview() {
                     className="mw-100 mb-2 invertible-img"
                     src={briefcaseIcon}
                   />
-                  <h6 className="fs-4-5">
+                  <h6 className="subhead-sm-r">
                     {translate("Financial Institutions")}
                   </h6>
                   <p className="">
@@ -244,7 +244,7 @@ export default function XrpOverview() {
                     className="mw-100 mb-2 invertible-img"
                     src={userIcon}
                   />
-                  <h6 className="fs-4-5">
+                  <h6 className="subhead-sm-r">
                     {translate("Individual Consumers")}
                   </h6>
                   <p>
@@ -361,7 +361,7 @@ export default function XrpOverview() {
               </h5>
               <ul className={`nav nav-grid-lg cols-of-${totalCols}`} id="wallets">
                 <li className="nav-item nav-grid-head">
-                  <h6 className="fs-4-5">{translate("Software Wallets")}</h6>
+                  <h6 className="subhead-sm-r">{translate("Software Wallets")}</h6>
                 </li>
                 {softwallets.map((wallet) => (
                   <li key={wallet.id} className="nav-item">
@@ -381,7 +381,7 @@ export default function XrpOverview() {
                   </li>
                 ))}
                 <li className="nav-item nav-grid-head">
-                  <h6 className="fs-4-5">{translate("Hardware Wallets")}</h6>
+                  <h6 className="subhead-sm-r">{translate("Hardware Wallets")}</h6>
                 </li>
                 {hardwallets.map((wallet) => (
                   <li className="nav-item" key={wallet.id}>
@@ -423,7 +423,7 @@ export default function XrpOverview() {
               </p>
               <div className="card-grid card-grid-2xN mb-10">
                 <div>
-                  <h6 className="fs-4-5">{translate("Spot Exchanges")}</h6>
+                  <h6 className="subhead-sm-r">{translate("Spot Exchanges")}</h6>
                   <p className="mb-0">
                     {translate(
                       "Spot exchanges allow people to buy and sell cryptocurrencies at current (spot) market rates."
@@ -431,7 +431,7 @@ export default function XrpOverview() {
                   </p>
                 </div>
                 <div>
-                  <h6 className="fs-4-5">
+                  <h6 className="subhead-sm-r">
                     {translate("Futures, Options and Swap Exchanges")}
                   </h6>
                   <p className="mb-0">
@@ -441,7 +441,7 @@ export default function XrpOverview() {
                   </p>
                 </div>
                 <div>
-                  <h6 className="fs-4-5">
+                  <h6 className="subhead-sm-r">
                     {translate("Custodial Exchanges")}
                   </h6>
                   <p className="mb-0">
@@ -451,7 +451,7 @@ export default function XrpOverview() {
                   </p>
                 </div>
                 <div>
-                  <h6 className="fs-4-5">
+                  <h6 className="subhead-sm-r">
                     {translate("Non-Custodial Exchanges")}
                   </h6>
                   <p className="mb-0">

docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md

@@ -1106,7 +1106,7 @@ const { sendXrp } = require('./library/7_helpers')
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="send-xrp-modal-label">Send XRP</h1>
+                    <h1 class="modal-title subhead-sm-r" id="send-xrp-modal-label">Send XRP</h1>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">

docs/use-cases/payments/index.page.tsx

@@ -221,7 +221,7 @@ const PaymentsPage: React.FC = () => {
             
           </div>
           <div className="text-content">
-            <h6 className="eyebrow mb-3 text-large">
+            <h6 className="eyebrow mb-3 subhead-sm-r">
               {translate("Payments")}
             </h6>
             <h2 className="h4 h2-sm mb-10">

docs/use-cases/tokenization/index.page.tsx

@@ -199,7 +199,7 @@ export default function Tokenization() {
                   "Work with a variety of tokens supported by the XRP Ledger."
                 )}
               </h2>
-              <h6 className="eyebrow mb-3 text-large">
+              <h6 className="eyebrow mb-3 subhead-sm-r">
                 {translate("Tokenization")}
               </h6>
             </div>
@@ -273,7 +273,7 @@ export default function Tokenization() {
                 target="_blank"
                 href={article.url}
               >
-                <div className="time h4 normal mb-8">
+                <div className="time h4 mb-8">
                   {translate(article.time)}
                 </div>
                 <div className="h5 mb-4">{translate(article.title)}</div>

index.page.tsx

@@ -1,7 +1,7 @@
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { BenefitsSection } from 'shared/components/benefits-section';
-import { PageGrid, PageGridCol, PageGridRow } from 'shared/components/page-grid';
+import { PageGrid, PageGridCol, PageGridRow } from 'shared/components/PageGrid/page-grid';
 
 export const frontmatter = {
   seo: {

shared/components/PageGrid/page-grid.md

@@ -0,0 +1,277 @@
+# PageGrid Component
+
+A responsive grid system component for creating flexible layouts with support for multiple breakpoints.
+
+## Overview
+
+The PageGrid component provides a flexible grid layout system with three main components:
+- `PageGrid` - The container component
+- `PageGrid.Row` - Row component for grouping columns
+- `PageGrid.Col` - Column component with responsive sizing and offset support
+
+## Breakpoints
+
+The grid system supports the following breakpoints:
+- `base` - Default/mobile (applies to all sizes)
+- `sm` - Small screens
+- `md` - Medium screens
+- `lg` - Large screens
+- `xl` - Extra large screens
+
+## Basic Usage
+
+```tsx
+import { PageGrid } from '@/shared/components/PageGrid/page-grid';
+
+function MyComponent() {
+  return (
+    <PageGrid>
+      <PageGrid.Row>
+        <PageGrid.Col span={6}>
+          Column 1
+        </PageGrid.Col>
+        <PageGrid.Col span={6}>
+          Column 2
+        </PageGrid.Col>
+      </PageGrid.Row>
+    </PageGrid>
+  );
+}
+```
+
+## PageGrid Props
+
+The root `PageGrid` component accepts all standard HTML div attributes:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `className` | `string` | Additional CSS classes to apply |
+| `...rest` | `HTMLDivElement attributes` | Any other HTML div attributes |
+
+## PageGrid.Row Props
+
+The `PageGrid.Row` component accepts all standard HTML div attributes:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `className` | `string` | Additional CSS classes to apply |
+| `...rest` | `HTMLDivElement attributes` | Any other HTML div attributes |
+
+## PageGrid.Col Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `span` | `number \| "auto" \| "fill" \| ResponsiveValue` | Column span width |
+| `offset` | `number \| ResponsiveValue` | Column offset (left margin) |
+| `className` | `string` | Additional CSS classes to apply |
+| `...rest` | `HTMLDivElement attributes` | Any other HTML div attributes |
+
+### Span Values
+
+- **Number** (e.g., `1-12`): Fixed column width
+- **"auto"**: Column takes up only the space it needs
+- **"fill"**: Column fills remaining available space
+- **Responsive Object**: Different spans for different breakpoints
+
+### Offset Values
+
+- **Number** (e.g., `1-12`): Number of columns to offset
+- **Responsive Object**: Different offsets for different breakpoints
+
+## Examples
+
+### Fixed Column Widths
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    <PageGrid.Col span={4}>Sidebar</PageGrid.Col>
+    <PageGrid.Col span={8}>Main Content</PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+### Auto and Fill
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    <PageGrid.Col span="auto">Minimal Width</PageGrid.Col>
+    <PageGrid.Col span="fill">Takes Remaining Space</PageGrid.Col>
+    <PageGrid.Col span="auto">Another Auto</PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+### Responsive Layout
+
+Create layouts that adapt to different screen sizes:
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    <PageGrid.Col 
+      span={{
+        base: 12,    // Full width on mobile
+        sm: 12,      // Full width on small screens
+        md: 6,       // Half width on medium screens
+        lg: 4,       // Third width on large screens
+        xl: 3        // Quarter width on extra large screens
+      }}
+    >
+      Responsive Column
+    </PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+### Using Offsets
+
+Center content or create spacing with offsets:
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    {/* Center an 8-column element */}
+    <PageGrid.Col span={8} offset={2}>
+      Centered Content
+    </PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+### Responsive Offsets
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    <PageGrid.Col 
+      span={6}
+      offset={{
+        base: 0,     // No offset on mobile
+        md: 3        // Offset by 3 columns on medium+ screens
+      }}
+    >
+      Content
+    </PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+### Complex Responsive Layout
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    {/* Hero section */}
+    <PageGrid.Col span={12}>
+      <h1>Page Title</h1>
+    </PageGrid.Col>
+  </PageGrid.Row>
+  
+  <PageGrid.Row>
+    {/* Sidebar - full width on mobile, 1/3 on desktop */}
+    <PageGrid.Col 
+      span={{
+        base: 12,
+        lg: 4
+      }}
+    >
+      <aside>Sidebar</aside>
+    </PageGrid.Col>
+    
+    {/* Main content - full width on mobile, 2/3 on desktop */}
+    <PageGrid.Col 
+      span={{
+        base: 12,
+        lg: 8
+      }}
+    >
+      <main>Main Content</main>
+    </PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+### Multiple Columns with Equal Width
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    <PageGrid.Col span={3}>Column 1</PageGrid.Col>
+    <PageGrid.Col span={3}>Column 2</PageGrid.Col>
+    <PageGrid.Col span={3}>Column 3</PageGrid.Col>
+    <PageGrid.Col span={3}>Column 4</PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+### Nested Grids
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    <PageGrid.Col span={12}>
+      <PageGrid>
+        <PageGrid.Row>
+          <PageGrid.Col span={6}>Nested Column 1</PageGrid.Col>
+          <PageGrid.Col span={6}>Nested Column 2</PageGrid.Col>
+        </PageGrid.Row>
+      </PageGrid>
+    </PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+## CSS Classes Generated
+
+The component generates the following CSS classes:
+
+### Container
+- `xrpl-grid__container`
+
+### Row
+- `xrpl-grid__row`
+
+### Column Spans
+- `xrpl-grid__col-{number}` (e.g., `xrpl-grid__col-6`)
+- `xrpl-grid__col-auto`
+- `xrpl-grid__col` (for fill)
+- `xrpl-grid__col-{breakpoint}-{number}` (e.g., `xrpl-grid__col-md-6`)
+- `xrpl-grid__col-{breakpoint}-auto`
+- `xrpl-grid__col-{breakpoint}` (for fill)
+
+### Column Offsets
+- `xrpl-grid__offset-{number}` (e.g., `xrpl-grid__offset-2`)
+- `xrpl-grid__offset-{breakpoint}-{number}` (e.g., `xrpl-grid__offset-md-2`)
+
+## TypeScript Types
+
+```typescript
+type PageGridBreakpoint = "base" | "sm" | "md" | "lg" | "xl";
+type ResponsiveValue<T> = T | Partial<Record<PageGridBreakpoint, T>>;
+type PageGridSpanValue = number | "auto" | "fill";
+type PageGridOffsetValue = number;
+
+interface PageGridColProps {
+  span?: ResponsiveValue<PageGridSpanValue>;
+  offset?: ResponsiveValue<PageGridOffsetValue>;
+  className?: string;
+  // ... plus all HTMLDivElement attributes
+}
+```
+
+## Best Practices
+
+1. **Use semantic HTML**: Wrap content in appropriate semantic elements within columns
+2. **Mobile-first**: Start with base/mobile layout and progressively enhance for larger screens
+3. **Keep it simple**: Avoid overly complex nested grid structures when possible
+4. **Test responsiveness**: Verify layouts work well at all breakpoint transitions
+5. **Accessibility**: Ensure grid layouts maintain logical reading order for screen readers
+
+## Notes
+
+- The total columns in the grid system is typically 12 (though this depends on your CSS implementation)
+- Responsive values cascade - if you don't specify a value for a breakpoint, it inherits from the previous breakpoint
+- All components forward refs, allowing you to attach refs to the underlying DOM elements
+

styles/_font.scss

@@ -13,11 +13,6 @@ pre, code {
   font-variant-ligatures: none;
 }
 
-// h1, h2, h3, h4, h5, h6,
-// .h1, .h2, .h3, .h4, .h5, .h6 {
-//   font-weight: bold;
-// }
-
 .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: $font-family-monospace;
   font-weight: 400;
@@ -108,49 +103,6 @@ p {
   line-height: 24px;
 }
 
-.fs-base {
-  font-size: $base-size;
-}
-.fs-3 {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-.fs-4-5 {
-  font-size: 1.125rem;
-}
-.fs-5 {
-  font-size: 1.25rem;
-}
-.fs-5-5 {
-  font-size: 1.375rem;
-}
-.fs-6 {
-  font-size: 1.5rem;
-}
-.normal {
-  font-weight: normal;
-}
-.bold {
-  font-weight: bold;
-}
-
-.text-largest {
-  font-size: 1.5rem;
-  font-weight: normal;
-}
-.text-large {
-  font-size: 1.125rem;
-}
-.text-small {
-  font-size: 0.875rem;
-}
-.text-smaller {
-  font-size: 0.75rem;
-}
-.text-smallest {
-  font-size: 0.625rem;
-}
-
 /* STYLIZED LINKS */
 .arrow-link {
   text-decoration: none;