@mytechtoday/augment-extensions 0.1.2 → 0.4.0

package/augment-extensions/coding-standards/css/examples/css-examples.css

@@ -0,0 +1,550 @@
+/* ========================================
+   CSS CUSTOM PROPERTIES (VARIABLES)
+   ======================================== */
+
+:root {
+  /* Colors */
+  --primary-color: #007bff;
+  --secondary-color: #6c757d;
+  --success-color: #28a745;
+  --danger-color: #dc3545;
+  --warning-color: #ffc107;
+  --text-color: #212529;
+  --bg-color: #ffffff;
+  
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  
+  /* Typography */
+  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-family-mono: "Courier New", monospace;
+  --font-size-base: 16px;
+  --font-size-sm: 14px;
+  --font-size-lg: 18px;
+  --font-size-xl: 24px;
+  --line-height-base: 1.5;
+  
+  /* Borders */
+  --border-radius: 4px;
+  --border-width: 1px;
+  --border-color: #dee2e6;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
+  
+  /* Transitions */
+  --transition-fast: 150ms ease-in-out;
+  --transition-base: 300ms ease-in-out;
+  --transition-slow: 500ms ease-in-out;
+}
+
+/* ========================================
+   BEM NAMING CONVENTION EXAMPLES
+   ======================================== */
+
+/* Block: Card component */
+.card {
+  --card-padding: var(--spacing-md);
+  --card-bg: var(--bg-color);
+  
+  background-color: var(--card-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: var(--card-padding);
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow var(--transition-base);
+}
+
+/* Element: Card header */
+.card__header {
+  border-bottom: var(--border-width) solid var(--border-color);
+  padding-bottom: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+}
+
+/* Element: Card title */
+.card__title {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  color: var(--text-color);
+}
+
+/* Element: Card body */
+.card__body {
+  color: var(--text-color);
+  line-height: var(--line-height-base);
+}
+
+/* Element: Card footer */
+.card__footer {
+  border-top: var(--border-width) solid var(--border-color);
+  padding-top: var(--spacing-sm);
+  margin-top: var(--spacing-md);
+}
+
+/* Modifier: Featured card */
+.card--featured {
+  border-color: var(--primary-color);
+  box-shadow: var(--shadow-md);
+}
+
+/* Modifier: Large card header */
+.card__header--large {
+  padding-bottom: var(--spacing-md);
+}
+
+/* Modifier: Danger card */
+.card--danger {
+  border-color: var(--danger-color);
+}
+
+/* ========================================
+   BUTTON COMPONENT WITH VARIATIONS
+   ======================================== */
+
+.btn {
+  display: inline-block;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  text-align: center;
+  text-decoration: none;
+  border: var(--border-width) solid transparent;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.btn--primary {
+  background-color: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+}
+
+.btn--primary:hover {
+  background-color: #0056b3;
+  border-color: #0056b3;
+}
+
+.btn--secondary {
+  background-color: var(--secondary-color);
+  color: white;
+  border-color: var(--secondary-color);
+}
+
+.btn--outline {
+  background-color: transparent;
+  color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+.btn--outline:hover {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.btn--large {
+  padding: var(--spacing-md) var(--spacing-lg);
+  font-size: var(--font-size-lg);
+}
+
+.btn--small {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--font-size-sm);
+}
+
+/* ========================================
+   CSS GRID LAYOUT
+   ======================================== */
+
+/* Grid container for page layout */
+.page-layout {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    "header header"
+    "sidebar main"
+    "footer footer";
+  min-height: 100vh;
+  gap: var(--spacing-md);
+}
+
+.page-layout__header {
+  grid-area: header;
+  background-color: var(--primary-color);
+  color: white;
+  padding: var(--spacing-md);
+}
+
+.page-layout__sidebar {
+  grid-area: sidebar;
+  background-color: #f8f9fa;
+  padding: var(--spacing-md);
+}
+
+.page-layout__main {
+  grid-area: main;
+  padding: var(--spacing-md);
+}
+
+.page-layout__footer {
+  grid-area: footer;
+  background-color: var(--secondary-color);
+  color: white;
+  padding: var(--spacing-md);
+  text-align: center;
+}
+
+/* Grid for card gallery */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--spacing-lg);
+  padding: var(--spacing-md);
+}
+
+/* ========================================
+   FLEXBOX LAYOUTS
+   ======================================== */
+
+/* Horizontal navigation with Flexbox */
+.nav {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--bg-color);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.nav__logo {
+  margin-right: auto;
+  font-size: var(--font-size-lg);
+  font-weight: bold;
+}
+
+.nav__menu {
+  display: flex;
+  gap: var(--spacing-md);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav__item {
+  /* Individual nav items */
+}
+
+.nav__link {
+  color: var(--text-color);
+  text-decoration: none;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  transition: color var(--transition-fast);
+}
+
+.nav__link:hover {
+  color: var(--primary-color);
+}
+
+/* Flexbox for centering content */
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+
+/* Flexbox for space-between layout */
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Flexbox column layout */
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+/* ========================================
+   RESPONSIVE DESIGN WITH MEDIA QUERIES
+   ======================================== */
+
+/* Mobile-first approach: Base styles for mobile */
+.container {
+  width: 100%;
+  padding: var(--spacing-md);
+  margin: 0 auto;
+}
+
+/* Tablet and up */
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .nav__menu {
+    flex-direction: row;
+  }
+}
+
+/* Desktop and up */
+@media (min-width: 1024px) {
+  .container {
+    max-width: 960px;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* Large desktop */
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1200px;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* Mobile-specific: Stack navigation vertically */
+@media (max-width: 767px) {
+  .page-layout {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "main"
+      "sidebar"
+      "footer";
+  }
+
+  .nav {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .nav__menu {
+    flex-direction: column;
+    width: 100%;
+  }
+}
+
+/* ========================================
+   SELECTOR SPECIFICITY EXAMPLES
+   ======================================== */
+
+/* ✅ GOOD: Low specificity, easy to override */
+.alert {
+  padding: var(--spacing-md);
+  border-radius: var(--border-radius);
+}
+
+.alert--success {
+  background-color: var(--success-color);
+  color: white;
+}
+
+.alert--danger {
+  background-color: var(--danger-color);
+  color: white;
+}
+
+/* ❌ BAD: High specificity, hard to override */
+/* div.alert.alert--success { } */
+
+/* ✅ GOOD: Avoid deep nesting (max 3 levels) */
+.article__content p {
+  margin-bottom: var(--spacing-md);
+}
+
+/* ❌ BAD: Too deeply nested */
+/* .article .article__content .text-wrapper p { } */
+
+/* ========================================
+   UTILITY CLASSES
+   ======================================== */
+
+/* Spacing utilities */
+.mt-sm { margin-top: var(--spacing-sm); }
+.mt-md { margin-top: var(--spacing-md); }
+.mt-lg { margin-top: var(--spacing-lg); }
+
+.mb-sm { margin-bottom: var(--spacing-sm); }
+.mb-md { margin-bottom: var(--spacing-md); }
+.mb-lg { margin-bottom: var(--spacing-lg); }
+
+.p-sm { padding: var(--spacing-sm); }
+.p-md { padding: var(--spacing-md); }
+.p-lg { padding: var(--spacing-lg); }
+
+/* Text utilities */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.text-primary { color: var(--primary-color); }
+.text-secondary { color: var(--secondary-color); }
+.text-danger { color: var(--danger-color); }
+
+.text-sm { font-size: var(--font-size-sm); }
+.text-lg { font-size: var(--font-size-lg); }
+.text-xl { font-size: var(--font-size-xl); }
+
+/* Display utilities */
+.d-none { display: none; }
+.d-block { display: block; }
+.d-inline { display: inline; }
+.d-inline-block { display: inline-block; }
+.d-flex { display: flex; }
+.d-grid { display: grid; }
+
+/* ========================================
+   FORM STYLING
+   ======================================== */
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  margin-bottom: var(--spacing-md);
+}
+
+.form-label {
+  font-weight: 600;
+  color: var(--text-color);
+  font-size: var(--font-size-sm);
+}
+
+.form-input,
+.form-textarea,
+.form-select {
+  padding: var(--spacing-sm);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  transition: border-color var(--transition-fast);
+}
+
+.form-input:focus,
+.form-textarea:focus,
+.form-select:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+}
+
+.form-input--error {
+  border-color: var(--danger-color);
+}
+
+.form-help-text {
+  font-size: var(--font-size-sm);
+  color: var(--secondary-color);
+}
+
+.form-error-text {
+  font-size: var(--font-size-sm);
+  color: var(--danger-color);
+}
+
+/* ========================================
+   ANIMATIONS AND TRANSITIONS
+   ======================================== */
+
+/* Fade in animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation: fadeIn var(--transition-base);
+}
+
+/* Slide in from left */
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slide-in-left {
+  animation: slideInLeft var(--transition-base);
+}
+
+/* Hover effects */
+.hover-lift {
+  transition: transform var(--transition-fast);
+}
+
+.hover-lift:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+
+/* ========================================
+   ACCESSIBILITY HELPERS
+   ======================================== */
+
+/* Screen reader only content */
+.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 for keyboard navigation */
+.focus-visible:focus {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+}
+
+/* Skip to main content link */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--primary-color);
+  color: white;
+  padding: var(--spacing-sm);
+  text-decoration: none;
+  z-index: 100;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+

package/augment-extensions/coding-standards/css/module.json

@@ -0,0 +1,44 @@
+{
+  "name": "css-standards",
+  "version": "1.0.0",
+  "displayName": "CSS Standards",
+  "description": "Comprehensive CSS coding standards for modern web development with styling, layouts, responsiveness, and preprocessors (Sass, Less)",
+  "type": "coding-standards",
+  "language": "css",
+  "tags": ["css", "web", "frontend", "styling", "responsive", "sass", "less"],
+  "dependencies": [],
+  "augment": {
+    "characterCount": 30556,
+    "priority": "high",
+    "category": "coding-standards",
+    "appliesTo": {
+      "filePatterns": [
+        "**/*.css",
+        "**/*.scss",
+        "**/*.sass",
+        "**/*.less"
+      ],
+      "projectTypes": [
+        "web",
+        "frontend"
+      ]
+    }
+  },
+  "installation": {
+    "required": false,
+    "steps": [
+      "Link module using: augx link coding-standards/css",
+      "Or manually copy contents to project's .augment/ folder"
+    ]
+  },
+  "contents": {
+    "rules": [
+      "css-standards.md",
+      "css-modern-features.md"
+    ],
+    "examples": [
+      "css-examples.css"
+    ]
+  }
+}
+