Skip to content
This repository was archived by the owner on Mar 16, 2021. It is now read-only.

Commit 33f9315

Browse files
author
Chris Ferdinandi
committed
multiple updates
1 parent d129a63 commit 33f9315

13 files changed

+263
-18
lines changed

README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,10 @@ Gulp Boilerplate is licensed under the [MIT License](http://gomakethings.com/mit
125125

126126
Gulp Boilerplate uses [semantic versioning](http://semver.org/).
127127

128+
* v0.4.0 - August 15, 2014
129+
* Added `STARTER-README.MD`.
130+
* Added `index.html` template.
131+
* Added placeholders for variables, settings extending, and other methods.
128132
* v0.3.0 - August 15, 2014
129133
* Updated path with testing path for scripts.
130134
* Switched to Ruby Sass for better compatibility with Sass 3.x features.

STARTER-README.md

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
# NAMESPACE-UP [![Build Status](https://travis-ci.org/GITHUB-USERNAME/NAMESPACE-LOW.svg)](https://travis-ci.org/GITHUB-USERNAME/NAMESPACE-LOW)
2+
DESCRIPTION.
3+
4+
[Download NAMESPACE-UP](https://github.com/GITHUB-USERNAME/NAMESPACE-LOW/archive/master.zip) / [View the demo](http://GITHUB-USERNAME.github.io/NAMESPACE-LOW/).
5+
6+
**In This Documentation**
7+
8+
1. [Getting Started](#getting-started)
9+
2. [Installing with Package Managers](#installing-with-package-managers)
10+
3. [Options & Settings](#options-and-settings)
11+
4. [Browser Compatibility](#browser-compatibility)
12+
5. [How to Contribute](#how-to-contribute)
13+
6. [License](#license)
14+
7. [Changelog](#changelog)
15+
8. [Older Docs](#older-docs)
16+
17+
18+
19+
## Getting Started
20+
21+
Compiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code. Unit tests are located in the `test` directory.
22+
23+
### 1. Include NAMESPACE-UP on your site.
24+
25+
```html
26+
<link rel="stylesheet" href="dist/css/NAMESPACE-LOW.css">
27+
<script src="dist/js/classList.js"></script>
28+
<script src="dist/js/bind-polyfill.js"></script>
29+
<script src="dist/js/NAMESPACE-LOW.js"></script>
30+
```
31+
32+
NAMESPACE-UP is [built with Sass](http://sass-lang.com/) for easy customization. If you don't use Sass, that's ok. The `css` folder contains compiled vanilla CSS.
33+
34+
The `_config.scss` and `_mixins.scss` files are the same ones used in [Kraken](http://GITHUB-USERNAME.github.io/kraken/), so you can drop the `_NAMESPACE-LOW.css` file right into Kraken without making any updates. Or, adjust the variables to suit your own project.
35+
36+
NAMESPACE-UP also requires [classList.js](https://github.com/eligrey/classList.js) and `bind-polyfill.js`, polyfills that extend ECMAScript 5 API support to more browsers.
37+
38+
### 2. Add the markup to your HTML.
39+
40+
```html
41+
Markup here...
42+
```
43+
44+
Details.
45+
46+
### 3. Initialize NAMESPACE-UP.
47+
48+
```html
49+
<script>
50+
NAMESPACE-LOW.init();
51+
</script>
52+
```
53+
54+
In the footer of your page, after the content, initialize NAMESPACE-UP. And that's it, you're done. Nice work!
55+
56+
57+
58+
## Installing with Package Managers
59+
60+
You can install NAMEPSACE-UP with your favorite package manager.
61+
62+
* **NPM:** `npm install GITHUB-USERNAME/NAMESPACE-LOW`
63+
* **Bower:** `bower install https://github.com/GITHUB-USERNAME/NAMESPACE-LOW.git`
64+
* **Component:** `component install GITHUB-USERNAME/NAMESPACE-LOW`
65+
66+
67+
68+
## Options and Settings
69+
70+
NAMESPACE-UP includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.
71+
72+
### Global Settings
73+
74+
You can pass options and callbacks into NAMESPACE-UP through the `init()` function:
75+
76+
```javascript
77+
NAMESPACE-LOW.init();
78+
```
79+
80+
### Override settings with data attributes
81+
82+
NAMESPACE-UP also lets you override global settings on a link-by-link basis using the `[data-options]` data attribute:
83+
84+
```html
85+
// Markup here...
86+
```
87+
88+
### Use NAMESPACE-UP events in your own scripts
89+
90+
You can also call NAMESPACE-UP events in your own scripts.
91+
92+
#### functionName()
93+
Description
94+
95+
```javascript
96+
// Functions here...
97+
```
98+
99+
**Example**
100+
101+
```javascript
102+
// Example here...
103+
```
104+
105+
#### destroy()
106+
Destroy the current `NAMESPACE-LOW.init()`.
107+
108+
```javascript
109+
NAMESPACE-LOW.destroy();
110+
```
111+
112+
113+
114+
## Browser Compatibility
115+
116+
NAMESPACE-UP works in all modern browsers, and IE 9 and above.
117+
118+
NAMESPACE-UP is built with modern JavaScript APIs, and uses progressive enhancement. If the JavaScript file fails to load, or if your site is viewed on older and less capable browsers, all content will be displayed by default.
119+
120+
121+
122+
## How to Contribute
123+
124+
In lieu of a formal style guide, take care to maintain the existing coding style. Don't forget to update the version number, the changelog (in the `readme.md` file), and when applicable, the documentation.
125+
126+
127+
128+
## License
129+
130+
NAMESPACE-UP is licensed under the [MIT License](http://gomakethings.com/mit/).
131+
132+
133+
134+
## Changelog
135+
136+
NAMESPACE-UP uses [semantic versioning](http://semver.org/).
137+
138+
* v1.0 - DATE
139+
* Initial release.
140+
141+
142+
143+
## Older Docs
144+
145+
* [Version 1](#)

dist/css/myplugin.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* gulp-boilerplate v0.3.0
2+
* gulp-boilerplate v0.4.0
33
* My Gulp.js boilerplate for creating new web projects, by Chris Ferdinandi.
44
* http://github.com/cferdinandi/Plugin
55
*

dist/css/myplugin.min.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
/** gulp-boilerplate v0.3.0, by Chris Ferdinandi | http://github.com/cferdinandi/Plugin | Licensed under MIT: http://gomakethings.com/mit/ */
1+
/** gulp-boilerplate v0.4.0, by Chris Ferdinandi | http://github.com/cferdinandi/Plugin | Licensed under MIT: http://gomakethings.com/mit/ */

dist/js/bind-polyfill.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* gulp-boilerplate v0.3.0
2+
* gulp-boilerplate v0.4.0
33
* My Gulp.js boilerplate for creating new web projects, by Chris Ferdinandi.
44
* http://github.com/cferdinandi/Plugin
55
*

dist/js/bind-polyfill.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/js/classList.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* gulp-boilerplate v0.3.0
2+
* gulp-boilerplate v0.4.0
33
* My Gulp.js boilerplate for creating new web projects, by Chris Ferdinandi.
44
* http://github.com/cferdinandi/Plugin
55
*

dist/js/classList.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/js/myplugin.js

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* gulp-boilerplate v0.3.0
2+
* gulp-boilerplate v0.4.0
33
* My Gulp.js boilerplate for creating new web projects, by Chris Ferdinandi.
44
* http://github.com/cferdinandi/Plugin
55
*
@@ -25,6 +25,8 @@
2525

2626
var myPlugin = {}; // Object for public APIs
2727
var supports = !!document.querySelector && !!root.addEventListener; // Feature test
28+
var eventListeners = []; //Listeners array
29+
var settings, ELEMENTS, eventTimeout;
2830

2931
// Default settings
3032
var defaults = {
@@ -96,7 +98,40 @@
9698
* @public
9799
*/
98100
myPlugin.destroy = function () {
99-
// @todo Undo init...
101+
102+
if ( !settings ) return;
103+
104+
// @todo Undo init functions...
105+
106+
// Remove event listeners
107+
if ( ELEMENTS ) {
108+
forEach( ELEMENTS, function ( elem, index ) {
109+
elem.removeEventListener( 'click', eventListeners[index], false );
110+
});
111+
eventListeners = [];
112+
}
113+
114+
// Reset variables
115+
settings = null;
116+
ELEMENTS = null;
117+
eventTimeout = null;
118+
119+
};
120+
121+
/**
122+
* On window scroll and resize, only run events at a rate of 15fps for better performance
123+
* @private
124+
* @param {Function} eventTimeout Timeout function
125+
* @param {TBD} ELEMENTS Some element, nodelist, or other variable to pass in
126+
* @param {Object} settings
127+
*/
128+
var eventThrottler = function ( eventTimeout, ELEMENTS, settings ) {
129+
if ( !eventTimeout ) {
130+
eventTimeout = setTimeout(function() {
131+
eventTimeout = null;
132+
setWrapHeight( wrap, footer, settings );
133+
}, 66);
134+
}
100135
};
101136

102137
/**
@@ -109,8 +144,21 @@
109144
// feature test
110145
if ( !supports ) return;
111146

147+
// Destroy any existing initializations
148+
myPlugin.destroy();
149+
150+
// Selectors and variables
151+
settings = extend( defaults, options || {} ); // Merge user options with defaults
152+
ELEMENTS = document.querySelectorAll('[data-ELEM]'); // Set your variable here
153+
112154
// @todo Do something...
113155

156+
// Assigns event listeners to an array so they can be programatically destroyed
157+
forEach(ELEMENTS, function (elem, index) {
158+
eventListeners[index] = myPlugin.METHOD.bind( null, elem, ELEMENTSS, settings );
159+
elem.addEventListener('click', eventListeners[index], false);
160+
});
161+
114162
};
115163

116164

dist/js/myplugin.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>MyPlugin</title>
5+
<title>NAMESPACE-UP</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77

88
<!-- A basic responsive reset -->
@@ -27,7 +27,7 @@
2727
</style>
2828

2929
<!-- stylesheets -->
30-
<link rel="stylesheet" href="dist/css/myplugin.css" type="text/css">
30+
<link rel="stylesheet" href="dist/css/NAMESPACE-LOW.css" type="text/css">
3131

3232
<!-- HTML5 Shim for IE -->
3333
<!--[if IE]>
@@ -38,9 +38,9 @@
3838
<body>
3939
<section class="container">
4040

41-
<h1 style="text-align: center; font-size: 3em; margin-bottom: 0;">MyPlugin</h1>
41+
<h1 style="text-align: center; font-size: 3em; margin-bottom: 0;">NAMESPACE-UP</h1>
4242
<p style="text-align: center; font-size: 1.5em; margin: 0;">description</p>
43-
<p style="text-align: center;"><a href="https://github.com/yourname/myplugin">MyPlugin on GitHub</a></p>
43+
<p style="text-align: center;"><a href="https://github.com/GITHUB-USERNAME/NAMESPACE-LOW">NAMESPACE-UP on GitHub</a></p>
4444

4545

4646

@@ -50,9 +50,9 @@ <h1 style="text-align: center; font-size: 3em; margin-bottom: 0;">MyPlugin</h1>
5050
<!-- Javascript -->
5151
<script src="dist/js/classList.js"></script>
5252
<script src="dist/js/bind-polyfill.js"></script>
53-
<script src="dist/js/myplugin.js"></script>
53+
<script src="dist/js/NAMESPACE-LOW.js"></script>
5454
<script>
55-
myplugin.init();
55+
NAMESPACE-LOW.init();
5656
</script>
5757

5858
</body>

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "gulp-boilerplate",
3-
"version": "0.3.0",
3+
"version": "0.4.0",
44
"description": "My Gulp.js boilerplate for creating new web projects",
55
"author": {
66
"name": "Chris Ferdinandi",

0 commit comments

Comments
 (0)