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. |