ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-12-03 18:15:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Calvin Jhunjhuwala
2025-11-25 17:29:58 -08:00
parent e92929e148
commit 97c302822a
13 changed files with 293 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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">

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

@@ -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">

2
about/index.page.tsx
View File

@@ -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: {

16
about/xrp.page.tsx
View File

@@ -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">

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

@@ -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">

2
docs/use-cases/payments/index.page.tsx
View File

@@ -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">

4
docs/use-cases/tokenization/index.page.tsx
View File

@@ -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>

2
index.page.tsx
View File

@@ -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: {

0
shared/components/Buttons/buttons.md Normal file
View File

0
shared/components/Buttons/buttons.tsx Normal file
View File

277
shared/components/PageGrid/page-grid.md Normal file
View File

@@ -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

0
shared/components/page-grid.tsx → shared/components/PageGrid/page-grid.tsx
View File

48
styles/_font.scss
View File

@@ -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;