# CDN Resources **Purpose**: Common CDN libraries for frontend development --- ## CSS Frameworks ### Tailwind CSS ```html ``` ### Flowbite ```html ``` ### Bootstrap ```html ``` --- ## JavaScript Libraries ### Alpine.js ```html ``` ### HTMX ```html ``` ### Chart.js ```html ``` --- ## Animation Libraries ### Animate.css ```html ``` ### AOS (Animate On Scroll) ```html ``` --- ## Video Placeholders ```html ``` --- ## Best Practices ### Version Pinning ```html ``` ### Integrity Hashes ```html ``` --- ## File Naming Conventions **Design Files:** - Initial: `{name}_1.html` (e.g., `table_1.html`) - Iterations: `{name}_1_1.html`, `{name}_1_2.html` - Themes: `theme_1.css`, `theme_2.css` **Asset Files:** - Images: `hero-image.jpg`, `product-1.png` - Icons: `logo.svg`, `icon-menu.svg` - Fonts: `inter-var.woff2` --- ## Project Structure ``` design_iterations/ ├── theme_1.css ├── ui_1.html ├── ui_1_1.html (iteration) ├── dashboard_1.html └── assets/ ├── images/ ├── icons/ └── fonts/ ``` --- ## Accessibility Checklist **Images:** - [ ] All images have alt text - [ ] Decorative images have `alt=""` and `role="presentation"` - [ ] Complex images have figcaption **Icons:** - [ ] Icon-only buttons have `aria-label` - [ ] Decorative icons have `aria-hidden="true"` - [ ] Icons with text are hidden from screen readers --- ## Related - `images-guide.md` - Image guidelines - `icons-guide.md` - Icon systems - `fonts-guide.md` - Font loading