Question about design guide redesign (oct 2016)

[duboisp]

Hi,

I notified the style guide has been fully redesigned recently.

Should the main design guide page be named "Design Guide" instead of "Style guide"? As the page titled "Style guide" is the home page.

Is the "Content formating" was simply a cheatsheet of The Canadian Style? Why to link to an intermediary useless page where the user can only follow a link to the Canada.ca Style Guide?

Is there a reason that explain that wet plugin and wet theme are mixed with bootstrap/wet style? Could we keep those group separated for now until they are categorized and filterable?

I have the impression that some plugin are missing, like in WET-BOEW main project the plugin "wb-tables" is named "Tables" but in the revised design guide it is named "Data table".

It is possible to enhance the grid-table of the main page design guide with the data table filtering (.wb-tables-filter) as demonstrated in the third working example in the wb-tables working example. (The one with the dropdown)

👍 I like the grid effect created from a table, it's sad that feature is not documented yet.

Cheers

[cfarquharson]

@duboisp I have cleaned up the pages now and the mainpage is now the default content page. I have put a redirect on the 'Design guide' page back to the main page.

"Content formatting' is also a direct back to the main page. The mainpage is the listing of CSS and JS solutions. The reason I have mixed plug-ins with CSS as it's confusing to have to know to search two different repositories. So the style guide is a single spot for solutions, whether they are CSS or JS, and then if they are CSS, it takes to to that content within the guide. If they are JS solutions, it links over to the existing 'working examples' pages. There is no ROT, just a more fullsome listing...otherwise, it's an arbitrary line in the sand that most developers and webmasters wouldn't know to make.

Additional CSS has been added to improve the gridify solution. This isn't a supported WET4 solution and I can remove it once a filtering feature is baked into WET4...it's just a good temp solution for now.

Make sense? C

[duboisp]

Thanks @cfarquharson cleaned up the pages.

I understand that mixing plug-ins with CSS could make it easier for a one stop shop from an editor point of view, but the reality is the editor use both web site. Style guide for CSS related stuff and the main WET web site for plugin documentation/example. Also, I worry about what would happen if WET get a new plugin added? I worry now because I am almost done with the development of two new WET plugins. I suggest for the future to consider a solution where the main WET website would expose a JSON file that will contain plugin information and quick working example. Where that JSON data will be added to the style guide big data table.

I remarked that the following Style are now missing:

• Pills
• Jumbotron
• Progress bar and meter

Also I notified the following addition:

• Text editing effects
• Variables so I added a label "new" beside them

See my pull request #314 with the table filtering feature. It may address issue that people have with understanding this new design, as reported in #312. FYI - It use the recent data table filterable feature that was added to tables plugin in WET.

I still do not think the main style guide page should include a direct link to the Canada.ca Style Guide. Although it will be fair if it is cited as a reference inside the sub-section of the "Content creation principles".

Regarding the gridify solution, if you do not consider ready for WET 4, I suggest to do an more extensive browser testing and see where it break the content. If it not break, then keep it. And if it break try to implement a work-around that make the content in a way that is presentable to the user. Otherwise, I suggest to not use it because a lot of web editor may think it is safe to use it, as I thought before your answer.

Cheers

[cfarquharson]

@duboisp I didn't include jumbrotron because I don't think anyone uses it. Also, my understanding is that we aren't supposed to use the Bootstrap progress bar and instead use the HTML progress bar. I also though that pills are only part of Bootstrap's tabbed navigation and since WET4 has it's own, what is the value in pills without the JS (because otherwise they are just buttons and we already have button CSS)?

The Style guide has always provided a listing of the JS solutions. The CSS was on top and the table of 'working examples' was below. Maybe you never noticed but it was always there. To be honest, I would love to see the 'Working examples' page be the comprehensive page that lists the CSS and JS. For example, why is expand/hide on working examples but buttons aren't? Expand/hide is a native feature in modern browser that requires no JS, same as buttons...but because we support legacy browsers that need the polyfill, we have JS. This is a line-in-the-sand that is too random to expect normal users to WET4 to understand. Can we WebEx and you show me the coding in your proposed redesign?

[duboisp]

@cfarquharson My PR #314 do not modify what you did, instead it only add pre-defined filtering options through select case.

I knew they were a tables bellow with all the WET plugins, I am not necessary saying to remove the plugin, but I wanted to express the needs that we might needs to optimize how it is feeded and ensure we do not present outdated information. That is why I was suggesting/proposing to use a JSON file to pre-populate the table. In that way, a new build of WET will also update the plugins information in that tables.

Jumbotron: I personally know department that use it. I understand your perception, but action like undocumenting existing feature should be supported with evidence (like with extensive usage research and/or UX testing). I think the jumbotron should be put it back unless if you create a page that will explain how to migrate existing code to use to something else.

*progress bar": Ok it is fair to use the HTML instead of the bootstrap. It that case, the documentation should indicate that and explain how to migrate existing code to the right way to do it.

*pills": Ok I understand, so can we documents the solution to use instead. So editor that use that style will know how to migrate their existing code.

I will like to do webex, but I can only build WET on my workstation at home. If you want I can send you a link tomorrow of what my proposal will look like, but as I said, what I am proposing to not interfere with what you have done currently.

Cheers

:-)

[cfarquharson]

@duboisp If you could send me a link tomorrow, that would be great. I just want to see how it looks as the design is more complex given that there are the examples. I can work on the missing pages but it will be a couple weeks as we need to get it translated as well.

[duboisp]

Here the link: http://universallabs.org/wet/style-guide-PR314/index-en.html Once my PR merged, feel free to re-organise how the form input for the filtering are layout.

Thanks for taking the time to adding the missing one. What do you think of adding a little notification/alert in that regards on the style guide just before the data table?

[cfarquharson]

It's great! Are you able to do the same thing for me for the French page? I don't speak French so it will be a while before I can get someone to translate it. Do you mean adding an alert the up-and-coming documentation includes jumbotron, pills etc?

[duboisp]

@cfarquharson I will do the custom table filtering for French main page and I can restore the documentation we had for "jumbotron", "pills" and "progress bar and meter".

Yes I means an alert. May be we go simple by inserting an alert directly on the concerned documentations page saying we are working on translation and redesign them.

What do you think of this text in an alert-info immediately under the h1

We are currently working on redesigning the following content. Nous travaillons présentement à traduire ce contenu en français et à le reconcevoir.

[cfarquharson]

Works for me :)

[cfarquharson]

When you are doing the final changes to the datatables, are you able to remove the big .well from around the whole batch of tiles...it looks weird now.

[duboisp]

ok I will remove that .well at the same time

[duboisp]

@cfarquharson I updated my PR #314

[cfarquharson]

FYI the jumbotron, pills, progressbar/meter are now in French

[duboisp]

Thanks @cfarquharson