🎯 Exemples recommandés
Balanced sample collections from various categories for you to explore
Exemples du Framework CSS Milligram
Exemples du framework CSS Milligram incluant la typographie, les formulaires, les grilles et les composants
💻 Guide de Démarrage Milligram html
🟢 simple
⭐
Configuration de base et introduction au framework CSS Milligram
⏱️ 10 min
🏷️ milligram, css, framework, getting-started
Prerequisites:
Basic HTML knowledge
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Milligram Getting Started</title>
<!-- Milligram CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
<!-- Google Fonts: Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<!-- Normalize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<style>
/* Custom styles */
.container {
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}
.header {
text-align: center;
margin: 40px 0;
}
.demo-section {
margin: 40px 0;
}
.color-demo {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.color-box {
width: 100px;
height: 100px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
text-align: center;
}
.primary { background-color: #9b4dca; }
.secondary { background-color: #606c76; }
.success { background-color: #3cb43c; }
.warning { background-color: #ff6347; }
.error { background-color: #ff4136; }
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<header class="header">
<h1>Milligram CSS Framework</h1>
<p>A minimalist CSS framework</p>
</header>
<!-- Typography Demo -->
<section class="demo-section">
<h2>Typography</h2>
<h1>Heading 1 - The main heading</h1>
<h2>Heading 2 - Subheading</h2>
<h3>Heading 3 - Section heading</h3>
<h4>Heading 4 - Subsection</h4>
<h5>Heading 5 - Minor heading</h5>
<h6>Heading 6 - Smallest heading</h6>
<p>This is a paragraph. Milligram provides clean, readable typography with optimal line height and spacing.</p>
<p>You can use <strong>strong text</strong> for important content and <em>emphasis</em> for stressed content.</p>
<blockquote>
<p><em>"Simplicity is the ultimate sophistication."</em></p>
<footer>— Leonardo da Vinci</footer>
</blockquote>
</section>
<!-- Links Demo -->
<section class="demo-section">
<h2>Links</h2>
<p>
This is a <a href="#">default link</a> in Milligram.
</p>
<p>
You can also create <a href="#" class="button">button links</a>.
</p>
</section>
<!-- Lists Demo -->
<section class="demo-section">
<h2>Lists</h2>
<h3>Unordered List</h3>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ul>
<li>Nested item 1</li>
<li>Nested item 2</li>
</ul>
</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>
</section>
<!-- Buttons Demo -->
<section class="demo-section">
<h2>Buttons</h2>
<p>Default buttons and variations:</p>
<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<input type="button" value="Input Button">
<h3>Button Styles</h3>
<button>Button</button>
<button class="button-outline">Outline Button</button>
<button class="button-clear">Clear Button</button>
<h3>Button Colors</h3>
<button class="button-primary">Primary</button>
<button class="button-success">Success</button>
<button class="button-warning">Warning</button>
<button class="button-error">Error</button>
<h3>Button Sizes</h3>
<button class="button-small">Small</button>
<button>Default</button>
<button class="button-large">Large</button>
</section>
<!-- Forms Demo -->
<section class="demo-section">
<h2>Forms</h2>
<form>
<fieldset>
<legend>Form Example</legend>
<label for="name-field">Name</label>
<input type="text" id="name-field" placeholder="Enter your name">
<label for="email-field">Email</label>
<input type="email" id="email-field" placeholder="Enter your email">
<label for="message-field">Message</label>
<textarea id="message-field" placeholder="Enter your message"></textarea>
<label for="select-field">Select Option</label>
<select id="select-field">
<option value="">Choose an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div class="form-group">
<label>
<input type="checkbox" name="newsletter">
<span class="label-body">Subscribe to newsletter</span>
</label>
</div>
<div class="form-group">
<label>
<input type="radio" name="gender" value="male">
<span class="label-body">Male</span>
</label>
<label>
<input type="radio" name="gender" value="female">
<span class="label-body">Female</span>
</label>
</div>
<input type="submit" class="button-primary" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
</section>
<!-- Grid Demo -->
<section class="demo-section">
<h2>Grid System</h2>
<p>Milligram uses a flexible grid system based on Flexbox:</p>
<div class="row">
<div class="column">
<div class="demo-box">Column 1</div>
</div>
<div class="column">
<div class="demo-box">Column 2</div>
</div>
<div class="column">
<div class="demo-box">Column 3</div>
</div>
</div>
<div class="row">
<div class="column column-50">
<div class="demo-box">50% Width</div>
</div>
<div class="column column-50">
<div class="demo-box">50% Width</div>
</div>
</div>
<div class="row">
<div class="column column-33">
<div class="demo-box">33% Width</div>
</div>
<div class="column column-67">
<div class="demo-box">67% Width</div>
</div>
</div>
<style>
.demo-box {
background: #f4f5f6;
border: 1px solid #d1d1d1;
padding: 20px;
text-align: center;
margin-bottom: 10px;
}
</style>
</section>
<!-- Code Demo -->
<section class="demo-section">
<h2>Code</h2>
<p>You can display inline code like this: <code>.container { max-width: 960px; }</code></p>
<pre><code>// JavaScript code example
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('Milligram'));</code></pre>
</section>
<!-- Tables Demo -->
<section class="demo-section">
<h2>Tables</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>32</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>25</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</section>
<!-- Colors Demo -->
<section class="demo-section">
<h2>Color Palette</h2>
<p>Milligram's default color scheme:</p>
<div class="color-demo">
<div class="color-box primary">#9b4dca</div>
<div class="color-box secondary">#606c76</div>
<div class="color-box success">#3cb43c</div>
<div class="color-box warning">#ff6347</div>
<div class="color-box error">#ff4136</div>
</div>
</section>
<!-- Responsive Demo -->
<section class="demo-section">
<h2>Responsive Design</h2>
<p>Milligram is mobile-first and responsive by default. Resize your browser to see the responsive behavior.</p>
<div class="row">
<div class="column column-100 column-md-50 column-lg-33">
<div class="demo-box">100% on mobile, 50% on tablet, 33% on desktop</div>
</div>
<div class="column column-100 column-md-50 column-lg-33">
<div class="demo-box">100% on mobile, 50% on tablet, 33% on desktop</div>
</div>
<div class="column column-100 column-md-100 column-lg-33">
<div class="demo-box">100% on mobile, 100% on tablet, 33% on desktop</div>
</div>
</div>
</section>
<!-- Utilities Demo -->
<section class="demo-section">
<h2>Utility Classes</h2>
<div>
<p><strong>Float:</strong></p>
<div class="float-left">Float left</div>
<div class="float-right">Float right</div>
<div class="clearfix"></div>
</div>
<p><strong>Text Alignment:</strong></p>
<p class="text-left">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-right">Right aligned text</p>
</section>
</div>
</body>
</html>💻 Composants Milligram html
🟡 intermediate
⭐⭐
Composants avancés et layouts utilisant le framework CSS Milligram
⏱️ 25 min
🏷️ milligram, components, ui, layout
Prerequisites:
HTML, CSS basics, Milligram fundamentals
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Milligram Components</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<style>
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.header {
text-align: center;
margin: 40px 0;
}
.demo-section {
margin: 60px 0;
padding: 40px;
border: 1px solid #d1d1d1;
border-radius: 5px;
}
.card {
background: white;
border: 1px solid #d1d1d1;
border-radius: 5px;
padding: 20px;
margin: 10px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-header {
border-bottom: 1px solid #d1d1d1;
padding-bottom: 10px;
margin-bottom: 20px;
}
.nav {
background: #9b4dca;
padding: 10px 0;
}
.nav .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-brand {
color: white;
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
}
.nav-links a {
color: white;
text-decoration: none;
margin: 0 10px;
padding: 5px 10px;
border-radius: 3px;
transition: background 0.3s;
}
.nav-links a:hover {
background: rgba(255,255,255,0.1);
}
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 80px 20px;
text-align: center;
margin: 0 -20px 40px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 40px 0;
}
.feature-icon {
font-size: 3em;
margin-bottom: 20px;
}
.stats {
display: flex;
justify-content: space-around;
background: #f4f5f6;
padding: 40px 20px;
margin: 40px -20px;
}
.stat {
text-align: center;
}
.stat-number {
font-size: 2.5em;
font-weight: bold;
color: #9b4dca;
}
.testimonial {
background: #f8f9fa;
border-left: 4px solid #9b4dca;
padding: 20px;
margin: 20px 0;
}
.pricing-card {
text-align: center;
border: 2px solid #d1d1d1;
border-radius: 5px;
padding: 30px;
margin: 10px;
}
.pricing-card.featured {
border-color: #9b4dca;
transform: scale(1.05);
}
.pricing-price {
font-size: 3em;
font-weight: bold;
color: #9b4dca;
}
.step {
display: flex;
align-items: flex-start;
margin: 20px 0;
}
.step-number {
background: #9b4dca;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
flex-shrink: 0;
}
.badge {
display: inline-block;
padding: 3px 8px;
border-radius: 3px;
font-size: 0.8em;
font-weight: bold;
color: white;
background: #9b4dca;
}
.badge.success { background: #3cb43c; }
.badge.warning { background: #ff6347; }
.badge.error { background: #ff4136; }
.progress {
width: 100%;
height: 20px;
background: #d1d1d1;
border-radius: 10px;
overflow: hidden;
margin: 10px 0;
}
.progress-bar {
height: 100%;
background: #9b4dca;
transition: width 0.3s ease;
}
.sidebar {
background: #f4f5f6;
padding: 20px;
border-radius: 5px;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar li {
margin: 10px 0;
}
.sidebar a {
color: #606c76;
text-decoration: none;
}
.sidebar a:hover {
color: #9b4dca;
}
.tag {
display: inline-block;
padding: 5px 10px;
background: #f4f5f6;
border: 1px solid #d1d1d1;
border-radius: 3px;
margin: 2px;
font-size: 0.8em;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
align-items: center;
justify-content: center;
}
.modal-content {
background: white;
padding: 40px;
border-radius: 5px;
max-width: 500px;
width: 90%;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<div class="container">
<a href="#" class="nav-brand">Milligram</a>
<div class="nav-links">
<a href="#home">Home</a>
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#about">About</a>
<button class="button-clear" style="color: white;">Sign Up</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1>Build Beautiful Websites</h1>
<p>Milligram provides the essential building blocks for modern web development</p>
<button class="button-primary button-large">Get Started</button>
<button class="button-clear button-large" style="color: white; border-color: white;">Learn More</button>
</div>
</section>
<div class="container">
<!-- Feature Cards -->
<section id="features" class="demo-section">
<h2>Features</h2>
<div class="feature-grid">
<div class="card">
<div class="feature-icon">🚀</div>
<h3>Lightweight</h3>
<p>Only 2kb gzipped. Super fast and optimized for performance.</p>
</div>
<div class="card">
<div class="feature-icon">📱</div>
<h3>Responsive</h3>
<p>Mobile-first design that works perfectly on all devices.</p>
</div>
<div class="card">
<div class="feature-icon">🎨</div>
<h3>Customizable</h3>
<p>Easy to customize and extend with your own styles.</p>
</div>
<div class="card">
<div class="feature-icon">🔧</div>
<h3>Modern</h3>
<p>Built with modern CSS features like Flexbox and Grid.</p>
</div>
<div class="card">
<div class="feature-icon">♿</div>
<h3>Accessible</h3>
<p>Follows accessibility best practices and guidelines.</p>
</div>
<div class="card">
<div class="feature-icon">🌐</div>
<h3>Cross-browser</h3>
<p>Works seamlessly across all modern browsers.</p>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="stats">
<div class="stat">
<div class="stat-number">10K+</div>
<p>Downloads</p>
</div>
<div class="stat">
<div class="stat-number">2KB</div>
<p>File Size</p>
</div>
<div class="stat">
<div class="stat-number">100%</div>
<p>Responsive</p>
</div>
<div class="stat">
<div class="stat-number">MIT</div>
<p>License</p>
</div>
</section>
<!-- Testimonials -->
<section class="demo-section">
<h2>What People Say</h2>
<div class="testimonial">
<p>"Milligram is exactly what I needed - simple, clean, and gets out of your way. Perfect for projects that need a solid foundation without the bloat."</p>
<footer>— Sarah Johnson, Frontend Developer</footer>
</div>
<div class="testimonial">
<p>"The simplicity of Milligram is its strength. I can build professional-looking websites in minutes."</p>
<footer>— Mike Chen, UI/UX Designer</footer>
</div>
<div class="testimonial">
<p>"As a backend developer, I appreciate how Milligram lets me create decent-looking interfaces without deep CSS knowledge."</p>
<footer>— Alex Rodriguez, Full Stack Developer</footer>
</div>
</section>
<!-- Pricing Tables -->
<section id="pricing" class="demo-section">
<h2>Pricing Plans</h2>
<div class="row">
<div class="column column-33">
<div class="pricing-card">
<h3>Basic</h3>
<div class="pricing-price">$0</div>
<p>Perfect for small projects</p>
<ul>
<li>✓ Basic Components</li>
<li>✓ Responsive Grid</li>
<li>✓ Documentation</li>
<li>✓ Community Support</li>
</ul>
<button class="button">Get Started</button>
</div>
</div>
<div class="column column-33">
<div class="pricing-card featured">
<span class="badge">POPULAR</span>
<h3>Professional</h3>
<div class="pricing-price">$19</div>
<p>Best for growing businesses</p>
<ul>
<li>✓ Everything in Basic</li>
<li>✓ Premium Components</li>
<li>✓ Advanced Grid System</li>
<li>✓ Priority Support</li>
<li>✓ Custom Themes</li>
</ul>
<button class="button-primary">Get Started</button>
</div>
</div>
<div class="column column-33">
<div class="pricing-card">
<h3>Enterprise</h3>
<div class="pricing-price">$49</div>
<p>For large organizations</p>
<ul>
<li>✓ Everything in Pro</li>
<li>✓ Unlimited Projects</li>
<li>✓ Custom Development</li>
<li>✓ Dedicated Support</li>
<li>✓ Training & Workshops</li>
</ul>
<button class="button">Contact Sales</button>
</div>
</div>
</div>
</section>
<!-- Timeline/Steps -->
<section class="demo-section">
<h2>Getting Started Guide</h2>
<div class="step">
<div class="step-number">1</div>
<div>
<h3>Download Milligram</h3>
<p>Get the latest version from npm, CDN, or download directly.</p>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div>
<h3>Include in Your Project</h3>
<p>Add the CSS file to your HTML or import it in your CSS.</p>
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div>
<h3>Start Building</h3>
<p>Use Milligram classes to create responsive layouts and components.</p>
</div>
</div>
<div class="step">
<div class="step-number">4</div>
<div>
<h3>Customize</h3>
<p>Override variables and add your own styles as needed.</p>
</div>
</div>
</section>
<!-- Badges and Tags -->
<section class="demo-section">
<h2>Badges and Tags</h2>
<div>
<h3>Status Badges:</h3>
<span class="badge">Default</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge error">Error</span>
<h3 style="margin-top: 20px;">Tags:</h3>
<span class="tag">CSS</span>
<span class="tag">Framework</span>
<span class="tag">Responsive</span>
<span class="tag">Minimal</span>
<span class="tag">Modern</span>
</div>
</section>
<!-- Progress Bars -->
<section class="demo-section">
<h2>Progress Indicators</h2>
<div>
<p>Skills:</p>
<label>HTML/CSS</label>
<div class="progress">
<div class="progress-bar" style="width: 95%"></div>
</div>
<label>JavaScript</label>
<div class="progress">
<div class="progress-bar" style="width: 80%"></div>
</div>
<label>Design</label>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
</div>
</section>
<!-- Layout with Sidebar -->
<section class="demo-section">
<h2>Layout Examples</h2>
<div class="row">
<div class="column column-75">
<div class="card">
<div class="card-header">
<h3>Main Content</h3>
</div>
<p>This is the main content area with more space. Perfect for articles, blog posts, or detailed information.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="column column-25">
<div class="sidebar">
<h4>Sidebar</h4>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact Form -->
<section class="demo-section">
<h2>Contact Form</h2>
<div class="row">
<div class="column column-60">
<form>
<div class="row">
<div class="column column-50">
<label for="first-name">First Name</label>
<input type="text" id="first-name" placeholder="John">
</div>
<div class="column column-50">
<label for="last-name">Last Name</label>
<input type="text" id="last-name" placeholder="Doe">
</div>
</div>
<label for="email">Email</label>
<input type="email" id="email" placeholder="[email protected]">
<label for="subject">Subject</label>
<input type="text" id="subject" placeholder="How can we help?">
<label for="message">Message</label>
<textarea id="message" placeholder="Your message here..."></textarea>
<div class="form-group">
<label>
<input type="checkbox" name="copy">
<span class="label-body">Send me a copy of this message</span>
</label>
</div>
<button type="submit" class="button-primary">Send Message</button>
</form>
</div>
<div class="column column-40">
<div class="card">
<h4>Contact Information</h4>
<p><strong>Email:</strong> [email protected]</p>
<p><strong>Phone:</strong> +1 (555) 123-4567</p>
<p><strong>Address:</strong> 123 Web Street, Internet City, IC 12345</p>
</div>
</div>
</div>
</section>
</div>
<!-- Modal Example -->
<div id="exampleModal" class="modal">
<div class="modal-content">
<h3>Modal Title</h3>
<p>This is a modal dialog. You can put any content here.</p>
<button onclick="document.getElementById('exampleModal').style.display='none'" class="button-primary">Close</button>
</div>
</div>
<script>
// Example modal trigger
document.querySelectorAll('[data-modal]').forEach(trigger => {
trigger.addEventListener('click', () => {
const modalId = trigger.getAttribute('data-modal');
document.getElementById(modalId).style.display = 'flex';
});
});
// Close modal when clicking outside
document.querySelectorAll('.modal').forEach(modal => {
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.style.display = 'none';
}
});
});
</script>
</body>
</html>💻 Techniques Avancées Milligram css
🔴 complex
⭐⭐⭐⭐
Personnalisation avancée, animations et extensions pour Milligram
⏱️ 40 min
🏷️ milligram, css, advanced, customization
Prerequisites:
Advanced CSS knowledge, Milligram basics, CSS variables
/* Milligram Advanced Techniques and Customization */
/* 1. CSS Variables for Easy Theming */
:root {
/* Primary Colors */
--primary-color: #9b4dca;
--primary-color-light: #b58cd9;
--primary-color-dark: #8238a7;
/* Secondary Colors */
--secondary-color: #606c76;
--secondary-color-light: #8b95a1;
--secondary-color-dark: #4a5259;
/* Status Colors */
--success-color: #3cb43c;
--warning-color: #ff6347;
--error-color: #ff4136;
--info-color: #0074d9;
/* Neutrals */
--white: #ffffff;
--black: #000000;
--gray-light: #f4f5f6;
--gray: #d1d1d1;
--gray-dark: #606c76;
/* Typography */
--font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--font-size-base: 1.6rem;
--line-height-base: 1.5;
/* Spacing */
--spacing-xs: 0.8rem;
--spacing-sm: 1.6rem;
--spacing-md: 3.2rem;
--spacing-lg: 4.8rem;
--spacing-xl: 6.4rem;
/* Border Radius */
--border-radius-sm: 3px;
--border-radius-md: 5px;
--border-radius-lg: 10px;
--border-radius-full: 999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
/* Transitions */
--transition-fast: 0.15s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
/* Breakpoints */
--breakpoint-sm: 40rem; /* 640px */
--breakpoint-md: 64rem; /* 1024px */
--breakpoint-lg: 90rem; /* 1440px */
--breakpoint-xl: 120rem; /* 1920px */
}
/* 2. Enhanced Button Styles */
.button {
transition: all var(--transition-base);
border-radius: var(--border-radius-md);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
.button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left var(--transition-slow);
}
.button:hover::before {
left: 100%;
}
.button-gradient {
background: linear-gradient(135deg, var(--primary-color), var(--primary-color-light));
color: var(--white);
border: none;
}
.button-glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--primary-color);
}
.button-3d {
box-shadow: 0 4px 0 var(--primary-color-dark);
transform: translateY(0);
transition: all var(--transition-fast);
}
.button-3d:hover {
transform: translateY(2px);
box-shadow: 0 2px 0 var(--primary-color-dark);
}
.button-3d:active {
transform: translateY(4px);
box-shadow: none;
}
/* 3. Enhanced Card Components */
.card {
background: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: all var(--transition-base);
overflow: hidden;
position: relative;
}
.card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.card-header {
padding: var(--spacing-md);
background: linear-gradient(135deg, var(--gray-light), var(--white));
border-bottom: 1px solid var(--gray);
}
.card-body {
padding: var(--spacing-md);
}
.card-footer {
padding: var(--spacing-sm) var(--spacing-md);
background: var(--gray-light);
border-top: 1px solid var(--gray);
}
.card-interactive {
cursor: pointer;
}
.card-interactive .card-body {
transition: all var(--transition-base);
}
.card-interactive:hover .card-body {
background: var(--gray-light);
}
/* 4. Advanced Form Styles */
.form-group {
margin-bottom: var(--spacing-sm);
position: relative;
}
.form-control {
border: 2px solid var(--gray);
border-radius: var(--border-radius-md);
padding: var(--spacing-xs);
transition: all var(--transition-base);
width: 100%;
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(155, 77, 202, 0.1);
}
.form-floating {
position: relative;
}
.form-floating .form-control {
padding: var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
}
.form-floating label {
position: absolute;
top: var(--spacing-xs);
left: var(--spacing-xs);
background: var(--white);
padding: 0 5px;
transition: all var(--transition-fast);
pointer-events: none;
}
.form-floating .form-control:focus + label,
.form-floating .form-control:not(:placeholder-shown) + label {
top: -10px;
left: 10px;
font-size: 0.8em;
color: var(--primary-color);
}
.form-error {
border-color: var(--error-color);
}
.form-error:focus {
box-shadow: 0 0 0 3px rgba(255, 65, 54, 0.1);
}
.error-message {
color: var(--error-color);
font-size: 0.8em;
margin-top: 5px;
}
/* 5. Advanced Grid System */
.container-fluid {
width: 100%;
padding: 0 var(--spacing-sm);
}
.container-custom {
max-width: var(--breakpoint-lg);
margin: 0 auto;
padding: 0 var(--spacing-sm);
}
.grid {
display: grid;
gap: var(--spacing-sm);
}
.grid-auto-fit {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-auto-fill {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
/* 6. Animation Classes */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.animate-fade-in {
animation: fadeIn var(--transition-slow) forwards;
}
.animate-fade-in-up {
animation: fadeInUp var(--transition-slow) forwards;
}
.animate-slide-in-left {
animation: slideInLeft var(--transition-slow) forwards;
}
.animate-bounce {
animation: bounce 1s infinite;
}
.animate-pulse {
animation: pulse 2s infinite;
}
.animate-hover:hover {
animation: pulse 1s infinite;
}
/* 7. Loading States */
.loading {
position: relative;
pointer-events: none;
opacity: 0.6;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--gray-light);
border-top: 2px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.skeleton {
background: linear-gradient(90deg, var(--gray-light) 25%, var(--gray) 50%, var(--gray-light) 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* 8. Advanced Navigation */
.nav {
background: var(--white);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 1000;
transition: all var(--transition-base);
}
.nav.scrolled {
box-shadow: var(--shadow-md);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
.nav-brand {
font-size: 1.8em;
font-weight: bold;
color: var(--primary-color);
text-decoration: none;
transition: color var(--transition-fast);
}
.nav-brand:hover {
color: var(--primary-color-dark);
}
.nav-menu {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.nav-link {
color: var(--secondary-color);
text-decoration: none;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-md);
transition: all var(--transition-fast);
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--primary-color);
transform: translateX(-50%);
transition: width var(--transition-fast);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 80%;
}
.nav-link:hover,
.nav-link.active {
color: var(--primary-color);
background: rgba(155, 77, 202, 0.1);
}
/* 9. Dark Theme Support */
@media (prefers-color-scheme: dark) {
:root {
--white: #1a1a1a;
--black: #ffffff;
--gray-light: #2d2d2d;
--gray: #4a4a4a;
--gray-dark: #b0b0b0;
}
.card {
background: var(--white);
color: var(--black);
}
.nav {
background: var(--white);
}
.form-control {
background: var(--gray-light);
color: var(--black);
border-color: var(--gray);
}
.skeleton {
background: linear-gradient(90deg, var(--gray) 25%, var(--gray-light) 50%, var(--gray) 75%);
}
}
/* 10. Responsive Utilities */
.hide-sm { display: none; }
.show-sm { display: block; }
.hide-md { display: none; }
.show-md { display: block; }
.hide-lg { display: none; }
.show-lg { display: block; }
@media (min-width: 40rem) {
.hide-sm { display: block; }
.show-sm { display: none; }
}
@media (min-width: 64rem) {
.hide-md { display: block; }
.show-md { display: none; }
}
@media (min-width: 90rem) {
.hide-lg { display: block; }
.show-lg { display: none; }
}
/* 11. Accessibility Enhancements */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.focus-visible:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--primary-color);
color: var(--white);
padding: 8px;
text-decoration: none;
z-index: 9999;
}
.skip-link:focus {
top: 6px;
}
/* 12. Print Styles */
@media print {
.no-print {
display: none !important;
}
.container {
max-width: none;
margin: 0;
padding: 0;
}
.card {
box-shadow: none;
border: 1px solid var(--gray);
}
.button {
display: none;
}
a[href]:after {
content: " (" attr(href) ")";
font-size: 0.8em;
}
}
/* 13. Utility Classes */
.text-gradient {
background: linear-gradient(135deg, var(--primary-color), var(--primary-color-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.shadow-hover:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.border-gradient {
border: 2px solid;
border-image: linear-gradient(135deg, var(--primary-color), var(--primary-color-light)) 1;
}
.backdrop-blur {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.8);
}
.scroll-smooth {
scroll-behavior: smooth;
}
.select-none {
user-select: none;
}
.pointer-events-none {
pointer-events: none;
}
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-photo { aspect-ratio: 4 / 3; }