kamlekar / html-skinning-boilerplate Goto Github PK

This can be resolved by giving the path var CSS_PATH = 'site/assets/css/'; in gulp file where you missed / at the end. Please make sure that

Refer: https://www.andreaverlicchi.eu/lazyload/

In HTML.js file, the toggle should happen in a group just like when we mention name attribute for some radio buttons, they toggle within the group.

Hi, I think it will be useful to add new variable "path" to existing "css_path", "js_path", "img_path".
So we can easily set relativeness of our folders. Explanation: I have such project strucure:

project/
|  sass/
|  site/
|  templates-pre/
|  |  shop/
|  |  |  shop.html
|  index.html

In compiled site/shop/shop.html I have the same css/img/js paths as in site/index.html because css_path is unchangeable and set one time).

But if I have new path variable I set skeleton css/js/img paths that way:

<link href="{{path}}{{css_path}}main.css" />
<script src="{{path}}{{css_path}}scripts.js" />

And in templates-pre/shop/shop.html I set path variable to relative path:

{% set path="../" %}

So in site/shop/shop.html I have my relative paths:

<link href="../assets/css/main.css" />
<script src="../assets/js/scripts.js" />

That works fine for me.
Sorry I have no time to go deeper for github but I can only sketch my suggestions that way.

Ok, now we have this folders structure in templates-pre:
| templates-pre
|---sections
|---variables
|---index.html

So imagine we need to create folders in our site, for adding a shop for example so structure will be:
| templates-pre
|---sections
|---shop
| |---shop-index.html
|---variables
|---index.html

So it's better to rename templating folders with underscore prefix to distinct where is site and where are templating:
| templates-pre
|---_sections
|---_variables
|---shop
| |---shop-index.html
|---index.html

Ok? If ok, next problem will appear...

Should implement by giving options to let add to sections or whole page.

why?
Because, it is awesome.

Need to add travis for automated testing of the main branch for new pull requests. I don't know how to do this. Help is really appreciated.

Looks like this has issue with sass. Thinking to wait till then.

bholloway/resolve-url-loader#28

This library should be able to detect that the page is long and needs a "scroll to top" icon on bottom right.

• I Followed the steps to install gulp and gulp-nun-jucks-render etc..,
• Now run the command line as you instructed.
• I didn't found the html file in the site directory.

svg script not executing in Firefox (as its not getting the src path for sprite svg).

further read: Picture MDN

I think it will better to convert everything using postcss as it is the future.

Here is the tutorial link:
http://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889

Many dependencies are out dated.

<div class="html-click" data-html-class="btn" data-html-target=".className"></div>

As shown in the above example element, I am trying to write a small JS library.

Explanation:

• Whenever a element with "html-click" class is clicked, the value of attribute data-html-class is added a class name to the element whose class name or ID is mentioned as value in the attribute data-html-target.
• The click should work for dynamic elements also.
• The click should work as toggle functionality.
• Possible values for data-html-target are
  • .class name - adds the data-html-class value to all classes with the class name provided.
  • #ID - adds the data-html-class to the id.
• if data-html-target is not added, then data-html-class value gets added to the clicked element itself.

ESLint

• About ESLint
• ESLint Demo
• ESLint gulp

editorconfig

• About editorconfig

Currently, the "site" folder is for development. but there should also be "site-prod" folder which holds minimized js, css, html and svg code.

For some svg icons, the designers add svg inline stylings. These styles are not necessary for svg sprite.

Currently, this repo is poorly documented.

Need to add the html file names in existing config.json file.

Currently, user need to mention the folder name inside gulpfile.js. Instead of this, if gulp only reads the file name and uses in creating svg sprite, would be better.

SVG icons are invisible or messed up on IE11.

I am suspecting this might be because gulp-svgstore plugin, as it is changing the svg shape tags to common path tag.

Usage of gulp-nunjucks-render is optional. In that case, injecting svg content using nunjucks is making the boilerplate nunjucks dependent.

So, also include javascript way of injecting the svg content.

events.js:177
throw er; // Unhandled 'error' event
^

Error: ENOENT: no such file or directory, open 'c:\xampp\htdocs\site-name\dist\assets\images\pagenotfound.svg'
Emitted 'error' event at:
at ReadStream. (c:\xampp\htdocs\site-name\node_modules\jsdom\lib\jsdom\living\xhr-utils.js:181:16)
at ReadStream.emit (events.js:200:13)
at ReadStream.EventEmitter.emit (domain.js:471:20)
at c:\xampp\htdocs\site-name\node_modules\graceful-fs\graceful-fs.js:207:14
at c:\xampp\htdocs\site-name\node_modules\graceful-fs\graceful-fs.js:258:16
at FSReqCallback.oncomplete (fs.js:153:23) {
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path: 'c:\xampp\htdocs\site-name\dist\assets\images\pagenotfound.svg'
}

Keep a option to remove comments from generated css.