Skip to content

Commit 78291ae

Browse files
oneeyedmanoneeyedman
authored
Merge pull request #18 from spacenomads/dev
Create a final PUG release
2 parents a985f3b + 41806e6 commit 78291ae

16 files changed

+928
-705
lines changed

‎.csscomb.json

+363-318
Large diffs are not rendered by default.

‎.editorconfig

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# EditorConfig is awesome: http://EditorConfig.org
2+
3+
# top-most EditorConfig file
4+
root = true
5+
# Unix-style newlines with a newline ending every file
6+
[*]
7+
end_of_line = lf
8+
insert_final_newline = true
9+
10+
# 2 tabs indentation
11+
[*]
12+
indent_style = tab
13+
indent_size = 2
14+
15+
# 2 space indentation for .json and .md files
16+
[*.{json, md}]
17+
indent_style = space
18+
indent_size = 2
19+
20+
# urf-8 character set
21+
[*]
22+
charset = utf-8
23+
24+
# Remove any whitespace characters preceding newline characters
25+
[*]
26+
trim_trailing_whitespace = true

‎.eslintrc.json

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es6": true,
5+
"node": true
6+
},
7+
"parserOptions": {
8+
"ecmaFeatures": {
9+
"experimentalObjectRestSpread":true
10+
}
11+
},
12+
"extends": "eslint:recommended",
13+
"rules": {
14+
"indent": [2, "tab"],
15+
"quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
16+
"semi": [2, "always"],
17+
"eqeqeq": 2,
18+
"strict": [2, "global"],
19+
20+
"no-console": 1,
21+
"array-callback-return": 1,
22+
"block-scoped-var": 1,
23+
"consistent-return": 1,
24+
"curly": [1, "multi-line", "consistent"],
25+
"no-empty-function": 1,
26+
"no-useless-return": 1,
27+
"vars-on-top": 1,
28+
"no-use-before-define": [1, "nofunc"],
29+
"global-require": 1,
30+
"camelcase": 1,
31+
"new-cap": 1,
32+
"no-lonely-if": 1,
33+
"no-multiple-empty-lines": [1, { "max": 5 }],
34+
"no-trailing-spaces": 1,
35+
36+
"no-restricted-properties": [1, {
37+
"property": "lenght",
38+
"message": "Use length instead of lenght (notice the position of the h)"
39+
}]
40+
41+
}
42+
}

‎.markdownlint.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"MD013": false,
3+
"MD014": false,
4+
"MD033": false
5+
}

‎README.md

+64-36
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,75 @@
1+
12
# Asteroids
2-
Ahoy! This is our all-new/all-old web starter kit. Use it well!
33

4-
<img src="asteroids-700.png" width="400">
4+
Ahoy! This kit is our all-new/all-old web starter kit. Use it well!
55

6+
<center>
7+
<img src="https://spacenomads.com/assets/img/projects/asteroids/asteroids-700.png" width="350">
8+
</center>
69

7-
Asteroids includes a SASS, jQuery and [PUG](https://github.com/pugjs/pug), a super cool template engine.
10+
Asteroids include SASS, jQuery and [PUG](https://github.com/pugjs/pug), a super cool template engine.
811

912
## Quickstart
10-
Install [Node.js](https://nodejs.org/) and [Gulp](https://gulpjs.com) to run this starter kit.
11-
1. Download or clone the repository (You can download it with Bower: `$ bower install asteroids-kit`)
12-
2. Install the local dependencies with `$ npm install`
13-
3. Run the kit with `$ gulp go`
1413

15-
## Gulp tasks
16-
### Launch a webserver for development
17-
```
18-
$ gulp go
14+
Install [Node.js](https://nodejs.org/) and [Gulp4](https://gulpjs.com) to run this starter kit.
15+
16+
1. Download or clone the repository
17+
2. Install the local dependencies with `$ npm i`
18+
3. Run the kit with `$ npm start`
19+
20+
## Tasks
21+
22+
### Launch a web server for development
23+
24+
```shell
25+
$ npm start
1926
```
20-
Launch a webserver with browserSync to work on your proyect. Several watchers will have their eyes on your PUG/SCSS/JS files to reload your connected browsers when needed.
27+
28+
Launch a web server with browserSync to work on your project. Several watchers will have their eyes on your PUG/SCSS/JS files to reload your connected browsers when needed.
2129

2230
### Process a production-ready distribution
23-
```
31+
32+
```shell
2433
$ gulp deploy
2534
```
35+
2636
Delete and reprocess the public folder with optimized versions of your HTML/CSS/JS files.
2737

2838
### Compress a production-ready distribution
29-
```
39+
40+
```shell
3041
$ gulp zipit
3142
```
3243
Delete and reprocess the public folder with optimized versions of your HTML/CSS/JS files and compress it in a .zip file.
3344

45+
You can customize the name of the ZIP document editing the config.json file ;)
46+
47+
Optionally you can add a keyword to this ZIP file:
48+
49+
```shell
50+
$ gulp zipit -b keyword
51+
```
52+
It will generate an ignored `DDMMYY-keyword-project-name.zip` file
53+
54+
55+
3456
## Folder structure
35-
Our **gulpfile.js** uses a configuraton JSON file to set source and destination files of the project.
57+
58+
Our **gulpfile.js** uses a configuration JSON file to set source and destination files of the project.
3659
Check config.json out and edit what you need.
3760

38-
The folder structure looks like:
39-
```
61+
The project folder structure looks like this:
62+
63+
```txt
4064
/
4165
|- _source
4266
| |- assets
4367
| | |- icons
4468
| | |- img
45-
| | | `- layout
4669
| | `- js
47-
| | `- vendor
70+
| | `- vendor
4871
| |- js
72+
| | |- components
4973
| | `- plugins
5074
| |- scss
5175
| | |- components
@@ -59,39 +83,43 @@ The folder structure looks like:
5983
`- assets
6084
|- css
6185
|- img
62-
| `- layout
6386
`- js
64-
`- vendor
6587
```
6688

67-
6889
## CSS
69-
Asteroids does not include a CSS reset stylesheet anymore but we have included two awesome tools:
90+
91+
Asteroids do not include a CSS reset stylesheet anymore, but we have added two awesome tools:
92+
7093
* A **csscomb** JSON file to use with your code editor as your own risk :)
71-
* The risky [**gulp-combine-mq**](https://www.npmjs.com/package/gulp-combine-mq) package to group ans combine all your mediaqueries.
94+
* The risky [**gulp-combine-mq**](https://www.npmjs.com/package/gulp-combine-mq) package to group and combine all your media queries.
7295

7396
## JS
74-
**Asteorids** uses JQuery, Modernizr and two JS files, main.js and plugins.js, located before the `</body>` tag. The custom build of Modernizr is loaded in the `<head>` section of the page.
97+
98+
**Asteroids** use JQuery, Modernizr and two JS files, main.js, and plugins.js, located before the `</body>` tag. You can find the custom build of Modernizr in the `<head>` section of the page.
7599

76100
| Item | Version | URL |
77101
| ------ | ------- | --- |
78-
| JQuery | v3.2.1 | https://jquery.com
79-
| Modernizr | v3.5.0 | https://modernizr.com
80-
| Width_snitch | v1 | https://github.com/oneeyedman/Width-Snitch/
81-
| Breakpoints | v1.0 | https://github.com/xoxco/breakpoints
82-
| jQuery Cookie Plugin | v1.4.0 | https://github.com/carhartl/jquery-cookie
102+
| JQuery | v3.2.1 | [https://jquery.com](https://jquery.com)
103+
| Modernizr | v3.5.0 | [https://modernizr.com](https://modernizr.com)
104+
| Width_snitch | v1 | [https://github.com/oneeyedman/Width-Snitch/](https://github.com/oneeyedman/Width-Snitch/)
105+
| Breakpoints | v1.0 | [https://github.com/xoxco/breakpoints](https://github.com/xoxco/breakpoints)
106+
| jQuery Cookie Plugin | v1.4.0 | [https://github.com/carhartl/jquery-cookie](https://github.com/carhartl/jquery-cookie)
83107

84108
## Browser Support
109+
85110
That's up to you ;)
86111

87112
## TODO
113+
88114
So, what is next?
89115

90-
- [ ] Mobile icons + PSD source file
91-
- [ ] Gulp task to generate a timestamped deploy folder
92-
- [ ] Fix PUG/HTML reload loop
93-
- [ ] Add CSS Linters
94-
- [ ] Add JS Linters
116+
* [X] Gulp task to generate a timestamped deploy folder
117+
* [X] Add CSS Linters
118+
* [X] Add JS Linters
119+
* [ ] Use EJS/Nunjucks instead of PUG
120+
* [ ] Mobile icons + PSD source file
121+
* [ ] ~~Fix PUG/HTML reload loop~~
95122

96123
## Request a feature
97-
Do you miss something? Feel free to request a feature or contribute to make it better ;)
124+
125+
Do you miss anything? Feel free to request a feature or contribute to making it better ;)

‎_source/js/_sn.cache.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
'use strict';
12
/**
23
* SN.Cache
34
* Cache common objects

‎_source/js/_sn.cookies.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
'use strict';
12
SN.cookies = {
23
gaID : null,
34
gaCode : null,

‎_source/js/_sn.externallinks.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
'use strict';
12
/**
23
* SN.ExternalLinks
34
* Add target="_blank" attribute to external links

‎_source/js/_sn.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
'use strict';
12
/**
23
* SN Object
34
*/

‎_source/js/_sn.snitch.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
'use strict';
12
/**
23
* SN.snitch
34
* Show browser real width, FYI.

‎_source/js/components/accordion/_sn.accordion.js

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
'use strict';
2+
/**
3+
* SN.collapsible
4+
* Manages Collapsible groups and accordion sections
5+
*
6+
*/
7+
8+
SN.collapsible = {
9+
visible: 'none',
10+
init: function(){
11+
var $collapsible = SN.cache.$body.find('.js__collapsible');
12+
var $collapsibleLabel = SN.cache.$body.find('.js__collapsible-label');
13+
14+
15+
/**
16+
* Unfold every collapsible item
17+
* @param {object} $obj Collapsible object
18+
*/
19+
var unfoldCollapsible = function($obj) {
20+
$obj.find('.js__collapsible-content').show().attr('aria-hidden', false).parent('.js__collapsible-item').addClass('js__collapsible-item--visible');
21+
};
22+
23+
24+
/**
25+
* Fold every collapsible item
26+
* @param {object} $obj Collapsible object
27+
*/
28+
var foldCollapsible = function($obj) {
29+
$obj.find('.js__collapsible-content').hide().attr('aria-hidden', true).parent('.js__collapsible-item').removeClass('js__collapsible-item--visible');
30+
};
31+
32+
33+
/**
34+
* Unfold one collapsible item
35+
* @param {object} $obj Collapsible object
36+
* @param {integer} item Item index
37+
*/
38+
var unfoldThis = function($obj, item) {
39+
$obj.find('.js__collapsible-item').eq( item ).children('.js__collapsible-content').slideDown('400').attr('aria-hidden', false).parent('.js__collapsible-item').addClass('js__collapsible-item--visible');
40+
};
41+
42+
var foldThis = function($obj, item) {
43+
$obj.find('.js__collapsible-item').eq( item ).children('.js__collapsible-content').slideUp('200').attr('aria-hidden', true).parent('.js__collapsible-item').removeClass('js__collapsible-item--visible');
44+
};
45+
46+
47+
48+
/**
49+
* Initialize collapsible object
50+
* @param {object} $el Collapsible object
51+
* @param {string} config Configuration string [all/none/number]
52+
*/
53+
var adjustCollapsibleOnLoad = function($el, config) {
54+
var visibleItem;
55+
if ( config === 'none') {
56+
foldCollapsible( $el );
57+
} else if ( config === 'all') {
58+
unfoldCollapsible( $el );
59+
} else {
60+
visibleItem = parseInt(config);
61+
foldCollapsible( $el );
62+
unfoldThis( $el, visibleItem );
63+
}
64+
};
65+
66+
67+
68+
69+
70+
71+
if ($collapsible.length) {
72+
73+
// > Each collapsible
74+
$collapsible.each(function(index, el) {
75+
var initialState = ($(this).attr('data-visible')) ? $(this).attr('data-visible') : SN.collapsible.visible;
76+
77+
$(this).find('.js__collapsible-item').each(function(index, el) {
78+
$(this).data('item', index);
79+
80+
$(this).children('.js__collapsible-label').text( $(this).children('.js__collapsible-label').text() + ' ' + index); //delete
81+
$(this).children('.js__collapsible-content').text( $(this).children('.js__collapsible-content').text() + ' ' + index); //delete
82+
});
83+
84+
adjustCollapsibleOnLoad( $(this), initialState);
85+
});
86+
87+
88+
// > Label click
89+
$collapsibleLabel.on('click', function(event) {
90+
event.preventDefault();
91+
var $block = $(this).parents('.js__collapsible');
92+
var prevItem;
93+
var item = $(this).parents('.js__collapsible-item').data('item');
94+
95+
if ( $(this).parents('.js__collapsible').hasClass('js__collapsible--accordion') ) {
96+
97+
// Is this an accordion block? YES
98+
if ( $(this).parents('.js__collapsible-item').hasClass('js__collapsible-item--visible') ) {
99+
// I am already open -> Close me
100+
foldThis( $block, item );
101+
} else {
102+
if ( $(this).parents('.js__collapsible').find('.js__collapsible-item--visible').length ) {
103+
// Another item is already open -> Close it and open me, Alice
104+
prevItem = $(this).parents('.js__collapsible').find('.js__collapsible-item--visible').data('item');
105+
foldThis( $block, prevItem );
106+
unfoldThis( $block, item );
107+
} else {
108+
// No item is open -> Open me
109+
unfoldThis( $block, item );
110+
}
111+
}
112+
} else {
113+
// Is this an accordion block? NOPE
114+
if ( $(this).parents('.js__collapsible-item').hasClass('js__collapsible-item--visible') ) {
115+
// I am already open -> Close me
116+
foldThis( $block, item );
117+
} else {
118+
// I am closed -> Open me
119+
unfoldThis( $block, item );
120+
}
121+
}
122+
123+
124+
125+
126+
});
127+
128+
}
129+
}
130+
};

0 commit comments

Comments
 (0)