Skip to content

metafizzy/infinite-scroll-docs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

bfd5b21 Β· Jan 7, 2021

History

91 Commits
Jan 7, 2021
Jan 3, 2021
Jan 1, 2021
Jun 22, 2017
Dec 29, 2020
Jan 3, 2021
Jan 7, 2021
Dec 29, 2020
Dec 29, 2020
Dec 24, 2020
Dec 29, 2020
May 22, 2017
Jan 4, 2021
Dec 30, 2020
Jan 7, 2021
Jan 7, 2021
Dec 29, 2020

Repository files navigation

Infinite Scroll docs

Documentation for Infinite Scroll, the JavaScript library for automatically adding next pages.

infinite-scroll.com

Install

Building these docs requires npm.

npm install

Scripts

Run with npm: npm run dev.

  • build - build production version of site
  • dev - built development version of site
  • lint - lint JS and CSS "npm run lint:js && npm run lint:css",
  • lint:js - lint JS. Run npm run lint:js -- --fix to make automatic fixes
  • lint:js - lint CSS. Run npm run lint:css -- --fix to make automatic fixes

Structure

  • assets/ - files that get copied into build/
  • build/ - where static site gets built
  • content/ - page content
  • css/ - boilerplate CSS
  • data/ - Site and logo data files.
  • js/ - boilerplate JS
  • modules/ - See Modules below
    • modules/demos - Demo modules
  • tasks/ - Gulp tasks to build the site
  • templates/ - page templates

Modules

Modules are re-usable components used throughout the site. A module may consist of template, JS, and CSS files.

modules/
  page-nav/
    page-nav.css
    page-nav.js
    page-nav.hbs

BEM is used for CSS code style.

.page-nav {} /* block */
.page-nav__item {} /* element, child */
.page-nav--dark {} /* modifier */

JavaScript can be initialized for each element with data-js attribute.

<div class="page-nav" data-js="page-nav">
InfiniteScrollDocs.['page-nav'] = function( elem ) {
  // do something with elem
};

By Metafizzy