0

I've searched for answers on Zurb's site as well as other posts here on SO but haven't found anything that appears to address this issue.

I'm working with Foundation 6 (tried both sites and Zurb templates). Many of the utility classes are working such as top-bar, rows, large, small, medium-column, classes, etc. The default template works as well and shows the different callout elements, buttons, etc.

Some utility classes that were available in Foundation 5 aren't working in 6 such as text-left, text-right, float classes such as right and left or color classes such as white, black, etc. I'm sure there are others but these are the classes I've run across thus far.

I've checked app.scss to ensure nothing is commented out. I also checked the gulpfile.js and it's including all the assets, the SASS for foundation-sites and no javascript files are commented out.

For example, this code from the Zurb site, under v5.5.3 does not activate the panel class or the right or left floats in Foundation 6. 

<div class="panel clearfix">
  <a class="button right">Float Right</a>
  <a class="button left">Float Left</a>
</div>

In my default.html layout, I have the following stylesheets:

<link rel="stylesheet" href="{{root}}assets/css/foundation.min.css">
<link rel="stylesheet" href="{{root}}assets/css/app.css">

and the following javascript files:

<script src="{{root}}assets/js/jquery.min.js"></script>
<script src="{{root}}assets/js/what-input.min.js"></script>
<script src="{{root}}assets/js/foundation.min.js"></script>
<script src="{{root}}assets/js/app.js"></script>

Am I missing a file reference, is there something else I can check to get these classes to work or are these utility classes no longer available in Foundation 6?

cimmanon
  • 67,211
  • 17
  • 165
  • 171
Bill
  • 1
  • 3
  • Did you verify that your CSS file actually contains the classes you're using? – cimmanon Jan 24 '16 at 23:39
  • Possible duplicate: http://stackoverflow.com/questions/34537431/foundation-6-not-compiling-correctly-with-gulp – cimmanon Jan 24 '16 at 23:45
  • @cimmanon, good call. I just checked and found that the color classes aren't included and the .left and .right are now .float-left .float-right and .clearfix is still there. I just happened to find the float classes while looking for some of these others. Any chance there is a reference doc somewhere that shows what classes have changed from Foundation 5? – Bill Jan 24 '16 at 23:48
  • @cimmanon, thanks for the link to the SO question. This may be the solution I was looking for. – Bill Jan 24 '16 at 23:51
  • @cimmanon, that post didn't resolve my overall question. Everything spelled out in the answer was actually already correct for my setup. So, it's more about some of the utility classes and what they may be called now. I'll go through the foundation.css file and see if I can identify them that way. If there is a Zurb reference that lists which class names were updated from Foundation 5, that would be very helpful. – Bill Jan 24 '16 at 23:58
  • If the classes were renamed, then they were renamed. If you want the old names, use Foundation 5. Otherwise you have to use the new names to use Foundation 6. – cimmanon Jan 25 '16 at 00:18
  • Besides color and radius classes, I think the rest are still there. – Colin Marshall Jan 25 '16 at 16:53
  • @Colin, Thanks. The F5 reference was helpful. I'll just have to wait for the F6 version or search the styles to find comparable classes. – Bill Jan 25 '16 at 20:06
  • You can easily add those classes in yourself to use in F6 – Colin Marshall Jan 25 '16 at 22:45

1 Answers1

0

The answer apparently is some class names changed and others were possibly removed. Until there is updated F6 documentation outlining the classes, it'll require searching the css for classes that serve the purpose or adding custom classes.

EDIT: For further clarification, I found that the colors listed on this page - http://foundation.zurb.com/sites/docs/global.html, are referring to the colors used but the classes don't work.

For example, adding "alert" as a class to elements should color them red that's listed on the above-referenced page.

Their example, which adds "secondary" to the button element.

To color a component, add the name of the color as a class.

<button class="button">Primary Action</button>
<button class="secondary button">Secondary Action</button>

It doesn't change the color as ".secondary" is not a css class in Foundation 6. What I found by looking at the _settings.scss file is those are actually SASS global variables that are applied to different classes throughout. This is the same for .success and others. ".alert" is a class but only styled when applied in conjunction with other colors.

Looks like it's best to check the _settings.scss file if you're not finding the classes you're looking for or if something isn't working.

Bill
  • 1
  • 3