Skip to content

README.md

Latest commit

 

History

History
148 lines (100 loc) · 4.96 KB

README.md

File metadata and controls

148 lines (100 loc) · 4.96 KB

🎨 Layered Shade - Box Shadow Generator

A modern and interactive web tool for generating CSS shadows (box-shadow) and Dart/Flutter code (BoxShadow) visually.

🇧🇷 Português

Demo CI Tests Coverage License Performance Accessibility Best Practices SEO

🛠️ Technologies

Skills

🚀 Demo

👉 Try it online

Preview

Preview

Demo Animation

Demo

✨ Features

Shadows

  • Real-time Preview: Instant preview of changes
  • Multiple Layers: Create complex shadows with multiple layers
  • Full Control: Adjust X, Y, blur, spread, color and opacity
  • Inset Support: Inner shadows with automatic Flutter package suggestion

Background & Shape

  • Gradients: Linear and radial with multiple color stops
  • Custom Shape: Adjust border-radius and padding
  • Presets: Ready-made templates (Soft, Neumorphism, Glass)

Export

  • CSS: Ready-to-use code with prefixes (-webkit, -moz)
  • Dart/Flutter: Formatted BoxShadow and BoxDecoration
  • Tailwind: Arbitrary utility classes
  • Smart Copy: Context-sensitive button (CSS/Dart/Tailwind)

📊 Tech Stack

Technology Usage
HTML5 Semantic structure
CSS3 Variables, Grid, Flexbox, Animations, Glassmorphism
JavaScript ES6+, Modules, Classes (Vanilla - zero dependencies)

♿ Accessibility (A11y)

This project was developed with accessibility in mind:

  • Skip Link: Quick navigation for keyboard users
  • Semantic Landmarks: main, header, footer, nav, aside
  • ARIA Roles: Tabs with role="tablist" and role="tabpanel"
  • Descriptive Labels: All buttons and links with aria-label
  • Focus Visible: Enhanced focus indicators
  • Hidden Decoratives: aria-hidden="true" on visual elements

📁 Architecture

The project follows the MVC (Model-View-Controller) pattern:

js/
├── main.js              # Controller
├── model/
│   └── ShadowModel.js   # State and business logic
├── view/
│   └── ShadowView.js    # DOM manipulation
├── components/          # Auxiliary components
│   ├── LayerManager.js
│   ├── BackgroundManager.js
│   ├── GradientManager.js
│   └── ...
└── config/
    └── controlsConfig.js

For complete technical details, see ARCHITECTURE.md.

🚀 Getting Started

Online

Visit layeredshade.netlify.app

Locally

  1. Clone the repository:

    git clone https://github.com/Franklyn-R-Silva/Layered-Shade.git

  2. Open the folder in VS Code

  3. Use the Live Server extension to open index.html

⚠️ The project uses ES Modules, so it needs to be served via HTTP (won't work by opening the file directly).

🧪 Testing

npm install        # Install dependencies
npm test           # Run tests
npm run test:coverage  # Run with coverage
npm run lint       # Check code style

📝 Contributing

  1. Fork the project
  2. Create your branch (git checkout -b feature/NewFeature)
  3. Commit your changes (git commit -m 'Add new feature')
  4. Push to the branch (git push origin feature/NewFeature)
  5. Open a Pull Request

See CONTRIBUTING.md for detailed guidelines.

👤 Author

Franklyn R. Silva

📄 License

This project is licensed under the MIT License.

⭐ If this project was helpful, consider giving it a star!