novicell / novicell-frontend Goto Github PK

When using flexbox in the stylesheet, it is not getting the correct prefixing. This should be handled by "autoprefix" but it's not...

Make it possible to make multiple SVG sprites, as bundles, eg. for use in CMS backends.
I guess all that needs to be done, is renaming the sprite outputname to the name of the bundle. Find a renaming module and do something like:

.pipe(...)
.pipe(rename(b.name + '.svg'))
.pipe(gulp.dest(config.iconsDist));

icons.json is not being generated, after variables is made in the config file. Something is wrong with it. I can cosole.log the object of the icons and the path, but it doesn't work.

Please fix!

Insert a google static maps, and then embed a "real" google map when clicking on the image from static maps.
Remember to update the docs.

For use for HTML task.
We can use the node module gulp-ftp
https://www.npmjs.com/package/gulp-ftp

Does not take the parent width, is data-parent is set and it doesn't take the full height of the parent.

var novicell = novicell || {};

This is cool, and make sense to me, but after this, we declare the new var like this:

example:

novicell.lazyload = novicell.lazyload || function () {}();

I think is better, and make more sense to me declare the var like this:

novicell.lazyload = function () {}();

The other way, for me, is a little bit "antipattern" and it does not make sense because this declaration is for avoiding "override" when you create a function in javascript, but this way to code must be used for the users that use the package, not by the package, maybe with a little part of code you can understand me:

var novicell = novicell || {};
novicell.package = novicell.package || function() {

    function foo() {
        return "bar";
    }

    return {
        foo: foo
    };
}();

novicell.package = function() {};
console.log(novicell.package.foo());

You can test it on: https://jsfiddle.net/odp1do49/1/

If the user using the package create a function with the same name this will override the function even if it's written this way: novicell.package = novicell.package || function() {}();, and that's because for me not make sense write the function in this way on the package.

Regards :)

the following warnings are issued when executing npm install on a "blank" machine:

npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN prefer global [email protected] should be installed with -g
npm WARN prefer global [email protected] should be installed with -g
npm WARN prefer global [email protected] should be installed with -g
npm WARN prefer global [email protected] should be installed with -g

The dependency-tree for graceful-fs is:

+-- [email protected]
| -- [email protected]
| +-- [email protected]
| | -- [email protected]
| | -- [email protected]
| | -- [email protected]
| | -- [email protected]
| -- [email protected]
+-- [email protected]
| -- [email protected]
-- [email protected]
-- [email protected]

Had a chat with @KimDolleris about adding specific gutters on different breakpoints. Say on a tablet we want a gutter on 30px, but on desktop we want it to be 40px.

mixins.grid.less:22

// Generate the extra small columns
.make-xs--column(@columns) {
    position: relative;
    float: left;
    width: percentage((@columns / @grid-columns));
    min-height: 1px;
    padding-left:  (@gutter / 2);
    padding-right: (@gutter / 2);
}

Looking at the above code, I guess we could add various variables for the gutter, so, maybe something like @xs-gutter, and so on for each breakpoint. By default they should all reference the main @gutter, but this does give each project the possibility of adding different gutters.

Thoughts? Let's discuss!

Make standard async font loading pattern, as novicell.font.js or whatever.

Hi,

I think nowadays bower is kind of obsolete as you can find all your frontend packages on npm.
So I propose we get rid of bower. The advantage is one tool less which means less config.

What do you think?

Cheers,
Cristhian.

Was this meant to happen:
117f45f

It breaks the gulp styles task.

This package is the default foundation for Novicell Projects.
In Novicell we always use LESScss, and I see no reason why this package should support SASS / SCSS when we do not use it.

Please update due to this commit: 153ade1

Remove the task it self, and make the styles task seperate each file in the bundle. Get the name of the minified file from the original file, like the themes task does, right now.

Look into flexboxgrid.com and make new cool grid using flexbox and all it's goodness 💪

I don't know if I miss something but sometimes I have problems with the height on the images with this plugin, the problem was that there is not a way to force the height of the image and crop it. To solve this I modified the plugin to be able to do this, If you interested in this change I can do a pull request.

Every time npm is installed through visual studio , when we run gulp through git bash afterwards it requires to rebuild node-sass

We have a problem with icons that have inline "fill", can't have their "fill" overritten by CSS.
Therefore we need to remove the inline "fill"-attribute on all svg's before adding them to the sprite.

The problem is similar to this: svg-sprite/svg-sprite#121

Please fix :)

Looking at https://github.com/Novicell/novicell-frontend/blob/master/scripts/components/novicell.lazyload.js and https://github.com/Novicell/novicell-frontend/blob/master/scripts/components/novicell.lazyloadResponsive.js, there are some similarities.

Perhaps we should look into merging them, and maybe remove the lazyload image function, that doesn't take responsiveness into account?

Add typescript compiler to setup

Let's debate!

https://www.youtube.com/watch?v=SsoOG6ZeyUI

👾

Split all js plugins into separate repos to make easier maintenance and separation of concerns. This is also for not bloating this repository with files not necessarily being used on all projects.

We can then load the the scripts through NPM and extend them via the new syntax mentioned #111.
Make sure the change the scripts to the new syntax, when moving into seperate repos.

Update jquery and svg4everybody to the latest versions

See this article for inspiration on how to default icons like the contextual fonts:
https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4#.a4v2kwhrn

Look at srcset, and figure out if it could replace the focalpoint image, and make a remarkable simpler js method to lazyload images.
At the time of writing this, IE11 is the only broser which is not supporting the srcset, but maybe this could be fixed with a polyfill. IE11 is at 9.4% market share in Denmark.

http://caniuse.com/#search=srcset

Would be great if Gulp could throw an error, if there is a reference to a file, that doesn't exist. This would make it far easier to debug typos in filename inside Gulp bundles.

Example:

 {
                name: "master",
                scripts: [
                    ...
                    projectPath + "scripts/components/nobicell.cookieinfo.js",
                    ...

Error: something something, nobicell is not defined.

Themes is not being generated on watch.

Remove typescript task from the project, as we haven't yet used it, and are probably never going to.
@Novicell/team-contributers @marklonquist

Remove it in the master.js-file.

Let's consider adding a .editorconfig to the default package. Look at the docs we agreed on here: novicell.github.io/frontenddocs/

There's a chapter about it at the bottom.

Look also at http://editorconfig.org/ if in doubt.

Made a pull request to fix this: #80

Look for redundancies in the package.json, specifically jshint.

We have a collection of vendor-prefix-mixins, but we also have autoprefixer, which does the trick aswell.
Maybe we should remove the mixins.

Skal vi ikke lave vores "bootstrap"-grid om til at køre med flex-box!?

While creating a grid based off on the grid in novicell-frontend, I found out that about 50% of the source code isn't even used.

Perhaps we should look into cleaning it, while we're also looking at using the flexbox grid in #40 ?

Consider switching build setup from Gulp to Webpack (4).
Does anyone have experience with Webpack?

https://blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783#.qkfrveivf

Might be able to save some space by adding gulp-clean-css after cssnano in our styles task.

When you clone a clean install of the frontend package, you get the following error when running gulp. I'm guessing we need to make sure, it doesn't depend on the icons folder in the dist folder?

{ Error: ENOENT: no such file or directory, mkdir './dist/icons/'
    at Error (native)
    at Object.fs.mkdirSync (fs.js:922:18)
    at writeFile (/Users/larshesselberg/Arbejde/Beneath/Kunder/Kilroy/00000 KILROY - Brand Portal 2016-2018/Benns Frontend/gulp/tasks/icons.js:20:16)
    at genereateIconJsonLibrary (/Users/larshesselberg/Arbejde/Beneath/Kunder/Kilroy/00000 KILROY - Brand Portal 2016-2018/Benns Frontend/gulp/tasks/icons.js:66:9)
    at FSReqWrap.oncomplete (fs.js:123:15)
  errno: -2,
  code: 'ENOENT',
  syscall: 'mkdir',
  path: './dist/icons/' }

Currently the focalpoint is just an option for Umbraco. Because of this, I don't think it should be a part of the Novicell frontend, as it isn't cross platform friendly.

Discuss!

When exporting SVG's from Sketch, we get a lot of bloat including inline fill and stroke attributes on the elements. This prevents us from overriding through CSS.

We need to get GULP to remove the inline elements per bundle, so that you can have a bundle of eg. flags that always should keep their fill and stroke.

Maybe this gulp plugin can help:
https://www.npmjs.com/package/remove-svg-properties

Example of a Sketch exported SVG icon:
arrow.zip

Divide the frontend framework (scripts and less) from the gulp build setup.
These two things does not directly depend on each other, and should be in separate repos, for easier maintenance.
If we do this, it could be possible to update the gulp build setup separately from the project files like, less components and so on.

Hola,

We can add a .npmignore file to the repo that makes sure we don't add example files such as https://github.com/Novicell/novicell-frontend/blob/master/images/map-pin.png.

So, when you are working on the package, you can get the files, but when someone uses the package for a new project, they won't get them.

Makes sense? We can discuss it further in person.

This needs a good cleanup, including variables, variable names and so on.

Remember to make great documentation, and examples (in the examples folder).

Make the examples work, when just copying the files from the examples folder into the root folder.

Add less hint to keep code consistency through out less files. Also makes sense as we are linting our JS files.
https://github.com/lesshint/lesshint

http://gulpjs.org/recipes/only-pass-through-changed-files.html

to help speedup gulp'ing, we could ignore the files that haven't been changed.