https://github.com/edumigueis/photo-galleries

An experiment with galleries design and CSS properties. Made using VUEJS and CSS.
https://github.com/edumigueis/photo-galleries

css css-gallery css-grid css-layouts css-masonry-layouts css3 gallery gallery-images vue vue-router vuejs

Last synced: 28 days ago
JSON representation

An experiment with galleries design and CSS properties. Made using VUEJS and CSS.

• Host: GitHub
• URL: https://github.com/edumigueis/photo-galleries
• Owner: edumigueis
• License: apache-2.0
• Created: 2020-07-21T14:32:28.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-13T12:22:06.000Z (about 2 years ago)
• Last Synced: 2023-03-07T22:53:49.126Z (almost 2 years ago)
• Topics: css, css-gallery, css-grid, css-layouts, css-masonry-layouts, css3, gallery, gallery-images, vue, vue-router, vuejs
• Language: Vue
• Homepage:
• Size: 51 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Photo Galleries

> A collection of pure CSS3 galleries. Made using VueJS and CSS, the galleries in this project are:

- Masonry

- No Gutter Masonry

- Grid

- No Gutter Grid

- Hexagon Grid

- Row Masonry

All the galleries in this project can be coppied, but the copyright notice in all the files must be maintained, as states the LICENSE. All images provided by Unsplash. Check out pictures of the project:

## Row Masonry

![](./src/assets/images/row-masonry.png)

## Masonry:

![](./src/assets/images/masonry.png)

## Grid:

![](./src/assets/images/grid.png)

## No Gutter Masonry

![](./src/assets/images/masonry-no-gutter.png)

## Using

If you don't want to download the project, you can access the files through GitHub and copy the css inside the style tag. The html is inside the  tag. Just remove the v-for and the :key attributes from the inner tag of the gallery wrapper and copy that tag many times. Like so:

```html



  


    


      


        

      

      
Beautiful Image

    

    


      


        

      

      
Beautiful Image

    

    ...

  



```


If you want to download the entire project. Follow the following steps. After downloading the project, you can go into a console and cd the main project folder. Then, you have to install the dependencies:

```sh

cd photo-galleries

npm install

```

And, then run like so:

```sh

npm run dev

```

## Meta

Creator: Eduardo Migueis

Distributed under the APACHE 2.0 LICENSE. See `LICENSE` for more informaton.

[https://github.com/edumigueis/photo-galleries](https://github.com/edumigueis)