https://github.com/codenkoffee/html-framify-website
About Modern, versatile, and seamless image navigation for captivating device framesets in ReactJS and ReactTS apps.
https://github.com/codenkoffee/html-framify-website
Last synced: 1 day ago
JSON representation
About Modern, versatile, and seamless image navigation for captivating device framesets in ReactJS and ReactTS apps.
- Host: GitHub
- URL: https://github.com/codenkoffee/html-framify-website
- Owner: CodeNKoffee
- Created: 2023-07-08T15:24:30.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-05T09:52:53.000Z (over 1 year ago)
- Last Synced: 2025-05-30T20:14:19.379Z (8 months ago)
- Language: HTML
- Homepage: https://react-framify.netlify.app/
- Size: 123 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Framify - Image Navigation for Device Framesets
**Framify** is a lightweight JavaScript library that simplifies the process of showcasing screenshots and images within device framesets. It provides a user-friendly way to present your application or website visuals without the need for complex component libraries.
## Features
* **Supports various device framesets:** Customize the appearance using CSS to match your desired device frames (e.g., phones, tablets).
* **Enables navigation between multiple screenshots/images:** Users can easily navigate through a collection of screenshots or images within the frame.
* **(Optional) Touch swipe gestures for mobile browsing:** Enhance the user experience on mobile devices by allowing users to swipe through images. (Implementation details depend on your chosen approach)
* **Easy integration with vanilla HTML, CSS, and JS:** Framify seamlessly integrates with your existing project structure, requiring minimal code changes.
## Installation
1. Download the Framify library files (HTML, CSS, JS) from the project repository (link to be provided).
2. Include the downloaded files in your project directory:
```bash
project-directory/
framify.html
framify.css
framify.js
// Your other project files
```
## Usage
Here's a basic example of how to use Framify in your HTML project:
```html
My Project Screenshots
```
This code includes the Framify CSS and JS files and creates a container with your screenshots. You can customize the styles and behavior using CSS and vanilla JS.
## License
(Specify the license under which Framify is distributed. Common open-source licenses include MIT, Apache-2.0, etc.)
**Note:**
* This README provides a basic structure. You can expand on each section with more details, code examples, and customization options.
* Implement the touch swipe gestures functionality based on your preferred approach (e.g., vanilla JS or a separate library).
* Include links to the project repository and any relevant documentation.