Gridzy.js 2 – Style Gridzy

Gridzy.js 2 has a few very simple predefined skins, but you can create your very own one. There is also a possibility, to provide your presumably better skin to the whole Gridzy community …


How To Start

The easiest way is to first copy an existing skin and adapt it to your own needs. The predefined skin gridzySkinBlank would usually provide a good foundation:

/** SKIN Blank **/

/* all gallery items (direct children of the main container element) */
.gridzySkinBlank > .gridzyItem {
	overflow: hidden;
}

/* all gallery images (predefined in Gridzy's main CSS file, but can be overridden) */
.gridzySkinBlank .gridzyImage {
}

/* all gallery captions (just create your very own style) */
.gridzySkinBlank .gridzyCaption {
	margin: 0;
	padding: .5em;
	opacity: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	transition: opacity .5s;
	overflow: auto;
	background: rgba(0, 0, 0, .7);
	color: rgb(255, 255, 255);
}

.gridzySkinBlank > .gridzyItem:hover .gridzyCaption {
	opacity: 1;
}

In the CSS file you’ll find the classes gridzySkinBlank, gridzyImage and gridzyCaption. Gridzy itself doesn’t need these classes. They are only used for styling and so you can remove or rename them if you like.

Additionally you’ll find the CSS class gridzyItem. Gridzy sets this class automatically to all direct children of the main container element. So, you can use this class to style the items of your gallery.

Mind Important Things

  1. The item contents should be fully responsive. Consider that the element size will definitely change. Use percentage values instead of pixel values. And take a look at the Gridzy layout option autoFontSize, which binds the font-size onto the item box size.
  2. Each item should have a well-defined aspect ratio. The item’s aspect ratio will never change and is needed to calculate the grid. So if an item doesn’t automatically have a well-defined aspect ratio, predefine it manually (e.g. via css).

In some cases, it may be easier to style the content of the items before Gridzy is initializing. Simply remove the class gridzy or the Gridzy javascript file temporarily for this.

That’s it! That’s all you need to build your very own skin. Most of the predefined skins doesn’t use more that this.

But there could be more if you like …


Advanced Skins

Gridzy uses more CSS classes than only gridzyItem. Most of them will be set automatically and you can use them for styling too.

Main Container Classes

Class NameDescription
gridzy
to set manually
Gridzy automatically finds elements with this class and initializes them.
gridzyAnimatedWill be set automatically if option animate is true. If this class is set manually, the option animate will automatically get true too (except if it’s explicitly set to false).

Item Classes

Class NameDescription
gridzyItemWill be set as soon as the item starts the initializing process. Will never be removed.
gridzyItemInitializingWill be set as soon as the item starts the initializing process. Will be replaced by gridzyItemReady as soon as the item is fully initialized. Means not that images are fully loaded (see gridzyItemLoading), but item is ready to get visible.
gridzyItemReadyWill replace gridzyItemInitializing as soon as the item is fully initialized. Will never be removed. Means not that images are fully loaded (see gridzyItemComplete), but item is ready to get visible.
gridzyItemLoadingWill be set as soon as the item starts the initializing process. Will be replaced by gridzyItemComplete as soon as the contained images (usually only one) are fully loaded.
gridzyItemCompleteWill replace gridzyItemLoading as soon as the contained images (usually only one) are fully loaded. Will never be removed.
gridzyItemInitialToVisibleWill be set as soon as the item begins to appear the first time. Will be removed as soon as the item is completely visible.
gridzyItemVisibleWill be set as soon as the item is fully visible. Will be removed as soon as the item begins to disappear.
gridzyItemVisibleToHiddenWill be set as soon as the item begins to disappear. Will be removed as soon as the item is completely hidden.
gridzyItemHiddenWill be set as soon as the item is completely hidden. Will be removed as soon as the item begins to appear.
gridzyItemHiddenToVisibleWill be set as soon as the item begins to appear (except appearing the first time – see class gridzyItemInitialToVisible). Will be removed as soon as the item is completely visible.
gridzyItemVisibleToVisibleWill be set as soon as something in the grid changed, but the item itself was and stay visible. Will be removed as soon as the change animation is finished.

By default the progress indicator and the animations for appearing and disappearing images are predefined by the Gridzy main CSS file.

With these above mentioned CSS classes you can style your own progress indicator and animations. Dare a look into the Gridzy main CSS file, to understand what you would have to override. No fear, everything is well documented there.


Share Your Skin – Get Famous

If you would like to share your skin with the Gridzy community, that would be really awesome. I’m sure some of you can make better skins than me. So you could help to make Gridzy even better.

If you provide your skin, I would place your name and your website URL everywhere the skin is mentioned, and in the skin file itself anyway (of course, only if you prefer not to remain anonymous). Just send me your skin or the URL of the website where I can find it and tell me what information you would like to share. ?

If the needed CSS is mixed with other CSS, don’t think about it. I would pick it for you. Just send me the URL, where I can find it.


If you finished your styling and you are happy with it, you may be interested to optimize the loading process to make all perfect. Please check out Gridzy.js 2 – Optimize Loading.