Css selectors

After page initialization foliodot template engine generate and inserts number of css classes for easier customization or fine tuning of overall web page appearance.

Types of foliodot css selectors:

  • static - classes are set during page initialization and don't change afterwards.
  • dynamic - classes that are changing based on user interaction with web page.

Most useful helper classes appear on following html elements:

  • html
  • body
  • .page

Example:

<html class="sm- md- lg- xl- is-desktop on-skin-dark sidebar-"">

Some CSS selectors are defined as part of html template strings in configuration object.

For complete overview of existing css selectors use Chrome DevTools to inspect rendered html code of web page. Interact with page (navigate, open sidebar etc) and look how dynamic classes changes yet static stay the same.

CSS selectors are provided for additional web page styling — CSS knowladge is required.

Some of most useful helper css selectors are featured bellow.

Environment classes (on html element) Link

Based on user agent sniffing, template engine will try to detect users device.

Selector Description
.is-desktop page is viewed from desktop computer
.is-tablet page is viewed from tablet
.is-mobile page is viewed via mobile phone

Media-query classes (on html element) Link

Use following media query classes to quickly style your elements in css.

Dash (-) in class names represent selection:

  • (-XX) apply to everything up to breakpoint
  • (XX-) apply to everything after breakpoint

Breakpoints shorthands: sm(small), md(medium), lg(large) xl(extra large), sidebar(sidebar section)

Selector Media query
.portrait screen and (orientation:portrait)
.-sm screen and (max-width:480px)
.sm- screen and (min-width:481px)
.-md screen and (max-width:720px)
.md- screen and (min-width:721px)
.-lg screen and (max-width:960px)
.lg- screen and (min-width:961px)
.-xl screen and (max-width:1200px)
.xl- screen and (min-width:1201px)
.sidebar- screen and (max-width:800px)
.-sidebar screen and (min-width:801px)

Event selectors (on body element) Link

Selector Description
.on-ready Foliodot template is initialized and ready.
.on-project Current view is project section.
.on-page-{{index}} Current project page in view. Index represents page index.
.on-page-hide Current project page is hidden from the main flow (has attribute 'hide')
.on-thumbs Current view is thumbnails section.
.on-thumbs-enabled Web page has thumbnail section.
.on-thumbs-{{index}} Current thumbnail page in view. Index represents page index.
.on-sidebar-{{align}} Sidebar align indicator class. Align values: left, right, top, bottom
.on-sidebar-closed Sidebar is closed (not in view)
.on-sidebar-opened Sidebar is opened (is in view)
.on-skin-{{type}} Skin type of current project page
.on-inactive User is inactive (no mouse/touch activity) for defined amount of time.
.on-photo-fit-normal Current project page photo fit — no transform
.on-photo-fit-contain Current project page photo fit — image size is scaled to fit browser window
.on-photo-fit-cover Current project page photo fit — image size is scaled to cover browser window (image aspect ratio is maintained)

Inner pages selectors (on inner page elements) Link

Selector Description
.page Universal inner page selector for both project and thumbnail pages
.page-{{index}} Unique project page index class for styling particular project inner page.
.page-current Current (in view) project or thumbnail page indicator class
.page-hide Page is hidden from the main flow (has 'hide' attribute)
.page-skin-{{type}} Page skin class (if skin is applied)
.thumbs-{{index}} Unique thumbnails page index class for styling particular thumbnail page.

× × ×

Learn next: Css utilities