fbrctr / fabricator Goto Github PK
View Code? Open in Web Editor NEWA tool for building website UI toolkits and style guides
Home Page: http://fbrctr.github.io/
License: MIT License
A tool for building website UI toolkits and style guides
Home Page: http://fbrctr.github.io/
License: MIT License
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)
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.
src/toolkit/newthing
src/toolkit/views/newthing.html
src/toolkit/views/components.html
for example, into newthing.html
making sure to update the each loop with the correct newthing
value.src/toolkit/newthing/
directory with various snippet .html files so that there is something to actually loop through.menu.html
to include a list item with an href to newthing.html
, as well as an {{#each newthing}}{{/each}}
loop.f-menu__heading
is shown, but no items in f-controls
or f-main
.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.
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.
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));
});
// 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.
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:
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:
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:
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.