fbrctr / fabricator Goto Github PK

Add the viewport resizer tool "ish". This would be extremely helpful in tweaking components.

Just a quick fix suggestion:

@import "components/button";

should be

@import "components/_button";

In this section: https://github.com/resource/fabricator/wiki/Quick-Start#4-add-style-sass

I realize that this is an issue with libsass in gulp-sass. You're at the mercy of them...

Granted, how to update side menu and its' categories may lead to abuse or misuse of Fabricator, I still think there should be instructions on it. It choked me up last night and I didn't figure it out until you showed me.

The main landing page needs better copy explaining the toolkit and methodology.

I've already added .md parsing to the collate task. If a markdown file is present it gets added as the notes value for an item. Currently, notes are just output the components.html and structures.html templates above the item content. e.g.:

<div class="f-item-notes">
    {{{notes}}}
</div>

We need to add the ability to toggle note visibility. Functionality should be the same as the code and details toggles found in fabricator.js.

There is already an icon for notes: .f-icon-notes.

(Thanks in advance for checking out my issue. I'm excited to use fabricator and hopefully can contribute back to the project. It's a great idea and implementation)

THE PROBLEM

When I create a new directory, snippet files, and a view (all named consistently) and update the menu partial, the builds do not generate the new items in f-controls or f-main. This is the case with both the dev and prod build processes.

REPRODUCING

1. Create new folder: src/toolkit/newthing
2. Create new view src/toolkit/views/newthing.html
3. Copy and paste contents of src/toolkit/views/components.html for example, into newthing.html making sure to update the each loop with the correct newthing value.
4. Populate src/toolkit/newthing/ directory with various snippet .html files so that there is something to actually loop through.
5. Update menu.html to include a list item with an href to newthing.html, as well as an {{#each newthing}}{{/each}} loop.
   RESULT: New f-menu__heading is shown, but no items in f-controls or f-main.

ERROR REPORTING

I don't see any errors in node or in any logs in the project folder.

Can you help me troubleshoot what's happening to prevent the loops from running in the menu creation and in the actual generation of f-item-groups? Perhaps I've missed something obvious?

Thanks again.

Folder names like scss and js couple the language to the code a little too closely and can cause a some confusion if the end-user wants to use less or coffeescript.

Instead, consider using styles and scripts.

BrowserSync could offer a more robust development environment.

http://www.browsersync.io/

Consider replace the connect task with BrowserSync, which supplies the same behavior plus additional features.

Separate out the things that user will mostly like NOT manipulate (assets) and move other things into a "toolkit" directory. (components/strucuters/toolkit/assets).

Right now, prototypes are pulled from the data.json file, then inserted into prototypes.html async.

This seems a little janky.

It also makes it difficult to deliver prototype files to an SI.

Consider a different way of compiling prototypes; perhaps compiling {prototype}.html files to dist/prototypes/*html.

I'm feeling daft again.

I see that the gulp file points the images task to src(config.src.images). In my file, the value of config.src.images was originally './src/toolkit/assets/img/**/*'.

I do have such a directory set up, but I am not getting the images to render.

Any hints on what I might be doing wrong here?

This is from following the instructions in the wiki, extracting files to a new directory and running the dev action. I'll try to dig further to see if I can find what specifically is causing it.

NOTE: This is using the release .zip file, not a git clone.

➔ npm run dev

> [email protected] dev /Users/dcoxespenlaub/work/commerce-toolkit
> npm install && gulp dev


module.js:340
    throw err;
          ^
Error: Cannot find module 'cache-file'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Users/dcoxespenlaub/work/commerce-toolkit/node_modules/gulp-imagemin/node_modules/image-min/imagemin.js:3:13)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

The gulpfile could use some house keeping.

Note that the examples listed below are from another project and need updated to match Fabricator's file structure.

• Switch to single quotes to align better to generally-accepted node.js style.
• Use spaces, not tabs. Same reasons as above.
• Use a config object like:

var config = {
    dev: true,
    src: {
        scripts: './app/assets/scripts/app.js',
        vendorScripts: [
            './app/assets/vendor/two/build/two.js',
            './app/assets/vendor/jquery/dist/jquery.js'
        ],
        images: './app/assets/images/**/*',
        html: './app/index.html'
    },
    dest: './public'
};

So you can have tasks that look like this:

gulp.task('html', function () {
    return gulp.src(config.src.html)
        .pipe(gulpif(config.dev, connect.reload()))
        .pipe(gulp.dest(config.dest));
});

• Make the default task the "prod" task. e.g.

// development environment
gulp.task('dev', ['build'], function () {
    gulp.start('watch');
});

// default build tasks
gulp.task('default', function () {
    config.dev = false;
    gulp.start('build');
});

https://github.com/gulpjs/plugins/issues/47

If the plugin is not removed from blacklist, this may require workaround. The referenced issue features some methods for working more closely to gulp standards.

Possibly a "wait and see" situation, but wanted to log this as a heads-up.

Add unit tests to ensure coverage for edge cases.

For instance the require.js toolkit compilation.

Consider mocha.

http://css-tricks.com/svg-sprites-use-better-icon-fonts/

Fix globbing to exclude bower_components

For instance, the notes for a button-primary.html could be in a button-primary.md.

ignore dot files (namely .DS_Store) when parsing the view subdirectories.

node.js docs indicate that fs.readdirSync should omit all '.' and '..' files from the array (http://nodejs.org/api/fs.html#fs_fs_readdirsync_path)

Currently, Fabricator comes with no styles or scripts - just basic HTML.

It may be helpful to also offer a boilerplate toolkit, something along the lines of PureCSS.

This boilerplate should include:

• basic styling for the initial set of components/structures.
• grid
• bower setup
• normalize.css
• helper classes (oocss) use Emmet shortcut nomenclature

Consider hiding the menu by default on larger viewports. The heavy black can draw focus away from the main area.

It's not a tool that use over and over.

You clone it and modify for each project. More like a scaffold.

Using Cheerio strips all self closing tags in inline SVG elements during the collate stage.

Refer to cheeriojs/cheerio#521

I've been getting some feedback from clients and colleagues that "prototypes" is potentially confusing since the term is used liberally in web design to mean a few different things.

The "thing" that's labeled a prototype in Fabricator is meant to be a "prototype" in true sense of the term:

a first, typical or preliminary model of something, especially a machine, from which other forms are developed or copied.

However, since the term is analogous to other things in web development, it may help to rename the thing currently known as a "prototype"

A couple of options:

1. Templates
2. Assemblies
3. Collages
4. Pages
5. Views
6. Examples
7. Demos

I didn't delve to deep to see why, but I can get this behaviour consistently on computers (Ubuntu Trusty 64 and OSX 10.9.5) using node v0.10.32, (also tested with npm v2.0.2. and v1.4.28)

npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/Users/couto/.nvm/v0.10.32/bin/npm" "install"
npm ERR! node v0.10.32
npm ERR! npm  v2.0.2
npm ERR! path /Users/couto/.npm/f9748a33-adable-stream-1-0-32-package-tgz.lock
npm ERR! code EEXIST
npm ERR! errno 47

npm ERR! EEXIST, open '/Users/couto/.npm/f9748a33-adable-stream-1-0-32-package-tgz.lock'
File exists: /Users/couto/.npm/f9748a33-adable-stream-1-0-32-package-tgz.lock
Move it away, and try again.

npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/Users/couto/.nvm/v0.10.32/bin/npm" "run" "dev"
npm ERR! node v0.10.32
npm ERR! npm  v2.0.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `npm install && gulp dev`
npm ERR! Exit status 47
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is most likely a problem with the fabricator package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm install && gulp dev
npm ERR! You can get their info via:
npm ERR!     npm owner ls fabricator
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/couto/Development/[REDACTED]/[REDACTED]/npm-debug.log

and the npm-debug.log contents:

0 info it worked if it ends with ok
1 verbose cli [ 'node', '/Users/couto/.nvm/v0.10.32/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info predev [email protected]
6 info dev [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec dev script
9 verbose stack Error: [email protected] dev: `npm install && gulp dev`
9 verbose stack Exit status 47
9 verbose stack     at ChildProcess.<anonymous> (/Users/couto/.nvm/v0.10.32/lib/node_modules/npm/lib/utils/lifecycle.js:212:16)
9 verbose stack     at ChildProcess.emit (events.js:98:17)
9 verbose stack     at maybeClose (child_process.js:756:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (child_process.js:823:5)
10 verbose pkgid [email protected]
11 verbose cwd /Users/couto/Development/[REDACTED]/[REDACTED]
12 error Darwin 13.4.0
13 error argv "node" "/Users/couto/.nvm/v0.10.32/bin/npm" "run" "dev"
14 error node v0.10.32
15 error npm  v2.0.2
16 error code ELIFECYCLE
17 error [email protected] dev: `npm install && gulp dev`
17 error Exit status 47
18 error Failed at the [email protected] dev script.
18 error This is most likely a problem with the fabricator package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error     npm install && gulp dev
18 error You can get their info via:
18 error     npm owner ls fabricator
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

If you need more information, please feel free to ask.

edit: Redacted some names to avoid google searches

Is it possible for the path to be based on the value of config.src.dest in the gulpfile?
It's possible that you might want to change config.src.dest to something like:

config.src.dest = '.final/my-app'

In which case the template task will currently break.
It could instead take an options object from the gulpfile (similar to how collate task works).

Update these two files to match the changes made in #40

Add some image optimization to the gulpfile.

In some cases, I think it would be helpful to have the ability to change the text used in a specific component.

This would increase the reusability of components across more structures and templates, and would help to increase the level of fidelity of these higher-level elements.

Shouldn't it be 2014?

Since my list of components is very long, the quick jump to anchors is a bit jarring.

I am using this piece of code to make it a bit smoother.

// css-tricks.com/snippets/jquery/smooth-scrolling/

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    var $anchor = $(this);
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          $('.f-active').removeClass('f-active');
          $anchor.addClass('f-active');
          document.location = $anchor[0].hash;
        });
        return false;
      }
    }
  });
});

Obviously I am using jQuery on my Fabricator instance.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>

I would like Fabricator to automatically append a data attribute to the outermost element in a component and/or structure. Call the attribute something like data-fab (make the attribute a configurable option) and set the value to a short hash value representing the contents of the component or structure. ( Example of short hash id's: http://www.hashids.org/ )

For example, the HTML for a button...

<a href="#" class="button">Click Me</a>

... becomes ...

<a href="#" class="button" data-fab="9r7CESj">

When someone edits this button in the future. Fabricator can search a specified directory (or array of directories, globs, etc) for all occurrences of the old hash value and notify you of all the files and lines in the directory that need to be updated.

Optionally, if the current component is EXACTLY the same (configurable option for ignoring whitespace), it can just go ahead and swap out the old for the new safely.

So the steps would be:

• Detect change to a component.
• Search a folder for all instances of the hash
• Update if it can do so safely.
• In addition, generate some sort of report detailing all the files and line numbers where that hash was found. Make note of the spots that were automatically updated.

To keep fabricator in the world of git, I would recommend the following change:

In "Quick Start" change "Download" to "Get Started"
then add the following:

    cd *your-workspace*
    git clone https://github.com/resource/fabricator.git
    mv fabricator *your-project-name*
    cd *your-project-name*
    rm -rf .git
    git init
    git add --all
    git commit -m "Initial commit"
    git remote add origin *new-repository-location*
    git checkout -b *your-branch-name*
    git push -u origin *your-branch-name*

Improve the "dev" and "prod" scripts usage by relying on a more standard convention: the built-in "start" command and environment variables.

The app should be started using "npm start". If NODE_ENV is undefined or set to "development", then config.dev is true:

dev: (typeof process.env.NODE_ENV === 'undefined' || process.env.NODE_ENV === 'development'),

The package.json would look something like this:

"scripts": {
    "gulp": "gulp",
    "prestart": "npm install",
    "start": "gulp"
  },

Start a dev environment:

$ npm start

Build for release

$ NODE_ENV=production npm start

This is a more desirable setup because it uses built-in npm conventions and could make Fabricator fit better in a large ecosystem of node.js apps. At Resource, we are striving for an ecosystem where any node.js app can be run first time by only running the "start" command.

When you expand the code section "</>" it would be nice if there was a button to copy that code to the clipboard.

Would love to have a place to write JS or CoffeeScript that would not only compile to be tested, but appear as a tab on an element.

Some of my components have small JS snippets that accompany them and would be nice to be able to easily share them at the same time.

Need to add a check for localStorage support. Experience currently breaks in iOS "private" mode.

"Toolkit for creating toolkits" is not going to work.

Open thoughts.....

A way for designers and developers to work in tandem.

Plug and play front-end development.

Instead of using f-* classes for the "code" and "preview" hooks, use data-* hooks.

This allows developers to indicate any element as toggleable.

It's helpful to see the compiled markup of a prototype.

Add a code preview block similar to what's currently implemented on components and structures.

• Explain difference between components/structures.
• Explain what prototype means.
• Explain auto documentation (what do you mean).

The watch task does not register new items added to the glob pattern.

The data.json in src is compiled. Tracking the file only add unnecessary commit litter.

Can there be Semantic Versioning for Fabricator?