Wish list for Top Nav beyond Flare 11

[Nita Beck]

At the recent meeting of the Rochester Flare User Group, we got into an interesting discussion about our experiences so far with Top Nav. Some of us have used Flare 11's skins "out of the box," using them to change background colors; font family, color, and size; change the size of the search field; and so forth. But some of us have wanted to (or are being asked by our companies and clients to) do more. For example, I wanted to include a vertical scroll bar in the side menus, only to discover that the side menu skin doesn't give me access to the necessary CSS attributes. To add the scroll bar, I had to (what I call) "hack the CSS" in the way that our good pal fellow MadCap forums MVP Dave Lee has been teaching us all to do.

Have you hit any limitations in Flare 11's Top Nav skin and the component skins that you had to use a hack to overcome? I ask because someone at MadCap has specifically asked me this question, so I thought I'd ask the Flare community at large. (BTW, that "someone from MadCap" was actually the CEO of MadCap, who was a guest at our meeting. He was keenly interested in our discussion and personally asked me for my feedback on Top Nav.)

So what do you wish you could do with Top Nav via Flare's interface, instead of having to craft custom solutions?

And please don't make this a gripe session. See this as an opportunity to discuss how Flare can be improved. I have no problem with anyone voicing a gripe; just follow it up with a specific idea.

Cheers!

[NorthEast]

1) A skin component proxy that provides the same top menu available in the top nav skin.
The menu in the top nav skin cannot be added as a component proxy, so it means you can't choose where the menu appears. I currently 'hack' this by including the top nav skin, hiding everything apart from the menu, then using a script to move the menu position.

2) Ability to use the full Foundation Framework.
The top nav skin uses parts of the Foundation framework, and automatically includes in the output.
However, this makes it very tricky if you want to use the full framework (or just other components), as it clashes with the components that Flare has added automatically.

3) A skin component proxy that provides a 'dynamic' collapsible menu, similar to the tripane contents pane.
I've used the smartmenus plugin to modify the current menu proxy, so it appears as a menu or accordion.

4) Better support for 'responsive' design in topics.
It's currently difficult to co-ordinate the 'responsive' breakpoints you can set for the skin Tablet/Mobile mediums, with the content in your topics.
For example, you should have the responsive Tablet/Mobile mediums available in your topic stylesheet, so you can co-ordinate changes in your topic with the changes in the skin.
There is also no co-ordination with the Foundation grid system; i.e. that uses different breakpoints to the skin Tablet/Mobile.

[Nita Beck]

Thanks, Dave, for joining the conversation. I was hoping you would, and I second each of your suggestions.

It seems to me that we also need something more (and maybe this is what you're talking about in your item 4) to help us better understand the 12 columns of Foundation. Especially I think we need something to help us design our home pages. Could there be a "home page skin" or a "home page layout" that helps us to design the positioning of content on that page, without having to do into the code a say whether the horizontal arrangement of content is to lay out in a 4-column + 4-column + 4-column arrangement, or in a 7-column + 5-column arrangements? Is it me, or is this just really hard for some of us more verbal, less visual people to figure out? Suddenly we're given access to constructs that web designers use, so we have to climb another learning curve and become web designers on top of all the other roles we hold. So, another of my wishes is a "home page" designer of some kind. And as you say, help us more easily design it for desktop, tablet, and mobile.

[NorthEast]

It seems to me that we also need something more (and maybe this is what you're talking about in your item 4) to help us better understand the 12 columns of Foundation. Especially I think we need something to help us design our home pages. Could there be a "home page skin" or a "home page layout" that helps us to design the positioning of content on that page, without having to do into the code a say whether the horizontal arrangement of content is to lay out in a 4-column + 4-column + 4-column arrangement, or in a 7-column + 5-column arrangements? Is it me, or is this just really hard for some of us more verbal, less visual people to figure out? Suddenly we're given access to constructs that web designers use, so we have to climb another learning curve and become web designers on top of all the other roles we hold. So, another of my wishes is a "home page" designer of some kind. And as you say, help us more easily design it for desktop, tablet, and mobile.

As a bit of background, Flare automatically includes Foundation's Grid system when you use top nav.
How it works is documented here: http://foundation.zurb.com/docs/components/grid.html
It's not as hard as it probably looks - you basically just add a few divs and class names.
But as you say, it's not very inviting because you can't set this up visually in WYSIWYG mode, you have to add the HTML manually in the text editor and type in class names (since the CSS isn't there in the source).
It's also not adequately document in Flare - it doesn't really say which components of Foundation it's using, so although you can look at the Foundation docs, you're not quite sure what you can or can't use.

My point (4) was that you cannot easily implement responsive design into your topic content.
You can set skin styles for Tablet/Mobile mediums, and set the 'responsive' breakpoints (screen sizes) in the target - but that's only for the skin.
If you want 'responsive' content in your topic, you have to work out how to it manually.
For example, it'd be nice if there were Tablet/Mobile mediums in your the stylesheet, like you have for the skin, so you can co-ordinate the topic with the skin elements.

Regarding the foundation Grid, it's especially tricky to try and modify its breakpoints (which are different to what you set in the target), since its CSS is not editable because it's added by Flare at build time.

[Nita Beck]

Two more of my wishes:

1) Support for the Previous (topic) and Next (topic) buttons. My clients are bummed that these are not in their Top Nav UIs.

2) Support for runtime-merged projects. A member of my user group was sorely disappointed recently. She had spent time creating a brand new Top Nav system as a proof of concept and her client loved it. Her next step was going to be to migrate their existing documentation from tripane to Top Nav. Knowing that that existing documentation was a runtime-merged system (I knew this because this gal had given us a great presentation on it to our user group a few years back), I said, "Well, not so fast. Top Nav doesn't support that." Now she was going to have to roll back her client's expectation for the time being, with hopes that Top Nav would eventually catch up.

[chrisj]

My point (4) was that you cannot easily implement responsive design into your topic content.
You can set skin styles for Tablet/Mobile mediums, and set the 'responsive' breakpoints (screen sizes) in the target - but that's only for the skin.
If you want 'responsive' content in your topic, you have to work out how to it manually.
For example, it'd be nice if there were Tablet/Mobile mediums in your the stylesheet, like you have for the skin, so you can co-ordinate the topic with the skin elements.

Regarding the foundation Grid, it's especially tricky to try and modify its breakpoints (which are different to what you set in the target), since its CSS is not editable because it's added by Flare at build time.

I second this. Better support for responsive design would be great. Adding the ability to set break points for mediums using the interface seems like some really low hanging fruit, because you can just set this in CSS and the medium will then show up in the interface. Essentially you can edit break point mediums in the interface, but you can't create them with it.

[ToddPh]

I would like to have full support for all of Foundation's features.

I have experimented with things like the Magellan navigation bar (works), but some of the features (specifics escape me at the moment) will not work. I did find that I could get most of them to work if I used the JQuery version included with Foundation, BUT doing that breaks Flare's search functionality. So far, I have really enjoyed working with the HTML5 TopNav, but I do find myself tweaking the code and the CSS a lot to achieve my goals.

[NorthEast]

I would like to have full support for all of Foundation's features.

I have experimented with things like the Magellan navigation bar (works), but some of the features (specifics escape me at the moment) will not work. I did find that I could get most of them to work if I used the JQuery version included with Foundation, BUT doing that breaks Flare's search functionality. So far, I have really enjoyed working with the HTML5 TopNav, but I do find myself tweaking the code and the CSS a lot to achieve my goals.

I tried including the full Foundation framework a while back, although I didn't test it thoroughly - only to look at the top bar navigation.

I do remember that the full Foundation CSS clashed a bit with MadCap's variant of the Foundation CSS; but if I didn't use top nav, i.e. set the skin to (none), this wasn't a problem.

As for JQuery, it should in theory be possible to include two versions of jQuery, then use RequireJS (which the output already includes) to specify the version to use for Foundation (and its plugins).

[ToddPh]

Thanks Dave, I'll investigate that and see where it leads me.

On another front, I just got the email from Zurb that Foundation 6 has released. The feature list make it sound like it be a good inclusion going forward. I'm planning to set up a test project and see if it plays nicely with Flare 11.

[kkelleher]

2) Support for runtime-merged projects.

Seconded! We use runtime-project-merging to create our online help, so we can't use Top Nav for that target. It's a pity, because I think we could make our help more closely match our web UI by using Top Nav.

Thanks for starting this thread, Nita.

-Kristen

[sanjsrik]

• Ability to move the search from the top-nav into the topic body
  Ability to truly customize the skin, a REAL skin editor would be nice, not just the look and feel of the skin
  Ability to use the top nav so that the responsive design follows along with the customized output

[NorthEast]

Ability to move the search from the top-nav into the topic body

You can already do that, there's a Search Bar proxy skin component.
It's the search box that's used on the home page in Flare's top nav template.

[sanjsrik]

Ability to move the search from the top-nav into the topic body

You can already do that, there's a Search Bar proxy skin component.
It's the search box that's used on the home page in Flare's top nav template.

Not with the left-navigation skin you can't. It's fixed at the top.

[NorthEast]

Ability to move the search from the top-nav into the topic body

You can already do that, there's a Search Bar proxy skin component.
It's the search box that's used on the home page in Flare's top nav template.

Not with the left-navigation skin you can't. It's fixed at the top.

Ok, but you said it was top nav.

By "left-navigation skin" I'm guessing you're using the tripane skin, which is completely different to the top nav skin.

[StraygoatWriting]

A few things I'd like to see:

• Kind of ties in to the foundation stuff - a mobile menu proxy.
• Another thing that bugs me is that the logo and mobile menu icon can overlap on small displays. I fixed this by digging around in the Flare build files, but really shouldn't have to. Each component of the header should be in its own div with no overlaps (just my opinion).
• Simple mini-tocs for sub-headings in the same topic
• Another vote for the accordion menu. This is a must have for so many of my clients - "Make it look like our website".
• A proxy for related topics. I'm thinking something similar to what is in Confluence, where you can tag a topic as being related to a particular subject, and the related topics proxy would list links to all related topics. Maybe you can already do something similar in Flare, I'm not sure?
• Better error messages! A real bug-bear for me. I hate seeing error messages that are pretty meaningless or just tell you the problem, without even hinting at the possible solution.

[NorthEast]

[*]A proxy for related topics. I'm thinking something similar to what is in Confluence, where you can tag a topic as being related to a particular subject, and the related topics proxy would list links to all related topics. Maybe you can already do something similar in Flare, I'm not sure?

Have you seen relationship tables?
http://webhelp.madcapsoftware.com/flare ... Tables.htm

[StraygoatWriting]

Ah, that's what I meant, Dave. I've never even tried to use them in Flare, but use them a lot in Confluence. I think the related/concept links are more what I meant than the DITA-style relationship table though.

Thanks.

[sforsyth]

- provide a hamburger menu icon in the TopNav theme that is not white. (The white one does not look good on light-coloured themes)

- make it so I can import my web fonts with a statement like this:
@import url(‘//cloud.typography.com/1234567/1234/css/fonts/css');
Currently, Flare "helps" by appending "file:" to the beginning of the URL. This is the only supported format for accessing the corporate web font so I am stuck using it.

- make it easier to style the mini-TOCs
Styling the mini TOCs really made a great impact on the look and feel of our project. However, digging down into the CSS to style them was pretty complicated.

- make more options available when styling the top nav toolbar in the skin.
There are lots of things you can do in CSS that don't have corresponding settings in the skin editor. I added a bottom border and made the top nav bar sticky to the top of the page. I also converted the top level of the to uppercase using this:

Code: Select all

.navigation li 
{
   text-transform: uppercase;
 }
 .navigation ul > li
{
	text-transform: none;
}

- make it easier to style the breadcrumbs without complicated CSS

- improve scripting in Flare so it's easier to integrate with other web components
- We've got all kinds of tracking codes, helper scripts, fancy videos to embed. etc but we often hit a wall with Flare where Flare strips something out (stylesheets) or adds something in ("file://" to the beginning of URLs) It would be great if Flare acted more like a web design tool so it is easier to cut-and-paste standard solutions from the rest of the web design world into Flare. Another example is that sometimes I need to convert " characters to ' characters (when embedding youtube videos manually and not through the Insert > Multimedia menu).

[NorthEast]

- make it easier to style the mini-TOCs
Styling the mini TOCs really made a great impact on the look and feel of our project. However, digging down into the CSS to style them was pretty complicated.

Take a look at the new menu proxy skin component; it's far more versatile than the miniTOC, and it has its own skin.

[techwriter31]

I echo the above requests for:
- Runtime-merged projects.
- Accordion menu.

These are the two things preventing us from transitioning to Top Nav.

[dhauer]

Be able to set sticky nav bar with a checkbox in a skin or target rather than adding 10+ lines of CSS to make it stay put AND get the bookmark links to appear correctly on the screen rather than under the sticky nav bar.

[jknasinski]

I'd like to see the Google Custom Search engine as a configurable option. We keep getting requests from our users to have a "Google type" search engine in the help.

[sanjsrik]

Flare things I'd like to see fixed:

Better error handling across the board. The errors Flare throws are atrocious and absolutely useless in figuring out what went wrong in projects
Better insight into bugs submitted to Madcap. I have bugs that are completely crippling the way I work on a daily basis that are driving me mad:
Creating multiple variable lists doesn't show them when I am typing. I can have 5 variables and when I'm typing I expect them to become available based on the one or two or three letters I just typed and I have to instead click out of the line I'm in, click back into it and THEN does the variable show up. WHY? Why can't my variable list work as expected?
Oh, for the love of gods, how about fixing the automatic sync option in Git. The bug I submitted has made me completely turn off that option. You turn it on, you get the sync folder in your project repeating EVERY TIME Flare syncs. No wonder I was running into the windows 246 character limitation. My project was fine. Flare was making level after sublevel of folders
The ability to output branded print output from my HTML5 output (no, not using a secondary javascript, why is everything to use something else inside the application?)

If the company could just get a more robust git integration I'd be so very grateful.

[Nita Beck]

To all,

I do not begrudge ANY of the wish list items that have been posted here, but please confine the discussion specifically to Top Nav. That is the specific subject area I'm trying to gather input from the community about, at MadCap's request.

Thanks.

[alien]

run time project merging
Allow the top menu to be context sensitive