GitHub

Download and connect files manually: https://github.com/andreyshpigunov/auto

Connect script at the and of page, before others scripts, and init all available components: auto.init().

CDN

Current versions of files are available at the following links:

JsDelivr

Latest release:
https://cdn.jsdelivr.net/gh/andreyshpigunov/auto@1.4.4/dist/auto.css
https://cdn.jsdelivr.net/gh/andreyshpigunov/auto@1.4.4/dist/auto.js

Latest:
https://cdn.jsdelivr.net/gh/andreyshpigunov/auto@latest/dist/auto.css
https://cdn.jsdelivr.net/gh/andreyshpigunov/auto@latest/dist/auto.js

Helpers

Extend the functionality of elements.

Helpers classes

.unselectable — disables the selection of an element and all its descendants
.clear — clearfix
.uppercase — uppercase text
.lowercase — lowercase text
.nowrap — prohibiting line wrapping
.hyphens — automatic hyphenation (works only in modern browsers)
.sticky — sticky top
.ratio[1x1|2x1|4x3|16x9] — wrapper for iframe, object and embed, proportionally scale filter
.breakWord — transfers non-portable text constructs
.visuallyHidden — hides the block in a special way
.invisible — assigns to a block visibility: hidden
.tableResponsive — horizontal scrolling of the table if it doesn't fit

.hidden — assigns to a block display: none
.hiddenNext — assigns to the next block display: none
Supports lg:, md:, sm: modifiers.

.al — text-align: left
.ar — text-align: right
.ac — text-align: center
.aj — text-align: justify
.fl — float: left
.fr — float: right
Supports md:, sm: modifiers.

.fsxl — font-size xlarge
.fsl — font-size large
.fsn — font-size normal
.fss — font-size small
.fsxs — font-size xsmall
Supports md:, sm: modifiers.

Actions classes

.syncHover — adding a class synchronously .hover to links with the same href
.isAppeared — when it appears in the viewport, the element is assigned classes .appeared and .visible. When disappearing from viewport class .visible disappear, .appeared remains.

Spacers

.container — max width centered container (use --container-max-width variable for change)
.w100, .h100 — width 100% and height 100%
.max — block max-width 100%
.max[50,60,70,80,90,100,110,120,140,160,180,200,300,..,1400] — block max-width limiter

.m[0..7] — margin
.mt[0..7] — margin-top
.mb[0..7] — margin-bottom
.ml[0..7] — margin-left
.mr[0..7] — margin-right
.mx[0..7] — margin-left and margin-right
.my[0..7] — margin-top and margin-bottom
.ma — margin: auto
.mta — margin-top: auto
.mba — margin-bottom: auto
.mla — margin-left: auto
.mra — margin-right: auto
.mxa — margin-left: auto and margin-right: auto
.mya — margin-top: auto and margin-bottom: auto
Supports md:, sm: modifiers.

.p[0..7] — padding
.pt[0..7] — padding-top
.pb[0..7] — padding-bottom
.pl[0..7] — padding-left
.pr[0..7] — padding-right
.px[0..7] — padding-left and padding-right
.py[0..7] — padding-top and padding-bottom
Supports md:, sm: modifiers.

.r100 — border-radius: 100%
.r[0..7] — border-radius
.sh[0..4] — box-shadow
Supports md:, sm: modifiers.

Buttons

To create a button, add a class to the element .button.

Grid

Flexible 1–12 columns grid system.

.grid — main grid element
.grid.gap[0..9] — 0..9 gap levels (default — 1)
.grid.g[1..12] — 1..12 columns grid (default — 12)
.grid .c[1..12] — 1..12 wide column

On medium screens: .md:gap[0..9], .md:g[1..12], .md:c[1..12]
On small screens: .sm:gap[0..9], .sm:g[1..12], .sm:c[1..12]

Use -grid-gap variable on grid element for custom gap.

Grid gap margins: .mtg, .mbg, .mlg, .mrg

Flex

Flexbox layout.

.flex — main flexbox element
.flex.gap[1..9] — 0..9 gap levels (default — 0)

.flex.fr — direction row,
.flex.fc — direction column,
.flex.fw — wrap,
.flex.fnw — nowrap

.flex.ais — align-items: stretch,
.flex.aifs — align-items: flex-start,
.flex.aic — align-items: center,
.flex.aife — align-items: flex-end

.flex.jcfs — justify-content: flex-start,
.flex.jcc — justify-content: center,
.flex.jcfe — justify-content: flex-end,
.flex.jcsb — justify-content: space-between,
.flex.jcsa — justify-content: space-around

.flex .f[0..10] — flex: [0..10],
.flex .fb[0..10] — flex-basis: [0..10] 0%,10%,..,100%,
.flex .o[0..10] — order: [0..10]

All options supports md:, sm: modifiers.

Modals

Universal modal windows.

By default, the modal window code is added to the end of the body tag, but if you need to place it elsewhere, you need to add a class .modal-here to the block where the window code should be located.

API

auto.modal.show(id) — open modal
auto.modal.hide(id) — close modal

Events

modal:ready — before modal opened
modal:open — modal opened
modal:close — modal closed

Example:
qs('#modalId').addEventListener('modal:ready', event => { ... })

Init modals

Examples

Animations

Starts a function with animation or controls the class of an element when it or its trigger element reaches a certain scroll point.

Initialization

triggerId — pointer to the id of the element that we are tracking the position
start — animation start point (height from the top edge of the screen in px or vh)
end — animation end point (height from the top edge of the screen in px or vh)
functionName — name of the function that starts executing when the element moves between "start" and "end"
class — class assigned to a reference when "target" is between "start" and "end"
classRemove — whether to delete the "class" from the element after it leaves the animation zone, by default false

if the element itself is a trigger, you don't need to specify the triggerId.

The "functionName" function gets a parameter with all the fields of the element described above and the "progress" parameter, which changes from 0 to 1, as the page scrolls and the element moves.

Example

Scroller

Scrolls the page to the element with the specified id.
Automatically applied to elements with "data-scroll".

Init

parent — parent selector (default use window)
targetId — target id (required)
offset — offset in pixels (default 0)
duration — scroll duration (default 1000 ms)
classActive — class assigned to a reference when the "target" is in the viewport zone

API

auto.scroll.to(target, offset, duration, parent)

target — element id or element

Loader

Starts the data loading function when scrolling to the end of the block.
Automatically applied to elements with "data-loadmore".

Init

functionName — loader function name
offset — offset in pixels from the bottom edge of the page (default 0)

An incremental parameter page is passed to the function each time it is run.

Sheets

Tab sheets. No limits for wrapping tabs and sheets in another tags.

By default, the 1st .sheet-body set active. You can set another .sheet-body active by adding current .sheet-tab class .active.

Init

API

auto.sheets.show(id) — show sheet

Demo:

Lazyload

Loading images when they appear in viewport.
Works with the IntersectionObserver method, only in modern browsers.
If IntersectionObserver is not supported, images are loaded in the usual way.

Init

Others

Frequently used functions.