mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-06-08 03:06:50 +00:00
f10dbc8c29
* updating docs landing page, took far but not complete. Pushing for Gabe take over * Refactor home page sections and introduce new components - Replaced existing content in index.page.tsx with new section components for improved structure and maintainability. - Added new sections: HomeBeginJourneySection, HomeBlockchainStatsSection, HomeComplianceDirectorySection, HomeDevelopersFeatureSection, HomeFutureFinanceCallout, HomeHeroCallout, HomeInstitutionsFeatureSection, HomePartnerLogosSection, HomeStayConnectedSection, and HomeCarousel. - Updated styles for CarouselFeatured and CardStat components to enhance visual consistency and responsiveness. - Introduced SCSS for HomeHero section to manage layout and spacing effectively. * Add Payments Page and Sections - Created a new Payments page with multiple sections including Hero, Why Choose, Advanced Features, Stablecoins, Embedded Payments, Partner Logos, Flexible Integration, Developer Spotlight, and Stay Connected. - Each section is designed to highlight various aspects of the XRP Ledger Payments Infrastructure, featuring components like FeaturedVideoHero and CardsIconGrid. - Added corresponding styles and images to enhance the visual presentation of the new sections. * adding icons, updating docs landing page * updating the claude command, wrapping text with translate wrapper * use case tokenization page built * Enhance CarouselFeatured styles for improved responsiveness - Added flex-direction adjustments for CarouselFeatured component to support column-reverse layout on smaller screens and row layout on medium and larger screens. - Removed redundant vendor prefixes from box-sizing and text-decoration properties in devportal2024-v1.css for cleaner code and improved maintainability. * moving payments page to correct folder, moving payments under pages * adding developers home page * code clean up --------- Co-authored-by: gabriel-ortiz <gabriel.ortiz.github@gmail.com> Co-authored-by: gabriel-ortiz <gortiz@ripple.com>
XRPL Styles
This folder contains the source files for the XRP Ledger Dev Portal CSS. The optimized, minified version of these styles is /static/css/devportal2024-v1.css.
Build Pipeline
The CSS build uses a modern optimization pipeline:
- Sass - Compiles SCSS to CSS
- PostCSS - Processes CSS with plugins:
- PurgeCSS - Removes unused CSS (production only)
- Autoprefixer - Adds vendor prefixes for browser compatibility
- cssnano - Minifies and optimizes CSS (production only)
Performance Improvements
The optimized build dramatically improves CSS delivery:
| Metric | Before | After | Improvement |
|---|---|---|---|
| Uncompressed | 486.64 KB | 280.92 KB | 42% smaller |
| Gzipped (network) | 71.14 KB | 43.32 KB | 39% smaller |
This improves page load times, developer experience (DevTools filter: 60s → <1s), and reduces bandwidth costs.
Prerequisites
All dependencies are automatically installed via NPM:
npm install
Key dependencies:
sass- SCSS compilerpostcss-cli- PostCSS command-line interface@fullhuman/postcss-purgecss- Removes unused CSSautoprefixer- Browser compatibilitycssnano- CSS minification
Building
Production Build
For production deployments with full optimization:
npm run build-css
Includes: PurgeCSS, autoprefixer, minification (no source maps)
Development Build
For local development with debugging:
npm run build-css:dev
Includes: Autoprefixer, source maps (no PurgeCSS for faster builds)
Watch Mode
For continuous compilation during development:
npm run build-css:watch
Auto-rebuilds on file changes with source maps
Analysis
To analyze the CSS bundle composition:
npm run analyze-css
This shows:
- Bundle size and selector counts
- Bootstrap component usage
- Custom component patterns
- Optimization recommendations
Files Structure
Main Entry Point
xrpl.scss- Master file that imports all other SCSS files, Bootstrap, and defines variables
Component Styles
Each _*.scss file contains styles for specific components:
_colors.scss- Color palette and variables_font-face.scss- Font definitions_font.scss- Typography styles_layout.scss- Page layout and grid_buttons.scss- Button styles_forms.scss- Form controls_cards.scss- Card components_nav-*.scss- Navigation components (top-nav, side-nav)_content.scss- Content area styles_blog.scss- Blog-specific styles_dev-tools.scss- Developer tools styles_rpc-tool.scss- RPC tool interface_tables.scss- Table styles_footer.scss- Footer styles_callouts.scss- Callout/alert boxes_diagrams.scss- Diagram styles_print.scss- Print media styleslight/_light-theme.scss- Light theme overrides
Configuration
PostCSS Configuration
The PostCSS pipeline is configured in postcss.config.cjs at the project root.
PurgeCSS Safelist:
- Scans all
.tsx,.md,.yaml, and.htmlfiles for class names - Preserves dynamically-added classes (Bootstrap JS components, CodeMirror, etc.)
- Keeps state classes (
active,disabled,show, etc.) - Only runs in production builds
Sass Configuration
Sass is configured via command-line flags in package.json:
--load-path styles/scss- Additional import paths--source-map- Generate source maps (dev only)
Troubleshooting
"Classes are missing after build"
If you find missing styles after a production build:
- Check if the class is dynamically added via JavaScript
- Add the class pattern to the safelist in
postcss.config.cjs - Rebuild:
npm run build-css
Example safelist patterns:
deep: [
/my-dynamic-class/, // Keeps .my-dynamic-class and children
]
"Build is too slow"
For development, use:
npm run build-css:watch # Watch mode (no PurgeCSS)
# or
npm run build-css:dev # One-time dev build (no PurgeCSS)
"Seeing Sass deprecation warnings"
The warnings about @import are from Bootstrap 5's use of legacy Sass syntax. They're harmless and will be resolved when Bootstrap updates to the new @use syntax.
Adding New Styles
When adding new component styles:
- Create
_component-name.scssin this directory - Add
@import "_component-name.scss";toxrpl.scss - If using dynamic classes, add them to the PurgeCSS safelist in
postcss.config.cjs - Test:
npm run build-css:dev(dev) andnpm run build-css(prod) - Analyze:
npm run analyze-css
Further Reading
See CSS-OPTIMIZATION.md in the project root for detailed information about the optimization implementation and migration process.