ODE/Lightbox-Remastered
ODE/Lightbox-Remastered
1
1
Fork 0
Code Pull Requests Releases 1 Activity

feat: 🚧 prepare stuff for exposing the frame-only branch

Browse Source
This commit is contained in:
Thoscellen 2021-08-09 19:23:45 +02:00
parent 84f6aeb129
commit a9172b1b7a
1 changed files with 9 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
README.md
View File

@ -2,29 +2,24 @@
> This repository serve resources and examples for my [Behance portfolio](https://www.behance.net/gallery/117643605/Lightbox-Remastered).
This small redesign is a personal take on lightboxes (or popins) used in One and Neo platforms. I felt the current one was in dire need of a rework and a better UI.
You are viewing the frame-only branch. This branch feature a wireframe version of this prototype.
The project itself is a prototype in native HTML/CSS aiming to improve the box behaviour and resizing. I worked into rearranging the content panels via Flexboxs and Grids, and redefined where content could be allowed to scroll or be static. It now takes into account the viewport and the content and try to prioritize what should be resized first. I eliminated existing empties and suboptimal areas and adjusted borders and lines to create a more easy and readable component. The component have a better hierarchical reading from top to bottom and use more width.
This work allowed me to exercise on interface design and graphical design, inspired to step in the One guidelines, and improve my HTML and CSS skills. This prototype aim to suggest improvements on the product.
* [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/)
* [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/wireframe/)
On Firefox, you can use the Adaptative View (`Ctrl / Cmd + Shift + M`) to resize it freely.
* [Before/After comparison](https://khosmon.gitlab.io/Lightbox-Remastered/sliderjs/)
## Galeries d'images
## Gallery
![Exemple de lightbox pouvant afficher tout son contenu dans l'espace disponible](./public/readme_assets/Frame%201.png)
![Exemple of a full ranged lightbox](./public/readme_assets/Frame%201.png)
![Exemple de lightbox très grande](./public/readme_assets/Frame%202.png)
![Exemple of a very big lightbox](./public/readme_assets/Frame%202.png)
![Exemple de lightbox confortable](./public/readme_assets/Frame%203.png)
![Exemple of a comfty lightbox](./public/readme_assets/Frame%203.png)
![Exemple de lightbox étroite](./public/readme_assets/Frame%204.png)
![Exemple of a neat lightbox](./public/readme_assets/Frame%204.png)
![Exemple de lightbox retrécie](./public/readme_assets/Frame%205.png)
![Exemple of a small lightbox](./public/readme_assets/Frame%205.png)
![Exemple de lightbox étriquée](./public/readme_assets/Frame%206.png)
![Exemple of a narrow lightbox](./public/readme_assets/Frame%206.png)
## Credits