Zurb Foundation 6 menu align-right easiet way to make align-center on small devices

Question

I'm using ZURB foundation and I am wondering if an easier way exists of aligning menu items on small devices.

Currently my HTML looks like this:

<ul class="vertical menu align-right">
    <li><a title="My God, It's Full of Stars">Link 1</a></li>
    <li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
    <li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

As you can see, on all devices my menu aligns 'right' but on smaller devices I'd like to center those items, I know that ZURB 6 has many classes and data methods of getting things to work differently depending on the viewpoint size.

I've tried using both:

1. <ul class="vertical menu align-right" data-responsive-menu="small-align-center">
2. <ul class="vertical menu align-right small-align-center">

Which both do not work! sadly.

I suppose I could use:

/* Small only */
@media screen and (max-width: 39.9375em) {

    .menu.align-right {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .menu.align-right.vertical li {
        text-align: center;
    }

}

I would prefer to keep the CSS as minimal as possible and wondering if a method exists without adding to the CSS. As great as the documentation is on the ZURB 6 site, not all is listed.

The Question(s):

Is there a method of aligning menu items using CLASS or DATA on small, media and large devices?

Answer 1

The only way to accomplish this without rules for breakpoints is to forego the flex rules and use simpler text-alignment rules, which allow for some breakpoint-based name components:

<ul class="vertical menu small-12 text-center medium-text-right">
  <li><a title="My God, It's Full of Stars">Link 1</a></li>
  <li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
  <li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

This isn't well-documented, but since Foundation starts from a mobile-first philosophy, .text-center applies to small viewports. The breakpoint-specific class .medium-text-right then takes over on medium viewports, and will carry through on larger sizes as well.

If flex utility classes were otherwise important, you'd have no choice but to write media queries or, if using SASS, use breakpoint includes.

Here's a working Codepen demo to show the effect in action.