ahmed-hany94 / website-templates

A cheat sheet for website elements

website-templates

A cheat sheet for website elements.

Directory Index

• Navigation

  • Navbar
    • ✅ Logo + links {3,4} + Notification Bell + Login Icon
    • Pagination
    • ✅ Tabs
    • Sidebar
    • Breadcrumbs
    • Command Palettes
    • Steps

• Overlays

  • Modals
  • Slide-Overs / Slide-Ins
  • Notifications

• Elements

  • Avatars
    • Avatar Group Stacked
  • Dropdown
  • Badges
  • Buttons
  • Button Groups
  • Card

• Layout

  • Containers
  • Hero Section
  • Testimonial Cards
  • ✅ Feature Table
  • List
  • Media Objects
  • Dividers

• Pages

  • Search Bar Pinned Cards Sidebar + Table | Feed Column | Dashboard + Activity Column (github) - Home Screens

    • Detail Screens

  • Settings

    • Settings Screens

  • Landing Page

  • E-commerce

    • Form
    • Two-Column Cards with form and submit actions
      • https://tailwindui.com/components/preview#component-db11f83176d113e39bf2559da9344b1c

• Dark mode

• Password Strength

---

Tips:

---

Color Palettes

• Black, White, Grey, 1 Color

Typography

reference

• Line-Length (max-width): 50-75 characters
• Font-Size (font-size): 17-23px
• Line-Height (line-height): 25-31px
• Paragraph-Spacing (margin-bottom): more than a line break (0), less than a full line height
• Title-Font
• Title-Font-Size
• Accent-Font for labels
• Accent-Text => SLUB (Smaller, Lighter, Uppercase, Bold)
  • Lighter == Less Opacity
• Spacing: Outer Spacing > Inner Spacing

---

Debugging CSS tricks:

• The console.log() of CSS
  • outline: 1px solid limegreen !important; // green box around
  • background: rgba(0 100 0 / 0.2) !important; // green highlight
• Find the most expensive CSS selectors
  • MEASURE the performance of your page
  • border-radius
  • box-shadow
  • opacity
  • transform
  • filter
  • position: fixed
• Inspect CSS Animations
  • Ctrl+Shift+P
  • type "Show Animations"

Checklist

Heydon's Checklist