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
Auto.css
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.
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.
Auto.js
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.