Page attributes

Special page attributes are available for project page elements:

Use page attributes for local configuration. If applied, attribute values will override settings provided in configuration object.

Additional layout and self helper attributes are available for page elements as well as for other elements.

transition Link

transition - define transition type for particular project page. Can be applied for any page type. For example:

<img data-src="photo.jpg" transition="fade"/>

<article transition="down">
    <h1>Title</h1>
    <p>Article text ...</p>
</article>

Worth to remember:

  • available for any page element
  • applies specific transition just for that particular page.
  • Pass the name of transition defined in configuration object.
  • If passed transition is not defined or name is incorrect, default transition apply.

hash Link

hash - define url hash for particular page. Can be applied for any page type. For example:

<!-- insert hash value for page element -->
<img data-src="photo.jpg" hash="my-photo"/>

<!-- now can you navigate to 'my-photo' page from anywhere -->
<a href="#/my-photo">Check my photo</a>

Main purpose of hash attribute is to provide a convenient way for ease in-page or between-page navigation. It's also useful for bookmarking or sharing pages.

Worth to remember:

  • available for any page element
  • if hash attribute is omitted template will lookup for id attribute and treat it the same way as hash.
  • if both id and hash attributes are present on same page element, template will favor hash attribute
  • if none of id or hash is defined, template will use page index as hash

fit Link

fit attribute defines how particular image responds to the width and height of its content box: contain or cover.

<!--  image is scaled to fit container  -->
<img src="photo.jpg" fit="contain"/>

<!--  image will cover whole container  -->
<img src="photo.jpg" fit="cover"/>

<!--  image will cover whole container starting from left  -->
<img src="photo.jpg" fit="cover left"/>

Options:

  • cover — image is scaled to cover whole container. Image aspect ratio is preserved. Image is cropped.
    Placement value (optional) — starting point of cover image:
    • top
    • bottom
    • left
    • right
    • center
  • contain — Image is scaled to fit within container. Image aspect ratio is preserved. Image is not cropped.

Worth to remember:

  • available for img page elements
  • available for img elements within figure page element
  • attribute values: 'contain' or 'cover' with optional placement value

skin Link

skin attribute defines page skin type:

<img data-src="photo.jpg" skin="dark"/>

You can make your own skins via css by creating .skin-name class. Tutorial coming soon.

Worth to remember:

  • available for any page element
  • make sure CSS skin is defined in your stylesheet otherwise page will not be skinned.
  • Skin attribute will trigger addition of skin CSS helper classes to respective html elements on webpage.

hide Link

Use hide attribute to exclude inner-page from project flow: 

<!--  use hide attribute  -->
<article hide hash="my-hidden-page">
    This page will be hidden
</article>

<!--  later  -->
<a href="#/my-hidden-page">See hidden page</a>

You must provide direct link to hidden page — it's the only way to visitor see that page. Hidden pages can't be reached via navigation buttons, pagination or via thumbnails.

Use hidden pages for modals, takeovers, mega-menus, forms or any other content not directly related to your project.

Worth to remember:

  • available for any page element
  • set as many hidden pages as you want
  • visitor will see hidden page only if you provide direct link to that page
  • thumbnails for hidden page won't be created
  • pagination bullet for hidden page is not displayed

alt Link

alt attribute defines simple photo page caption:

<img src="photo.jpg" alt="Simple photo caption"/>

Worth to remember:

  • available for img page elements only
  • Single alt attribute allowed per img page element
  • Alt attribute value will be used for thumbnail caption text.
  • If .caption helper element is present alt attribute is ignored
  • if both .caption helper element and alt attribute are not defined, template will use page index as thumb caption text.
  • alt attributes on img elements within figure or article will be ignored. Use .caption helper element for defining caption instead.

data-src Link

data-src attribute instruct template to lazy load image, meaning image is loaded only when it is about to be viewed. This way we save on bandwidth data and speed up overall page loading time.

<img data-src="photo.jpg"/>

Worth to remember:

  • available for img page elements only
  • Template will force lazy loading even if data-src attribute is not present by changing all img src attributes to data-src during initialization. However, some images might be downloaded as image request are processed prior template initialization.
  • To save bandwidth, speed up your webpage loading time and prevent downloading resources not currently needed we recommend to always use data-src attribute on img page elements.

× × ×

Learn next: Introduction