feat: Added agency-web-developer skill
- New skill for building static websites from copy + design system - HTML semantic with accessibility + SEO best practices - CSS layout with Bootstrap or custom support - JS interactivity with jQuery + GSAP for smooth animations - 3 reference files: html_semantics.md, css_layout.md, js_interactivity.md - Updated README with new skill (13 total) and references (23 total) - Workflow updated: agency-ux-copy → agency-web-developer → agency-seo No overlap with existing skills: - agency-visual-generator: generates images (PNG/webp) for social/YouTube - agency-publisher: publishes content via webhook - agency-web-developer: builds complete static websites (HTML/CSS/JS)
This commit is contained in:
AgentePotente
parent
6ac766172c
commit
b79b28034a
5 changed files with 2153 additions and 5 deletions
647
agency-web-developer/references/css_layout.md
Normal file
647
agency-web-developer/references/css_layout.md
Normal file
|
|
@ -0,0 +1,647 @@
|
|||
# CSS Layout — Bootstrap e Custom
|
||||
|
||||
Guida per creare layout responsive con Bootstrap o CSS custom.
|
||||
|
||||
---
|
||||
|
||||
## Decisione: Bootstrap vs Custom
|
||||
|
||||
### Usa Bootstrap Quando:
|
||||
|
||||
✅ Design standard (grid, cards, buttons)
|
||||
✅ Progetto veloce / MVP
|
||||
✅ Cliente non richiede customizzazione estrema
|
||||
✅ Team piccolo, nessun designer dedicato
|
||||
|
||||
### Usa Custom CSS Quando:
|
||||
|
||||
✅ Design altamente personalizzato
|
||||
✅ Brand guidelines specifiche
|
||||
✅ Layout non-standard / creativi
|
||||
✅ Performance critica (no CSS unused)
|
||||
|
||||
---
|
||||
|
||||
## Bootstrap Setup
|
||||
|
||||
### CDN Setup
|
||||
|
||||
```html
|
||||
<head>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
>
|
||||
|
||||
<!-- Custom CSS (override) -->
|
||||
<link rel="stylesheet" href="css/custom.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Bootstrap JS (opzionale, solo se serve JS components) -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
```
|
||||
|
||||
### Custom CSS Override
|
||||
|
||||
```css
|
||||
/* css/custom.css */
|
||||
|
||||
:root {
|
||||
/* Override Bootstrap variables */
|
||||
--bs-primary: #005fcc;
|
||||
--bs-secondary: #6c757d;
|
||||
--bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Custom styles */
|
||||
.hero {
|
||||
padding: 120px 0;
|
||||
background: linear-gradient(135deg, #005fcc 0%, #003d99 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 12px 32px;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Responsive Design
|
||||
|
||||
### Breakpoints
|
||||
|
||||
```css
|
||||
/* Mobile-first approach */
|
||||
|
||||
/* Mobile: default (< 768px) */
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
/* Tablet (≥ 768px) */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 160px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop (≥ 1024px) */
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Desktop (≥ 1440px) */
|
||||
@media (min-width: 1440px) {
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Bootstrap Grid
|
||||
|
||||
```html
|
||||
<!-- Container -->
|
||||
<div class="container">
|
||||
<!-- Row -->
|
||||
<div class="row">
|
||||
<!-- Mobile: 1 colonna, Tablet: 2 colonne, Desktop: 3 colonne -->
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<!-- Content -->
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<!-- Content -->
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<!-- Content -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Typography
|
||||
|
||||
### Design Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Font Families */
|
||||
--font-primary: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-secondary: 'Georgia', serif;
|
||||
|
||||
/* Font Sizes (modular scale) */
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
--text-lg: 1.125rem; /* 18px */
|
||||
--text-xl: 1.25rem; /* 20px */
|
||||
--text-2xl: 1.5rem; /* 24px */
|
||||
--text-3xl: 1.875rem; /* 30px */
|
||||
--text-4xl: 2.25rem; /* 36px */
|
||||
--text-5xl: 3rem; /* 48px */
|
||||
|
||||
/* Font Weights */
|
||||
--font-normal: 400;
|
||||
--font-medium: 500;
|
||||
--font-semibold: 600;
|
||||
--font-bold: 700;
|
||||
|
||||
/* Line Heights */
|
||||
--leading-tight: 1.25;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.75;
|
||||
|
||||
/* Letter Spacing */
|
||||
--tracking-tight: -0.025em;
|
||||
--tracking-normal: 0;
|
||||
--tracking-wide: 0.025em;
|
||||
}
|
||||
|
||||
/* Base Typography */
|
||||
body {
|
||||
font-family: var(--font-primary);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-normal);
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
h1 {
|
||||
font-size: var(--text-5xl);
|
||||
font-weight: var(--font-bold);
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: var(--font-bold);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: var(--font-semibold);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
|
||||
/* Responsive typography */
|
||||
@media (max-width: 767px) {
|
||||
h1 { font-size: var(--text-4xl); }
|
||||
h2 { font-size: var(--text-3xl); }
|
||||
h3 { font-size: var(--text-2xl); }
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Spacing System
|
||||
|
||||
### Scala Modulare
|
||||
|
||||
```css
|
||||
:root {
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
--space-16: 64px;
|
||||
--space-20: 80px;
|
||||
--space-24: 96px;
|
||||
}
|
||||
|
||||
/* Section padding */
|
||||
.section-padding {
|
||||
padding: var(--space-16) 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.section-padding {
|
||||
padding: var(--space-24) 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Component spacing */
|
||||
.card {
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: var(--space-3) var(--space-6);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Color System
|
||||
|
||||
### Palette
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Primary Brand Colors */
|
||||
--color-primary: #005fcc;
|
||||
--color-primary-dark: #003d99;
|
||||
--color-primary-light: #3385ff;
|
||||
|
||||
/* Secondary Colors */
|
||||
--color-secondary: #6c757d;
|
||||
--color-secondary-dark: #5a6268;
|
||||
--color-secondary-light: #868e96;
|
||||
|
||||
/* Neutrals */
|
||||
--color-white: #ffffff;
|
||||
--color-gray-50: #f9fafb;
|
||||
--color-gray-100: #f3f4f6;
|
||||
--color-gray-200: #e5e7eb;
|
||||
--color-gray-300: #d1d5db;
|
||||
--color-gray-400: #9ca3af;
|
||||
--color-gray-500: #6b7280;
|
||||
--color-gray-600: #4b5563;
|
||||
--color-gray-700: #374151;
|
||||
--color-gray-800: #1f2937;
|
||||
--color-gray-900: #111827;
|
||||
--color-black: #000000;
|
||||
|
||||
/* Semantic Colors */
|
||||
--color-success: #10b981;
|
||||
--color-warning: #f59e0b;
|
||||
--color-error: #ef4444;
|
||||
--color-info: #3b82f6;
|
||||
|
||||
/* Text Colors */
|
||||
--text-primary: var(--color-gray-900);
|
||||
--text-secondary: var(--color-gray-600);
|
||||
--text-muted: var(--color-gray-500);
|
||||
--text-inverse: var(--color-white);
|
||||
|
||||
/* Background Colors */
|
||||
--bg-primary: var(--color-white);
|
||||
--bg-secondary: var(--color-gray-50);
|
||||
--bg-tertiary: var(--color-gray-100);
|
||||
}
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
```css
|
||||
/* Text */
|
||||
.text-primary { color: var(--text-primary); }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-muted { color: var(--text-muted); }
|
||||
.text-inverse { color: var(--text-inverse); }
|
||||
|
||||
/* Backgrounds */
|
||||
.bg-primary { background-color: var(--bg-primary); }
|
||||
.bg-secondary { background-color: var(--bg-secondary); }
|
||||
.bg-brand { background-color: var(--color-primary); }
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--color-primary);
|
||||
border: 2px solid var(--color-primary);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component Styles
|
||||
|
||||
### Buttons
|
||||
|
||||
```css
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 32px;
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--font-semibold);
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--color-primary-dark);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 95, 204, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--color-primary);
|
||||
border: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
/* Responsive buttons */
|
||||
@media (max-width: 767px) {
|
||||
.btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Cards
|
||||
|
||||
```css
|
||||
.card {
|
||||
background: var(--color-white);
|
||||
border-radius: 8px;
|
||||
padding: var(--space-6);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: var(--font-semibold);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.card-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
```
|
||||
|
||||
### Forms
|
||||
|
||||
```css
|
||||
.form-group {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-weight: var(--font-medium);
|
||||
margin-bottom: var(--space-2);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: var(--text-base);
|
||||
border: 1px solid var(--color-gray-300);
|
||||
border-radius: 4px;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.1);
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.form-error {
|
||||
color: var(--color-error);
|
||||
font-size: var(--text-sm);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Layout Patterns
|
||||
|
||||
### Hero Section
|
||||
|
||||
```css
|
||||
.hero {
|
||||
position: relative;
|
||||
padding: 120px 0;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
|
||||
color: var(--color-white);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: var(--text-5xl);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: var(--text-xl);
|
||||
opacity: 0.9;
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Responsive hero */
|
||||
@media (max-width: 767px) {
|
||||
.hero {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: var(--text-4xl);
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Grid Layout
|
||||
|
||||
```css
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
/* Responsive grid */
|
||||
@media (max-width: 1023px) {
|
||||
.grid-4 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.grid-2,
|
||||
.grid-3,
|
||||
.grid-4 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Split Layout
|
||||
|
||||
```css
|
||||
.split-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.split-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Responsive split */
|
||||
@media (max-width: 1023px) {
|
||||
.split-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.split-image {
|
||||
order: -1; /* Image first on mobile */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Utility Classes
|
||||
|
||||
```css
|
||||
/* 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-start { justify-content: flex-start; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.align-start { align-items: flex-start; }
|
||||
.align-center { align-items: center; }
|
||||
.align-end { align-items: flex-end; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.gap-2 { gap: var(--space-2); }
|
||||
.gap-4 { gap: var(--space-4); }
|
||||
.gap-6 { gap: var(--space-6); }
|
||||
.gap-8 { gap: var(--space-8); }
|
||||
|
||||
/* Text Alignment */
|
||||
.text-left { text-align: left; }
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
|
||||
/* Spacing */
|
||||
.mt-4 { margin-top: var(--space-4); }
|
||||
.mb-4 { margin-bottom: var(--space-4); }
|
||||
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
|
||||
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
|
||||
|
||||
/* Visibility */
|
||||
.visible { visibility: visible; }
|
||||
.invisible { visibility: hidden; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Checklist Layout
|
||||
|
||||
- [ ] Mobile-first approach
|
||||
- [ ] Breakpoints definiti (mobile, tablet, desktop)
|
||||
- [ ] Typography scale coerente
|
||||
- [ ] Spacing system modulare
|
||||
- [ ] Color palette definita
|
||||
- [ ] Buttons stilizzati (hover states)
|
||||
- [ ] Cards con shadow e hover effect
|
||||
- [ ] Forms accessibili e responsive
|
||||
- [ ] Grid system funzionante
|
||||
- [ ] Utility classes per layout veloci
|
||||
- [ ] Test su mobile/tablet/desktop
|
||||
|
||||
---
|
||||
|
||||
_References per agency-web-developer skill_
|
||||
Loading…
Add table
Add a link
Reference in a new issue