Add Missing Documentation for Toast Examples
Type: Documentation
Priority: Medium
Difficulty: Beginner
Description
The EaseMotion CSS project already includes several Toast animation examples, but they are not fully documented in the project's primary documentation or showcase. As a result, contributors and users may be unaware of the available Toast animations or how to implement them correctly.
This issue aims to improve the developer experience by creating comprehensive documentation for the existing Toast examples. Contributors should document the available animations, explain their usage, and provide interactive examples that are easy to understand and reuse.
Since this is a documentation-only contribution, do not modify any files inside the core/ or components/ directories. All documentation must be added inside the appropriate submissions/docs/ directory, following the repository's contribution guidelines.
The documentation should maintain the same writing style, formatting, and organization as the rest of the project's documentation to ensure consistency across the repository.
Objective
Create comprehensive documentation for the existing Toast animation examples, including usage instructions, interactive examples, and implementation guidance while following the repository's contribution guidelines.
Submission Structure
submissions/docs/toast-documentation-yourinitials/
└── README.md
Note: Replace yourinitials with a unique identifier (for example, toast-documentation-ak, toast-documentation-vg, or toast-documentation-jd) to avoid naming conflicts with other contributors.
Requirements
- Follow all repository contributing guidelines.
- Place all documentation inside the
submissions/docs/ directory.
- Use a unique submission folder name.
- Keep the submission completely self-contained.
- Create a dedicated Toast documentation section.
- Document all available Toast animation examples.
- Include interactive HTML/CSS code snippets demonstrating usage.
- Explain when and where each animation is most appropriate.
- Maintain formatting consistent with the existing project documentation.
- Write clear, concise, and beginner-friendly explanations.
- Include preview images or GIFs if available (optional but encouraged).
- Do not modify any core framework files.
Acceptance Criteria
Suggested Implementation
- Create a new documentation folder using your unique identifier.
- Write a well-structured
README.md containing:
- Overview of Toast animations
- Available animation variants
- Installation instructions
- HTML example
- CSS example
- Customization options
- Best practices
- Accessibility considerations
- Include interactive code snippets that users can easily copy into their own projects.
- Keep examples lightweight, reusable, and consistent with other component documentation.
- If available, include screenshots or animated GIFs demonstrating the Toast animations.
Example folder structure:
submissions/docs/toast-documentation-vg/
└── README.md
Testing
- Verify all HTML/CSS snippets are valid and functional.
- Ensure formatting is consistent with other project documentation.
- Review the documentation for clarity and readability.
- Confirm all examples accurately represent the existing Toast animations.
- Ensure the Pull Request only adds files inside the
submissions/docs/ directory.
- Verify no files outside the
submissions/ directory are modified.
Benefits
- Improves discoverability of existing Toast animation examples.
- Makes the project easier for new contributors to learn.
- Provides reusable implementation examples for developers.
- Increases consistency across the project's documentation.
- Encourages high-quality, documentation-focused community contributions.
Labels
documentation toast examples good first issue
Add Missing Documentation for Toast Examples
Type: Documentation
Priority: Medium
Difficulty: Beginner
Description
The EaseMotion CSS project already includes several Toast animation examples, but they are not fully documented in the project's primary documentation or showcase. As a result, contributors and users may be unaware of the available Toast animations or how to implement them correctly.
This issue aims to improve the developer experience by creating comprehensive documentation for the existing Toast examples. Contributors should document the available animations, explain their usage, and provide interactive examples that are easy to understand and reuse.
Since this is a documentation-only contribution, do not modify any files inside the
core/orcomponents/directories. All documentation must be added inside the appropriatesubmissions/docs/directory, following the repository's contribution guidelines.The documentation should maintain the same writing style, formatting, and organization as the rest of the project's documentation to ensure consistency across the repository.
Objective
Create comprehensive documentation for the existing Toast animation examples, including usage instructions, interactive examples, and implementation guidance while following the repository's contribution guidelines.
Submission Structure
Requirements
submissions/docs/directory.Acceptance Criteria
submissions/docs/.Suggested Implementation
README.mdcontaining:Example folder structure:
Testing
submissions/docs/directory.submissions/directory are modified.Benefits
Labels
documentationtoastexamplesgood first issue