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

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.
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 Name	Description
`gridzy` to set manually	Gridzy automatically finds elements with this class and initializes them.
`gridzyAnimated`	Will 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 Name	Description
`gridzyItem`	Will be set as soon as the item starts the initializing process. Will never be removed.
`gridzyItemInitializing`	Will 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.
`gridzyItemReady`	Will 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.
`gridzyItemLoading`	Will 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.
`gridzyItemComplete`	Will replace `gridzyItemLoading` as soon as the contained images (usually only one) are fully loaded. Will never be removed.
`gridzyItemInitialToVisible`	Will be set as soon as the item begins to appear the first time. Will be removed as soon as the item is completely visible.
`gridzyItemVisible`	Will be set as soon as the item is fully visible. Will be removed as soon as the item begins to disappear.
`gridzyItemVisibleToHidden`	Will be set as soon as the item begins to disappear. Will be removed as soon as the item is completely hidden.
`gridzyItemHidden`	Will be set as soon as the item is completely hidden. Will be removed as soon as the item begins to appear.
`gridzyItemHiddenToVisible`	Will 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.
`gridzyItemVisibleToVisible`	Will 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.