TDvorak/MyClub
1
0
Fork 0
mirror of https://github.com/Dvorinka/MyClubServer.git synced 2026-06-03 18:22:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
3ce26509522d780bac1348874fecb3d89f59ff3c
MyClub/DOCS/CSS_CLASSES_REFERENCE.md
T
Tomáš Dvořák 35d0954afd dev day #62
2025-10-16 17:10:13 +02:00

17 KiB
Raw Blame History

CSS Classes Reference - MyUIbrix

📘 Complete Guide to Styling Classes

This document explains all CSS classes, selectors, and data attributes you can use for custom styling in MyUIbrix.

🎯 Element Selectors

Using data-element Attributes

All major sections have data-element attributes for targeting:

/* Target specific elements */
[data-element="hero"] { }
[data-element="news"] { }
[data-element="matches"] { }
[data-element="table"] { }
[data-element="team"] { }
[data-element="videos"] { }
[data-element="gallery"] { }
[data-element="sponsors"] { }
[data-element="merch"] { }
[data-element="newsletter"] { }
[data-element="banner"] { }

Example Usage

/* Custom hero section styling */
[data-element="hero"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 100px 20px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* News section with grid */
[data-element="news"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding: 60px 0;
}

🏗️ Layout Classes

Container Classes

.container {
  /* Main content container */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-fluid {
  /* Full-width container */
  width: 100%;
  padding: 0 20px;
}

.container-narrow {
  /* Narrow container for reading */
  max-width: 800px;
  margin: 0 auto;
}

Section Classes

.section {
  /* Standard section spacing */
  padding: 80px 0;
}

.section-sm {
  /* Small section spacing */
  padding: 40px 0;
}

.section-lg {
  /* Large section spacing */
  padding: 120px 0;
}

📰 News & Articles

News Grid Variants

/* News Grid Layout */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* News Card */
.news-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s;
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

/* News Featured */
.news-featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* News Image */
.news-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

/* News Content */
.news-content {
  padding: 20px;
}

/* News Title */
.news-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.3;
}

/* News Excerpt */
.news-excerpt {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* News Meta */
.news-meta {
  display: flex;
  gap: 15px;
  font-size: 0.875rem;
  color: #999;
}

Magazine Layout

.news-magazine {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
}

.news-magazine-featured {
  /* Left column - featured article */
}

.news-magazine-sidebar {
  /* Right column - smaller articles */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

Scroller Layout

.news-scroller {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.news-scroller::-webkit-scrollbar {
  height: 8px;
}

.news-scroller::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.news-scroller-item {
  flex: 0 0 350px;
  scroll-snap-align: start;
}

⚽ Matches Section

Match Cards

.match-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.match-teams {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.match-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.match-team-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.match-team-name {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
}

.match-vs {
  font-size: 1.5rem;
  font-weight: 700;
  color: #999;
}

.match-score {
  font-size: 2.5rem;
  font-weight: 700;
  color: #000;
}

.match-info {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: #666;
}

Compact Match View

.match-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  margin-bottom: 10px;
}

.match-compact-team {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.match-compact-logo {
  width: 40px;
  height: 40px;
}

.match-compact-score {
  font-size: 1.5rem;
  font-weight: 700;
  min-width: 80px;
  text-align: center;
}

📊 Table (League Standings)

.league-table {
  width: 100%;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.league-table-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  font-size: 1.5rem;
  font-weight: 700;
}

.league-table table {
  width: 100%;
  border-collapse: collapse;
}

.league-table th {
  padding: 15px;
  text-align: left;
  font-weight: 600;
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

.league-table td {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.league-table tr:hover {
  background: #f8f9fa;
}

.league-table-position {
  width: 50px;
  font-weight: 700;
  font-size: 1.125rem;
}

.league-table-team {
  display: flex;
  align-items: center;
  gap: 10px;
}

.league-table-logo {
  width: 30px;
  height: 30px;
}

/* Highlight home team */
.league-table-home {
  background: rgba(102, 126, 234, 0.1);
  font-weight: 600;
}

/* Champions league spots */
.league-table-champions {
  border-left: 4px solid #28a745;
}

/* Europa league spots */
.league-table-europa {
  border-left: 4px solid #ffc107;
}

/* Relegation zone */
.league-table-relegation {
  border-left: 4px solid #dc3545;
}

👥 Team Section

Player Cards

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
}

.player-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s;
}

.player-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.player-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.player-info {
  padding: 20px;
}

.player-number {
  font-size: 3rem;
  font-weight: 900;
  color: #e0e0e0;
  line-height: 1;
}

.player-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 10px 0;
}

.player-position {
  color: #666;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.player-stats {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.player-stat {
  text-align: center;
}

.player-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #667eea;
}

.player-stat-label {
  font-size: 0.75rem;
  color: #999;
  text-transform: uppercase;
}

Team Formation View

.team-formation {
  background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);
  border-radius: 16px;
  padding: 40px;
  position: relative;
  min-height: 600px;
}

.formation-line {
  display: flex;
  justify-content: space-around;
  margin: 30px 0;
}

.formation-player {
  background: white;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
}

.formation-player:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

🎬 Videos Section

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}

.video-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background: #000;
}

.video-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.video-play-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: white;
}

.video-info {
  padding: 20px;
}

.video-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.video-meta {
  display: flex;
  gap: 15px;
  font-size: 0.875rem;
  color: #666;
}

🖼️ Gallery Section

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  aspect-ratio: 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* Masonry Layout */
.gallery-masonry {
  column-count: 3;
  column-gap: 20px;
}

.gallery-masonry-item {
  break-inside: avoid;
  margin-bottom: 20px;
}

🤝 Sponsors Section

.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  align-items: center;
}

.sponsor-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: white;
  border-radius: 12px;
  transition: all 0.3s;
  filter: grayscale(100%);
  opacity: 0.6;
}

.sponsor-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.sponsor-logo img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}

/* Pyramid Layout */
.sponsors-pyramid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.sponsors-tier {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.sponsors-tier-1 .sponsor-logo img {
  max-height: 120px;
}

.sponsors-tier-2 .sponsor-logo img {
  max-height: 80px;
}

.sponsors-tier-3 .sponsor-logo img {
  max-height: 60px;
}

💌 Newsletter Section

.newsletter {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 80px 40px;
  border-radius: 20px;
  text-align: center;
  color: white;
}

.newsletter-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.newsletter-description {
  font-size: 1.125rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

.newsletter-form {
  display: flex;
  gap: 15px;
  max-width: 500px;
  margin: 0 auto;
}

.newsletter-input {
  flex: 1;
  padding: 15px 20px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
}

.newsletter-button {
  padding: 15px 40px;
  background: white;
  color: #667eea;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.newsletter-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

🎨 Utility Classes

Spacing

/* Margins */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }

/* Padding */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

/* Directional */
.mt-3 { margin-top: 1rem; }
.mb-3 { margin-bottom: 1rem; }
.pt-3 { padding-top: 1rem; }
.pb-3 { padding-bottom: 1rem; }

Display

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-inline-block { display: inline-block; }

Flexbox

.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }

Text

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-normal { font-weight: 400; }

🎭 Animation Classes

/* Fade In */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.6s ease-in;
}

/* Slide Up */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.6s ease-out;
}

/* Scale In */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn 0.4s ease-out;
}

/* Hover Effects */
.hover-lift {
  transition: transform 0.3s;
}

.hover-lift:hover {
  transform: translateY(-8px);
}

.hover-scale {
  transition: transform 0.3s;
}

.hover-scale:hover {
  transform: scale(1.05);
}

📱 Responsive Classes

/* Mobile First */
@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .md\:flex-row {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Hide on Mobile */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on Desktop */
@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}

🎯 Custom Properties (CSS Variables)

:root {
  /* Club Theme Colors */
  --color-primary: #667eea;
  --color-secondary: #764ba2;
  --color-accent: #ffc107;
  
  /* Neutral Colors */
  --color-text: #212529;
  --color-text-light: #6c757d;
  --color-bg: #ffffff;
  --color-bg-gray: #f8f9fa;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.15);
}

/* Usage */
.my-element {
  background: var(--color-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

💡 Quick Examples

Example 1: Gradient Hero with Animation

[data-element="hero"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 120px 20px;
  text-align: center;
  color: white;
  animation: fadeIn 1s ease-in;
}

[data-element="hero"] h1 {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 20px;
  animation: slideUp 0.8s ease-out 0.2s backwards;
}

[data-element="hero"] p {
  font-size: 1.5rem;
  opacity: 0.9;
  animation: slideUp 0.8s ease-out 0.4s backwards;
}

Example 2: Card Grid with Hover Effects

[data-element="news"] {
  padding: 80px 0;
}

[data-element="news"] .news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}

[data-element="news"] .news-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

[data-element="news"] .news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

Example 3: Dark Mode Support

/* Light mode (default) */
[data-element="matches"] {
  background: white;
  color: #212529;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  [data-element="matches"] {
    background: #1a1a1a;
    color: #f8f9fa;
  }
  
  [data-element="matches"] .match-card {
    background: #2d2d2d;
    border: 1px solid #404040;
  }
}

🔍 Inspecting Elements

Browser DevTools

  1. Right-click any element → "Inspect"
  2. Look for data-element attribute
  3. See applied classes in Styles panel
  4. Test CSS changes live

Finding Classes

// In browser console
document.querySelector('[data-element="hero"]').classList;
document.querySelectorAll('.news-card');

✅ Best Practices

  1. Use data-element selectors for major sections
  2. Use BEM naming for component classes
  3. Leverage CSS variables for consistency
  4. Mobile-first responsive design
  5. Test across browsers (Chrome, Firefox, Safari)
  6. Keep specificity low (avoid !important)
  7. Use transitions for smooth animations
  8. Optimize for performance (avoid heavy animations)

Last Updated: December 2024
Version: 2.0
Status: ✅ Complete Reference

Reference in New Issue View Git Blame Copy Permalink