https://github.com/doctyper/gulp-modernizr

Nice to have feature, customize Modernizr from gulp.

What is the problem?

I cannot easily view the bootstrap source files / search for a certain line of code that is responsible for a certain output.

Why do we want this?

Because you sometimes want to see the line of code that is responsible for a certain result, even if it comes from bootstrap or foundation core.

What is the issue?

.node_modules is ignored in my editor – it is probably also ignored in many other people’s editors because a search or file switch within a project would be slower and return more irrelevant results.

Proposed solution

We can:

• Create a new directory /vendor and add a .gitignore file in it.
• Create a gulp task to copy the toolkit we load via npm from .node_modules to this folder.
• Adjust the paths in the scss files.

Serve custom 404 document that lists the index of files.

The styleguide/pattern nav doesn't look so great (left side of screenshot, the nav).

What I entered was a structure like this:

.
├── avatar-checked.jade
├── icons.jade
├── table
│   └── table.jade
├── tags
│   ├── tags-remove.jade
│   ├── tags-simple.jade
│   ├── tags-subtle.jade
│   └── tags.jade
├── test.jade
├── testinclude.jade
├── textarea-monospace.jade
├── textarea.jade
├── tooltip-small.jade
├── tooltip.jade
└── ul.jade

I feel that the tree that is rendered in the styleguide should reflect the tree in the file system, but with pretty names.

Use .b- as a prefix for Bedrock CSS components.

• color swatches
• samples (possibly should be renamed component-example for clarity)
• prototype nav

See https://github.com/mono-company/monoboot2/issues/4

When the prototype nav is open, all content should be visible.

At the moment, the prototype nav is an absolutely positioned div. It covers the content beneath it when open.

In Monoboot 1 there was a class that added a padding-left of the width of the prototype nav to the body, to kind of "push it away". Let's replicate this behavior again so we don't hide parts of the UI when the prototype nav is open.

This is hardcoded now:

colorsDefinition: path.join(contentPath, 'scss/settings/_colors.scss'),

But maybe should be a setting, because we shouldn't determine how authors want to structure their CSS folders.

http://cl.ly/image/1I3d2Q3e2h2J/Screen%20Shot%202015-11-19%20at%2015.35.35.png

There is a "-" too much at the front of the id e.g. -bc-scrollable-container-bc-scrollable-container-3

Right now the compiled HTML files (that are used to upload the prototype to a server or something) end up in the dist/ folder. This means that Express will pick these up as static assets, and serve those files instead of our Jade templates.

Since the express-static middleware doesn't provide a way to blacklist certain files, we should either tinker with a custom-written middleware that solves this issue, or (the fastest solution) generate a standalone build in a separate directory (which will pretty much copy the dist/ folder and add the compiled HTML there).

See https://github.com/mono-company/monoboot2/issues/21 .

Where does fixtures.js or the part to store data live in the current logic?

Added these icons: http://cl.ly/3H2w1C1z3Q1m/expanded.svg and this http://cl.ly/250C0a0i2U1H/collapsed.svg

Doesn't work, they don't show and I can't figure out why.

I thought about this some more.

We have to define what is what:

• An SCSS framework is a collection of stylesheets, javascript files, and possibly an icon font
• An HTML component is an HTML pattern that works together with an SCSS framework (its correct rendering depends on the SCSS and dependencies e.g. images)

External SCSS frameworks are already npm modules e.g. bootstrap-sass, foundation. We should leverage that.

The paths to SCSS, images, icon fonts of these external module could be specified in a config file that makes the "link" between Bedrock and the "content template".

This way you can "install" an SCSS framework in a project.

We could hardcode this for bootstrap, foundation and our empty starter project to begin with. So the installer asks:

* Which SCSS framework do you want to use?
   * 1. Bootstrap
   * 2. Foundation
   * 3. Monoboot
   * 4. None

Then I would have another script to install "HTML component" examples. This basically pulls in jade files + images from an external repo. This is the "content" that lives in the styleguide.

* Which content examples do you want to install?
   * 1. Bootstrap
   * 2. Foundation
   * 3. Monoboot
   * 4. None

We could maintain collections of HTML components in codebases that run Monoboot but where the only files that are versioned are those in /content/examples . So we could for example make sets of examples based on Bootstrap, and then sets of examples based on Monoboot (Monoboot in this case being my modifications to Bootstrap).

http://cl.ly/image/1o3t271k0j2t/Screen%20Shot%202015-11-19%20at%2016.02.15.png

There should be some way to keep the main CSS file clean from project-specific prototype CSS additions (e.g. classes to adjust the styleguide), while still keeping core upgradeable.

A better solution would be to separately link to the compiled content prototype.scss in the Jade template to completely decouple it from the main SCSS (since that is what's supposed to be delivered as output). This way you'd have to reference three SCSS files in your Jade template: something like bedrock-prototype.css, prototype.css and main.css.

This issue will list what needs to be documented.

• How to use icon font
• How to use SVG icons
• How to use sample JSON data
• Examples of Jade vs. HTML, links to jade documentation
• Example of displaying state in a prototype
• Using the global navigation
• Starter templates (Bedrock Bootstrap starter templates)

See https://github.com/mono-company/monoboot2/issues/16

See https://github.com/mono-company/monoboot2/issues/19 .

If you try to reference an image in a pattern, it doesn't work.

Steps to reproduce:

1. Add an avatar.svg image in /content/images/

2. Add a test.jade in /patterns/ with contents:

   include /images/avatar.svg

You will get an error:

 ENOENT: no such file or directory, open 'content/images/avatar.svg'

See https://github.com/mono-company/monoboot2/issues/13 .

The prototype nav is broken if I try to use it from the latest commit 1842fc2 .

Try to click the links in the prototype nav. They don't work. The styleguide link refers to http://styleguide.html/.

Also, the labels are wrong: instead of listing the page name "Index", it lists "/index".

Maybe this has something to do with a global setting with relative paths that has been activated for #14 ?

I am leaving my weird errors I get in this thread until I know how to reproduce them.

1. [17:27:15] Error: ENOENT: no such file or directory, chmod '/Users/johanronsse/Sites/gearjot-bedrock/dist/styleguide.html'
   at Error (native)

In the base template, there is a file called index.js that contains:

require('../../core/js/index');

I imagine some people who will use Monoboot might be unfamiliar with require and/or browserify.

I guess this is needed to load all the prototype JS, right?

Have to maybe put some e.preventDefault()'s somewhere to negate this.

video: http://cl.ly/0G3X1c1L2G1o/ScreenFlow.mp4

Gear detail

• On a piece of gear, add an index of the oil samples taken (list) -- by component
  • Engine, Transmission, Converter
  • Every 500 hours you get samples: so dates are for example X weeks apart
  • Severity level might be on of the columns

Service issue

• Service issue from fault code
  • Ask David for example

Service issue from form

• Visual - Change to soft red --> http://cl.ly/image/3k383M1e2927/Screen%20Shot%202015-12-04%20at%2016.22.54.png

Admin > Gear import

• Allow the user to download an example CSV --> to edit

Feed

• For every feed, link a username to /modules/users/detail.html

CSV: unit number, type, manufacturer, model, hours, mileage

User

• http://localhost:3000/modules/users/edit.html
• Add the third role in the modal http://cl.ly/image/2b3a2a110r1z/Screen%20Shot%202015-12-04%20at%2016.15.40.png
• Remove the delete icon, put the deletion inside the modal, also add functionality to disable an account
• Add a column with subtle text next to "Role" that has different Statusses for an account: Active, Pending, Disabled

General navigation

• Make the group list have a big bigger targets http://cl.ly/image/0I0B0P1q2B2d/Screen%20Shot%202015-12-04%20at%2016.02.23.png

Gear overview

• Gear - Full map view should be implemented
• Gear list: vary the color on the 4th level --> last one is the one you an click,
• add expand all button

Dashboard

Name column on dashboard doesn't need to be there (tasks widget)

• Add group page
• Capitalize "My Groups" and check across the platform for capitalization

Tasks overview

• Assignee should be a column
• This icon is really light: http://cl.ly/image/2D103V0c3I3w/Screen%20Shot%202015-12-04%20at%2015.43.05.png it should be darker
• 2 ways of working:
  • 1 is me-centric: tasks assigned to me, tasks I've created, tasks I'm mentioned in
  • Other is "other person centric":
    • Current list of people (checkboxes) should be a dropdown
• Think the filter logic through on tasks, because now it's bad

Group overview

http://localhost:3000/modules/groups/dashboard.html

modules/groups/dashboard.html --> gear widget: add expand all button

Discussions

http://localhost:3000/modules/groups/discussions.html

Notifications

Notifications: Have # in front of number http://cl.ly/image/2s1Q1n442E2a/Screen%20Shot%202015-12-04%20at%2016.10.02.png

Add example:

• Assigned a task
• Shared a discussion with you
• Add some context: "in group" "in company"

Add discussion

http://localhost:3000/modules/discussions/add

• Add discussion should be a modal
• Looks too bare, needs "Add" button to add the discussion, also a cancel button
• You need to select who to notify

Discussion view

• Add an example of a third party coming in to comment on a discussion

If you click icons in the styleguide navigation, you don't end up on the icons list.

The .editorconfig file is missing.

As noted in #30, it seems that the build system is throwing a bunch of ENOENT errors when compiling Jade while a previous Jade compilation is still running. The solution to this would have two aspects:

• Try and fix the Jade live reload issue, alleviating the need to remove the files before recompiling them
• Making the Jade template step faster in general

Basically, npm start is not something you can do yo run the prototype. Is the idea to make that work as a task? Or should we just update the README.md to say "run gulp"?

If I remove a color from the color list and go to the styleguide, there is no change, even if I manually reload.

There is no syntax highlighting for Jade. Should we have this?

http://cl.ly/image/2z21372Z220D/Screen%20Shot%202015-11-13%20at%2017.16.03.png

To be checked.

The styleguide is too slow. I think we can fix it by dividing into separate pages. We need division anyway for a clearer separation of the different parts.

Speeding up the generation is also a possible solution.

The side menu should have the following features:

• collapse and expand the items
• remembers its own state (Like in Monoboot).

The reason I need this is because the menu gets too wieldy when you have a large prototype (e.g. Gearjot). I want to keep the side menu open and check every page. Now that interaction kind of sucks compared to Monoboot2.

This actually counts for both the component styleguide and the pages.

There is a prototype.scss in core and one in content, but I only see one being referenced.

http://cl.ly/image/0D202p3u2J01/Screen%20Shot%202015-12-01%20at%2014.16.09.png

See designs for more elegant version.

e.g. the URL is http://0.0.0.0:3000/styleguide.html#b-buttons/button-primary , the page should stay there upon reload (default browser behavior to go to anchor).

I think because there is a / in the hash.

We talked about this briefly in Slack - the mix of using double and single quotes in our Jade templates right now is pretty awful. We don't have to limit ourselves to just Jade linting, though:

• Jade: https://github.com/emartech/gulp-jade-lint
• JS: http://eslint.org/
• SCSS: https://github.com/brigade/scss-lint

Bedrock needs a logo. Let's sketch a bit and get to something basic :)

Ping @xavez .

This happens when the side menu gets too long, should be fixed.