Clean-up README

This commit is contained in:
Chauncey McAskill
2021-09-18 01:11:54 -04:00
parent d4ded2a64e
commit 655031cd1b

View File

@@ -12,22 +12,25 @@
| ---------- | -------- |
| [Node] | > 14.15 |
[Node]: https://nodejs.org/en/
[Node]: https://nodejs.org/en/
You can use [nvm](https://github.com/nvm-sh/nvm) to install the node version in `.nvmrc`.
## Installation
```sh
npm i
```
## Usage
```sh
# start it
npm start
```
## Configuration
Rename occurrences of `locomotive-boilerplate` with your project's name in `loconfig.json`.
## Build
@@ -41,11 +44,12 @@ npm start
npm run build
```
## Styles
[Sass](https://github.com/sass/node-sass) is our CSS preprocessor. [Autoprefixer](https://github.com/postcss/autoprefixer) is also included.
#### Architecture
[ITCSS](https://github.com/itcss) is our CSS architecture.
* `settings`: Global variables, site-wide settings, config switches, etc.
@@ -60,11 +64,15 @@ npm run build
[_source_](https://github.com/inuitcss/inuitcss#css-directory-structure)
#### Naming
We use a simplified [BEM](https://github.com/bem) syntax.
`.block .block_element -modifier`
```
.block .block_element -modifier
```
#### Namespaces
We namespace our classes for more [transparency](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/).
* `o-`: Object that it may be used in any number of unrelated contexts to the one you can currently see it in. Making modifications to these types of class could potentially have knock-on effects in a lot of other unrelated places.
@@ -76,6 +84,7 @@ We namespace our classes for more [transparency](https://csswizardry.com/2015/03
[_source_](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/#the-namespaces)
#### Example
```html
<div class="c-block -large">
<div class="c-block_layout o-layout">
@@ -105,17 +114,20 @@ We namespace our classes for more [transparency](https://csswizardry.com/2015/03
```
## Scripts
[modularJS](https://github.com/modularorg/modularjs) is a small framework we use on top of ES modules. It compiles with [Rollup](https://github.com/rollup/rollup) and [Babel](https://github.com/babel/babel).
#### Why
- Automatically init visible modules.
- Easily call other modules methods.
- Quickly set scoped events with delegation.
- Simply select DOM elements scoped in their module.
* Automatically init visible modules.
* Easily call other modules methods.
* Quickly set scoped events with delegation.
* Simply select DOM elements scoped in their module.
[_source_](https://github.com/modularorg/modularjs#why)
#### Example
```html
<div data-module-example>
<div data-example="main">
@@ -124,8 +136,9 @@ We namespace our classes for more [transparency](https://csswizardry.com/2015/03
<button data-example="load">More</button>
</div>
```
```js
import { module } from 'modujs';
import { module } from 'modujs';
export default class extends module {
constructor(m) {
@@ -147,9 +160,11 @@ export default class extends module {
[Learn more](https://github.com/modularorg/modularjs)
## Page transitions
[modularLoad](https://github.com/modularorg/modularload) is used for page transitions and lazy loading.
#### Example
```html
<nav>
<a href="/">Home</a>
@@ -175,15 +190,18 @@ this.load = new modularLoad({
[Learn more](https://github.com/modularorg/modularload)
## Scroll detection
[Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll) is used for elements in viewport detection and smooth scrolling with parallax.
[Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll) is used for elements in viewport detection and smooth scrolling with parallax.
#### Example
```html
<div data-module-scroll>
<div data-scroll>Trigger</div>
<div data-scroll data-scroll-speed="1">Parallax</div>
</div>
```
```js
import LocomotiveScroll from 'locomotive-scroll';