https://github.com/metafizzy/infinite-scroll-docs
📝 Documentation for Infinite Scroll
https://github.com/metafizzy/infinite-scroll-docs
Last synced: 4 months ago
JSON representation
📝 Documentation for Infinite Scroll
- Host: GitHub
- URL: https://github.com/metafizzy/infinite-scroll-docs
- Owner: metafizzy
- Created: 2017-06-08T18:15:09.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T17:47:03.000Z (over 3 years ago)
- Last Synced: 2025-03-29T17:01:28.274Z (about 1 year ago)
- Language: Handlebars
- Homepage: https://infinite-scroll.com
- Size: 969 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Infinite Scroll docs
Documentation for Infinite Scroll, the JavaScript library for automatically adding next pages.
[infinite-scroll.com](https://infinite-scroll.com)
## Install
Building these docs requires [npm](https://npmjs.com).
``` bash
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](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) is used for CSS code style.
``` css
.page-nav {} /* block */
.page-nav__item {} /* element, child */
.page-nav--dark {} /* modifier */
```
JavaScript can be initialized for each element with `data-js` attribute.
``` html
```
``` js
InfiniteScrollDocs.['page-nav'] = function( elem ) {
// do something with elem
};
```
---
By [Metafizzy](https://metafizzy.co)