Introducció

El fitxer main.css és un sistema de disseny base genèric que proporciona una base sòlida per a desenvolupar aplicacions web mantenint la identitat visual CTFC Utility.

Aquest fitxer està dissenyat per ser descarregat i utilitzat com a fonament, afegint-hi les classes CSS específiques de cada aplicació.

Variables CSS

El sistema utilitza variables CSS per mantenir la coherència en colors, espaiat i altres propietats:

Colors Principals

--primary-blue #437697 Color principal i botons
--secondary-blue #6b9bc7 Elements secundaris
--success-green #28a745 Botons de guardar
--danger-red #dc3545 Botons d'eliminar

Espaiat i Mides

--spacing-xs: 8px
--spacing-sm: 12px
--spacing-md: 16px
--spacing-lg: 24px
--spacing-xl: 32px
--spacing-2xl: 40px
--spacing-3xl: 48px

Border Radius

--radius-sm: 8px
--radius-md: 12px
--radius-lg: 16px
--radius-xl: 20px
--radius-full: 25px

Elements Base Genèrics

El sistema proporciona classes base reutilitzables per a elements comuns:

Botons (.btn)

Característiques: Altura mínima 44px, focus visible, transicions suaus, flexbox centrat.

Targetes (.card)

Targeta Base

Exemple de targeta utilitzant la classe .card

Característiques: Ombra, border-radius, transicions hover, border animat.

Grid (.grid)

Columna 1
Columna 2

Classes disponibles: .grid-cols-1, .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-auto-fit, .grid-cols-auto-fill

Layout (.container, .section)

.container: Centrat, max-width 1200px, padding automàtic
.section: Padding 48px 48px (desktop), responsive

Classes Utilitàries

Sistema de classes per a espaiat, alineació i layout ràpid:

Espaiat (Margin i Padding)

Margin Bottom: .mb-0, .mb-1, .mb-2, .mb-3, .mb-4, .mb-5
Margin Top: .mt-0, .mt-1, .mt-2, .mt-3, .mt-4, .mt-5
Padding: .p-0, .p-1, .p-2, .p-3, .p-4, .p-5

Alineació i Layout

Text: .text-center, .text-left, .text-right
Flexbox: .flex, .flex-col, .flex-row, .items-center, .justify-center
Display: .hidden, .visible

Responsive Design Base

El sistema inclou breakpoints base per a adaptació mòbil:

Breakpoints

Desktop: > 768px Estils base, padding complet
Tablet: ≤ 768px Padding reduït, tipografia adaptada
Mòbil: ≤ 480px Padding mínim, tipografia compacta

Adaptacions Automàtiques

  • Tipografia: Mides adaptatives per H1, H2, H3
  • Layout: Grids que passen a una columna
  • Espaiat: Padding de seccions adaptat
  • Containers: Màrgins i padding responsius

Animacions i Transicions

Sistema d'animacions base per a millorar la UX:

Transicions Base

--transition-fast: 0.2s ease Per a canvis ràpids (hover, focus)
--transition-normal: 0.3s ease Per a canvis estàndard
--transition-slow: 0.4s ease Per a canvis més suaus (cards, transformacions)

Keyframes Disponibles

.fade-in: Apareix des de baix amb opacitat
.slide-in: Desplaçament des de l'esquerra
.fade-in-down: Apareix des de dalt
.fade-in-up: Apareix des de baix

Accessibilitat

Característiques d'accessibilitat incloses:

Característiques d'Accessibilitat

  • Focus Visible: Outline visible per a navegació per teclat
  • Reduced Motion: Respecta preferències d'usuari per a moviment reduït
  • Screen Reader: Classe .sr-only per a text ocult
  • Contrast: Colors amb contrast adequat
  • Altura Mínima: Botons amb altura mínima de 44px

Com Utilitzar el Sistema

Guia pas a pas per implementar el sistema:

1. Descarregar i Incloure

<link rel="stylesheet" href="main.css">

2. Utilitzar Classes Base

<div class="container">
    <section class="section">
        <div class="grid grid-cols-auto-fit">
            <div class="card">
                <button class="btn btn-primary">Acció Principal</button>
                <button class="btn btn-success">Guardar</button>
                <button class="btn btn-danger">Eliminar</button>
            </div>
        </div>
    </section>
</div>

3. Afegir Classes Pròpies

/* Afegir després del main.css */
.my-custom-button {
    background: var(--primary-blue);
    color: white;
    /* Altres estils específics */
}

4. Personalitzar Variables (Opcional)

:root {
    --primary-blue: #2d4a2f; /* Color personalitzat */
    --spacing-lg: 30px;      /* Espaiat personalitzat */
}

Exemples Pràctics

Casos d'ús comuns amb el sistema:

Layout de Pàgina Bàsic

Header amb .section
Main content amb .section
Footer amb .section

Formulari amb Botons d'Acció

Formulari d'Exemple

Conclusió

El sistema de disseny base proporciona una base sòlida i coherent per a desenvolupar aplicacions web mantenint la identitat visual CTFC Utility.

Avantatges:

  • Desenvolupament més ràpid amb classes predefinides
  • Coherència visual entre aplicacions
  • Responsive design integrat
  • Accessibilitat inclosa per defecte
  • Fàcil personalització i extensió
  • Sistema de botons complet (primary, secondary, success, danger)