Problem using <nav> elements for button container with picnic css (Alertify v1.07, Picnic 6.2.5)

[nmcgann]

Issue is that Picnic does not qualify targetting the <nav> element so it breaks Alertify's layout completely by over-riding Alertify's button wrapper CSS.

It is better to use standard <div> elements in the holder: "<nav>{{buttons}}</nav>", templates in the js and also change the css to target those divs rather than navs.

This is a pic illustrating the issue:

Another smaller issue is using an Alertify dialog from a Picnic Modal where the Picnic CSS is again overriding Alertify's CSS. The overlay mask appears as white and not the full height of the viewport (95%).

I fixed this by changing the .alertify{} class to have:

  background-color: rgba(0, 0, 0, 0.3) !important;
  max-height: 100% !important;/* new rule */

This is a pic illustrating the issue:

(the overlay from the original modal is just visible at the top)

[franciscop]

Hello, Picnic CSS creator here. This is doubtlessly a problem in the way that Picnic is a prescriptive library that plays bad with others. However that is a design decision of Picnic, since in exchange it makes it much easier to develop with it for standalone projects. The main reason is to avoid to over-specify things like:

<!-- bootstrap -->
<button class="btn btn-primary">Hi there</button>

<!-- Picnic CSS -->
<button>Hi there</button>

---

That said, I think that the use of <nav> in the say that alertify.js is not the most appropriate according to the specification (see a good article on it):

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.

The reason is two-fold:

• It is not a section with navigation links. Those are action buttons, which trigger actions in-page instead of linking to some content.
• It is not a major navigation section. It is a couple of buttons section for a modal, which is in itself a minor section.

In these situations I normally resort to:

<div class="actions">...</div>
<div class="menu">...</div> (see menu inside nav: http://picnicss.com/documentation#nav )
<footer>...</footer>

I would recommend for alertifyjs to use the first one to keep the HTML semantic; but I want to reiterate that this clash of styles is because of Picnic CSS design decision.