A high-performance, responsive layout showcase featuring a trio of distinct product categories. This project highlights specialised CSS Grid implementations and a modular SCSS approach to manage multi-thematic UI components within a unified design system.
- Layout Engine: Leverages CSS Grid for the primary three-column distribution, providing precise control over column spanning and alignment.
- Styling Architecture: Modular SCSS utilising the BEM (Block Element Modifier) methodology to ensure isolated component logic.
- Thematic Variable System: Centralised SCSS variables manage the distinct color palettes (Bright Orange, Dark Cyan, and Very Dark Cyan) through a DRY (Don't Repeat Yourself) architecture.
- Markup Architecture: Pure HTML5 using semantic elements to ensure a logical document outline and improved SEO.
- Responsive Strategy: A mobile-first workflow that gracefully transitions from a single-column stack to a balanced horizontal grid.
The core of this component is its structural flexibility:
- Fractional Units: Used grid-template-columns: repeat(3, 1fr) on desktop to ensure perfectly equal distributions regardless of content length.
- Layout Pivot: Implemented a seamless breakpoint strategy that collapses the grid into a single column for mobile users, optimising readability and touch targets.
Following your suite's standard for maintainability:
- Component Encapsulation: The .vehicle-card block contains all shared logic, while modifiers like --sedan or --luxury handle the specific thematic color injections.
- Interactive States: Custom-engineered hover transitions for the 'Learn More' buttons, utilising inverse color schemes to provide clear visual affordance.
- Typography Management: Integrated Google Fonts (Lexend Deca and Big Shoulders Display) with specific attention to letter-spacing and line-height for a premium, editorial feel.
- Logical Flow: The heading structure is optimised for screen readers, ensuring a clear hierarchy of information.
- Contrast Ratios: Each theme is tested for WCAG contrast compliance, ensuring that the white text remains legible against the vibrant background colors.
- Optimisation: Zero-dependency CSS and optimised SVG assets ensure a perfect Lighthouse performance score.
- Live Site: https://3-column-preview-card-component.seanbuckle.com
- Source Code: https://github.com/seanbuckle/3-column-preview-card-component
To run this project locally:
- Clone the repository:
git clone https://github.com/seanbuckle/3-column-preview-card-component.git- Navigate to the directory:
cd 3-column-preview-card-component- Open the project: Simply open
index.htmlin your preferred browser.
Sean Buckle
📜 License This project is licensed under the MIT License - see the LICENSE file for details.
Note: This project was built as a solution to a Frontend Mentor challenge.