PrettyPhoto Minimal Theme – a pure CSS prettyPhoto simple theme

I have recently used prettyPhoto for a project and I have to admit that it is a great tool to have in hand when it comes to modal pop-ups.

It has lots of types of content support and it is really simple to customize. prettyPhoto also comes with lots of features and 5 built-in themes…

• light_rounded
• dark_rounded
• light_square
• dark_square
• facebook
• pp_default
• minimal theme – which will add here with minimal and pure CSS

…which you can easily change via JavaScript customization. But this is not the subject of this tutorial.

I prefer a default minimal and simple theme for prettyPhoto and the ability to add stuff if I need it and not the opposite. So this is my little CSS to create a simple theme for prettyPhoto

Please note that this theme is beta version and you should check that everything is OK before any production deployment. You can also remove all other themes if you do not need them, for a light weight code.

What you will download with the Minimal prettyPhoto theme

So with theme you will get the following:

• Minimal theme for prettyPhoto lightbox
• Really simple and minimal aspect
• No images have been used and I mean no images, including no sprites and no encoded images in the CSS.
• 1 and only HTTP requests to load the theme CSS file (like I said, no images are used). The default theme uses 22 requests to 7 image files of about 20KB (all).
• Smaller CSS file size only 5KB for the compressed version.

so this is all about speed, after all.

So all this, smaller file size and less HTTP requests translate into faster speed when talking about page loading.

Note, that you can bundle this theme into the prettyPhoto main CSS files and remove all other themes if you do not need them.

But if you don’t insert the theme into the main CSS you will still have a fast loading theme, since the browser will not load images in the CSS that are not used. I will not blame you if you don’t bundle the files together, I also prefer to keep things separate, just in case you need to update.

You can include the theme in a separate CSS file like this

You can include it in any order. It will work.

This is all you have to do to have your minimal theme for prettyPhoto available. You can now go and activate it via prettyPhoto standard function:

Scrool a little bit to see a live working version of the prettyPhoto minimal theme and download the CSS files from GitHub.

PrettyPhoto Minimal theme Demo

Download Minimal theme for prettyPhoto lightbox

You can find the minimal prettyPhoto theme on GitHub here:

https://gist.github.com/catalin586/12ff5f68ceaba74e9c3d

Credits – Here is what I have used for the Minimal theme

The SpinKit to create a simple CSS loader instead of calling a gif image:  https://github.com/tobiasahlin/SpinKit

Some pure CSS icons. I use it for the expand/contract buttons. It works well on IE also. http://nicolasgallagher.com/pure-css-gui-icons/

Some styling for small screens. It’s not perfect but it’s the best I could came up with. http://themeforest.net/forums/thread/prettyphoto-styling-for-small-screens/66783

And the prettyPholo lightbox that you can download it from the main site here: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/