Skip to main content

​
Introduction

The Natours project features a comprehensive set of reusable UI components built with modern CSS techniques including Sass, BEM methodology, and advanced CSS animations. All components follow a consistent design system with carefully crafted interactions and visual effects.

​
Component Architecture

Components are organized in the sass/components/ directory following a modular structure: 
sass/components/
├── _button.scss          # Button components and variants
├── _card.scss            # Flip cards with 3D effects
├── _form.scss            # Form inputs and controls
├── _popup.scss           # Modal popup overlay
├── _composition.scss     # Image composition with overlapping photos
├── _feature-box.scss     # Feature display boxes with gradient icons
├── _story.scss           # Customer testimonial cards
├── _bg-video.scss        # Background video component
└── layout/
    └── _navigation.scss  # Hamburger navigation menu

​
BEM Naming Convention

All components follow the BEM (Block Element Modifier) methodology for CSS class naming:
The standalone component name:
.card { }
.btn { }
.navigation { }

​
Available Components

Buttons

Primary, secondary, and text link buttons with hover animations and variants

Cards

3D flip cards with front/back sides, perfect for showcasing tours and products

Forms

Text inputs with floating labels and custom radio buttons with validation states

Navigation

Full-screen hamburger menu with animated icon and expanding background

Popup

Modal overlay with smooth animations and multi-column text layout

Composition

Overlapping image arrangement with hover effects and artistic positioning

Feature Box

Feature display boxes with gradient icons and lift-on-hover animations

Story

Customer testimonial cards with circular images and reveal-on-hover captions

Background Video

Full-screen background video with low opacity for ambient effect

​
Design System

​
Color Palette

The component library uses a carefully selected color scheme defined in sass/abstracts/_variables.scss: 
$color-primary: #55C57A;
$color-primary-light: #7ED56F;
$color-primary-dark: #28B485;

​
Typography

$default-font-size: 1.6rem;
All components use the Lato font family with weights ranging from 100 to 900.

​
Common Mixins

Components leverage reusable Sass mixins defined in sass/abstracts/_mixins.scss:

​
Absolute Center

Perfectly centers an element both horizontally and vertically: 
@mixin absCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Used in: Cards (CTA positioning), Popup (content centering), Navigation (list centering)

​
Clearfix

Clears floats within a container: 
@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

​
Component Features

All components are built with progressive enhancement in mind, featuring:
  • Smooth CSS transitions and animations
  • Hover and focus states for better UX
  • Accessibility considerations (proper focus states, semantic HTML)
  • Responsive design patterns

​
Key Techniques Used

Used extensively in the card component for flip animations using perspective, backface-visibility, and rotateY transforms.
Creates unique shapes for card images and creates the signature polygonal clipping effect on pictures.
All components use linear-gradient and radial-gradient for rich visual effects, especially on backgrounds and text.
Extensive use of Sass variables enables easy theming and consistent styling across all components.
::before and ::after pseudo-elements create visual effects without additional markup, like button hover effects and radio button indicators.

​
Getting Started

1

Choose a Component

Browse the component pages to find the UI element you need for your project.
2

Copy the HTML Structure

Each component page includes the complete HTML markup with proper BEM class names.
3

Include the Sass

Import the component’s Sass file into your main stylesheet:
@use 'components/button';
@use 'components/card';
4

Customize if Needed

Modify color variables or override specific styles to match your design system.

​
Browser Support

Some components use modern CSS features that may require vendor prefixes or have limited browser support:
  • CSS Grid
  • CSS Custom Properties
  • Clip-path
  • Backdrop-filter
  • CSS Transforms 3D
Make sure to test components in your target browsers and include appropriate prefixes using a tool like Autoprefixer.

​
Next Steps

Explore individual component pages for detailed documentation, code examples, and implementation guidelines:
  • Buttons - Learn about all button variants
  • Cards - Master the 3D flip card effect
  • Forms - Implement beautiful form controls
  • Navigation - Build the hamburger menu
  • Popup - Add modal overlays
  • Composition - Create overlapping image layouts
  • Feature Box - Display features with gradient icons
  • Story - Build testimonial cards with circular images
  • Background Video - Add ambient video backgrounds

Build docs developers (and LLMs) love

Get started for freeTalk to us