{"id":27714677,"url":"https://github.com/michaelpadiernos/minim","last_synced_at":"2026-05-05T20:42:44.189Z","repository":{"id":289361387,"uuid":"970890484","full_name":"michaelpadiernos/minim","owner":"michaelpadiernos","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-22T21:54:31.000Z","size":2055,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-22T22:32:39.128Z","etag":null,"topics":["base-theme","css","css-flexbox","css-grid","drupal-theme","gulpjs","postcss","twig","twig-components"],"latest_commit_sha":null,"homepage":"","language":"Twig","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/michaelpadiernos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-22T17:33:07.000Z","updated_at":"2025-04-22T21:54:34.000Z","dependencies_parsed_at":"2025-04-22T22:33:18.342Z","dependency_job_id":"c4a15c3c-953b-401b-882d-ed32d7672aa5","html_url":"https://github.com/michaelpadiernos/minim","commit_stats":null,"previous_names":["michaelpadiernos/minim"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelpadiernos%2Fminim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelpadiernos%2Fminim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelpadiernos%2Fminim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelpadiernos%2Fminim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michaelpadiernos","download_url":"https://codeload.github.com/michaelpadiernos/minim/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251073636,"owners_count":21532008,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["base-theme","css","css-flexbox","css-grid","drupal-theme","gulpjs","postcss","twig","twig-components"],"created_at":"2025-04-27T00:51:06.307Z","updated_at":"2026-05-05T20:42:44.184Z","avatar_url":"https://github.com/michaelpadiernos.png","language":"Twig","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Minim Theme\n\nA minimal Drupal 11 base theme utilizing the Minim CSS framework with atomic design principles and modern build tools.\n\n## 🎨 Overview\n\nMinim is a lightweight, component-based Drupal theme that emphasizes clean design and developer experience. Built with atomic design methodology and powered by PostCSS for modern CSS development.\n\n### Key Features\n\n- **Atomic Design Architecture** - Organized component structure from atoms to organisms\n- **Modern CSS Build Pipeline** - PostCSS with Lightning CSS for optimal performance  \n- **Component-First Development** - Utilizes Drupal's Single Directory Components (SDC)\n- **Minimal Dependencies** - Clean, lightweight foundation\n- **Drupal 11 Compatible** - Built for the latest Drupal core\n\n## 🏗️ Architecture\n\n### Atomic Design Structure\n\n```\nsource/\n├── 00-core/          # Core styles and Minim CSS framework\n│   ├── _minim.css/   # External Minim CSS framework\n│   └── nucleus/      # Base styles and variables\n├── 01-atoms/         # Basic building blocks (buttons, inputs, labels)\n├── 02-molecules/     # Simple groups of atoms\n├── 03-organisms/     # Complex components\n├── 04-symbiosis/     # Layout components\n└── 05-synergy/       # Page-level templates\n```\n\n### Theme Regions\n\n- **Branding** - Site logo and branding elements\n- **Navigation** - Main navigation menu\n- **Focus** - Featured content area\n- **Hero** - Hero banner section\n- **Highlight** - Highlighted content\n- **Content** - Main content area\n- **Sidebar** - Sidebar content\n- **Footer** - Footer content\n- **Buffer** - Additional content buffer\n\n## 🚀 Installation\n\n### Prerequisites\n\n- Drupal 11 with Components module\n- Git (for cloning dependencies)\n- Node.js 23+ (auto-installed via NVM, or manual installation)\n\n### One-Command Installation\n\nThe theme includes an automated installation script that handles everything:\n\n```bash\ncd web/themes/custom/minim\nbash install.sh\n```\n\n**What the script does:**\n- 🔍 Validates you're in the correct directory\n- 📦 Clones the Minim CSS framework (if not already present)\n- ⚙️ Sets up Node.js 23 (via NVM if available, otherwise checks system)\n- 📦 Installs all npm dependencies\n- 🔨 Builds theme assets\n- ✅ Provides next steps for theme activation\n\n### Enable Theme in Drupal\n\nAfter installation, activate the theme:\n\n```bash\ndrush theme:enable minim\ndrush config:set system.theme default minim\n```\n\n### Manual Installation (Alternative)\n\nIf you prefer manual setup or the script fails:\n\n1. **Install Node.js (if needed):**\n   ```bash\n   # With NVM (recommended)\n   nvm install 23 \u0026\u0026 nvm use 23\n   \n   # Or download from https://nodejs.org/\n   ```\n\n2. **Clone Minim CSS framework:**\n   ```bash\n   git clone https://github.com/michaelpadiernos/minim.css.git ./source/00-core/_minim.css\n   ```\n\n3. **Install dependencies and build:**\n   ```bash\n   npm install\n   npm run run\n   ```\n\n### Troubleshooting Installation\n\nIf you encounter issues:\n\n```bash\n# Make script executable\nchmod +x install.sh\n\n# Run with bash explicitly\nbash install.sh\n\n# Install Gulp CLI globally if needed\nnpm install -g gulp-cli\n\n# Check Node.js version\nnode --version  # Should be 23+\n```\n\n## 🛠️ Development\n\n### Build Process\n\nThe theme uses Gulp with PostCSS for processing styles and JavaScript:\n\n```bash\n# One-time build\nnpm run run\n# or\ngulp run\n\n# Type check + build (recommended for development)\nnpm run build\n\n# Type checking only\nnpm run type-check\n\n# Watch for changes during development\ngulp watch\n\n# Default task (build + watch)\ngulp\n```\n\n### PostCSS Plugins\n\nThe build pipeline includes:\n\n- **Lightning CSS** - Fast CSS processing and optimization\n- **Autoprefixer** - Automatic vendor prefixes\n- **CSS Nano** - CSS minification\n- **PostCSS Nesting** - CSS nesting support\n- **PostCSS Mixins** - Reusable CSS mixins\n- **Custom Properties** - CSS custom properties support\n- **Font Magician** - Automatic font loading\n- **Brand Colors** - Predefined brand color palette\n\n### File Structure\n\n```\nminim/\n├── assets/\n│   ├── css/\n│   │   ├── minim.theme.css     # Compiled CSS\n│   │   └── minim.theme.css.map # Source map\n│   └── js/\n│       └── minim.theme.js      # Compiled JavaScript\n├── source/\n│   ├── minim.source.css        # Main CSS entry point\n│   ├── minim.source.js         # Main JS entry point\n│   └── [atomic structure]/\n├── minim.info.yml              # Theme definition\n├── minim.libraries.yml         # Asset libraries\n├── gulpfile.js                 # Build configuration\n└── package.json                # Dependencies\n```\n\n### Component Development\n\nCreate new components following atomic design principles:\n\n1. **Atoms** (`01-atoms/`) - Basic elements like buttons, inputs\n2. **Molecules** (`02-molecules/`) - Simple component groups\n3. **Organisms** (`03-organisms/`) - Complex UI sections\n4. **Symbiosis** (`04-symbiosis/`) - Layout components\n5. **Synergy** (`05-synergy/`) - Page templates\n\nEach component should include:\n- CSS styles\n- Twig templates (if applicable)\n- Component definition files\n\n### CSS Development\n\nThe theme uses modern CSS features:\n\n```css\n/* Custom properties */\n:root {\n  --primary-color: #007acc;\n  --font-size-base: 1rem;\n}\n\n/* Nesting support */\n.component {\n  color: var(--primary-color);\n  \n  \u0026:hover {\n    opacity: 0.8;\n  }\n  \n  \u0026__element {\n    font-size: var(--font-size-base);\n  }\n}\n\n/* Mixins */\n@mixin button-style {\n  padding: 0.5rem 1rem;\n  border-radius: 0.25rem;\n  border: none;\n}\n```\n\n## 🎯 Usage\n\n### Enabling Components\n\nThe theme integrates with Drupal's Components module for SDC support:\n\n```yaml\n# In your component's definition\ndependencies:\n  - components:components\n```\n\n### Theme Libraries\n\nInclude theme assets in your templates:\n\n```twig\n{# Attach global styling #}\n{{ attach_library('minim/global-styling') }}\n```\n\n### Custom Styling\n\nAdd custom styles by extending the source files:\n\n1. Create new files in the appropriate atomic level\n2. Import them in `source/minim.source.css`\n3. Run the build process\n\n### JavaScript Integration\n\nAdd JavaScript functionality:\n\n1. Edit `source/minim.source.js`\n2. Build with `gulp run`\n3. JavaScript will be minified and included automatically\n\n## 🔧 Configuration\n\n### Theme Settings\n\nThe theme includes dependency on `body_roles_classes` for enhanced styling options:\n\n```yaml\ndependencies:\n  - components:components\n  - body_roles_classes:body_roles_classes\n```\n\n### Build Configuration\n\nCustomize the build process in `gulpfile.js`:\n\n```javascript\n// Modify processors array to add/remove PostCSS plugins\nconst processors = [\n  postcss_autoprefixer,\n  postcss_brands,\n  // ... other plugins\n]\n```\n\n### Font Integration\n\nThe theme uses PostCSS Font Magician for automatic font loading. Configure fonts in your CSS:\n\n```css\nbody {\n  font-family: 'Source Sans Pro', sans-serif; /* Automatically loaded */\n}\n```\n\n## 📦 Dependencies\n\n### Theme Dependencies\n- `components:components` - Single Directory Components support\n- `body_roles_classes:body_roles_classes` - Enhanced body classes\n\n### Build Dependencies\n- **Node.js 23+** - Runtime environment (auto-installed by script)\n- **Gulp 5.x** - Task runner\n- **PostCSS** - CSS processing with 15+ plugins\n- **Lightning CSS** - Fast CSS optimization\n- **TypeScript** - Type checking for JavaScript modules\n\n### CSS Framework\n- **Minim CSS** - Minimal CSS framework (auto-cloned by install script)\n\n## 🚀 Production\n\n### Optimization\n\nThe build process includes:\n\n- **CSS minification** with CSS Nano\n- **JavaScript uglification** \n- **Autoprefixing** for browser compatibility\n- **Source maps** for debugging\n\n### Performance Features\n\n- Minimal CSS footprint\n- Optimized asset delivery\n- Modern CSS features for better performance\n- Tree-shaking for unused styles\n\n### Browser Support\n\nThe theme supports modern browsers with automatic fallbacks via:\n- Autoprefixer for CSS prefixes\n- PostCSS Preset Env for feature polyfills\n- Lightning CSS optimizations\n\n## 🤝 Contributing\n\n### Development Workflow\n\n1. **Fork the repository**\n2. **Create a feature branch**\n3. **Make changes following atomic design principles**\n4. **Build and test your changes**\n5. **Submit a pull request**\n\n### Coding Standards\n\n- Follow Drupal CSS coding standards\n- Use atomic design methodology\n- Include source maps for debugging\n- Test across target browsers\n\n### Component Guidelines\n\n- Keep components focused and reusable\n- Follow naming conventions\n- Include proper documentation\n- Test component variations\n\n## 📚 Resources\n\n- **Minim CSS Framework:** https://github.com/michaelpadiernos/minim.css\n- **Atomic Design:** https://atomicdesign.bradfrost.com/\n- **Drupal Components:** https://www.drupal.org/project/components\n- **PostCSS Documentation:** https://postcss.org/\n\n## 📄 License\n\nISC License - see package.json for details.\n\n---\n\n**Author:** M. Padiernos  \n**Version:** 1.0.0  \n**Drupal Compatibility:** 11.x\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelpadiernos%2Fminim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaelpadiernos%2Fminim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelpadiernos%2Fminim/lists"}