Why yet another image gallery?

Well, as I started building my own website I decided to stay lean and so I went for Alpine JS to have a reduced version of my favorite front-end framework Vue JS.

There are so many different image galleries on the market so my first thought was, I should not invent the wheel again. So I searched for an image gallery which works fine with CSS grid or flexbox, defines the image size dynamically so you can build perfect responsive layouts and last but not least has lazy loading. I wanted to have a vanilla JS gallery - no jquery - and it should be easy to design with Tailwind CSS . After some research I found awesome galleries with amazing animations, tons of features but no gallery I was comfortable with.

Because I love ux-design and animations I had a clear idea of the functionality of the gallery on my “ WORK ” page, so I ended up developing my own content gallery . I started lean and stayed lean so I was able to keep the file size for CSS and JS at 6.2 kByte. Building my own gave me the freedom to use Tailwind CSS inside the gallery and for the necessary CSS definitions I decided to go for BEM methodology to keep the class names easy understandable and reusable.

Example: This is how it lookes like

If you use Tailwind CSS and Alpine JS in your project you might take a look at TA-Gallery maybe you like it and it is the right gallery for you to reuse, because it works great with CSS grid and flexbox.

You can find the TA-Gallery on Github and if you want to see the gallery in action you can find some examples on the demo page . The TA-Gallery is published under the MIT licence so you can use it wherever and however you want. A real world impression you can have on my WORK page for which I developed the TA-Gallery.

Features

Responsive and mobile first image and content galley based on Alpine JS and uses Tailwind CSS for layout.

• Lazy loading
• responsive and mobile first
• Predefined image sizes
• Gallery in custamizable aspect ratios
• Tailwind CSS plugin
• Dynamic image sizes by width, height or size
• Fixed image sizes
• Customizable animations - CSS animations
• Customizable class names
• Works great with CSS grid and flexbox
• Small file sizes JS + CSS
• Based on Alpine JS and Tailwind CSS
• Naming convention based on Tailwind CSS

All links in a practical list