CODEWITHSUNDEEP
zurb-foundationgulpgulp-uncss
Brett DeWoody
Brett DeWoody

Reputation: 62771

gulp-uncss with height equalizer in Zurb Foundation

I'm trying to use gulp-uncss to remove unneeded CSS from a Zurb Foundation website.

Within the site I'm using Foundation's Equalizer to make two columns the same height. This works by adding a data- attribute to an element:

<div data-equalizer>
  <div data-equalizer-watch>
  <div>
  <div data-equalizer-watch>
  <div>
<div>

When the page loads Foundation determines the height of the two elements and injects an inline style to set the height of the elements to the greater of the two element heights. The result is:

<div data-equalizer>
  <div data-equalizer-watch style="height: 256px;">
  <div>
  <div data-equalizer-watch style="height: 256px;">
  <div>
<div>

When I add gulp-uncss to my gulpfile.js the Equalizer no longer works. The data- attributes are still present in the HTML file, but the inline styles are not added.

I've tried using the ignore option in gulp-uncss to ignore height but had no luck. The inline style is no longer added to HTML document.

Is there an option in gulp-uncss that will allow the equalizer to do it's job?

Upvotes: 0

Views: 173

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62771

I was able to get gulp-uncss working using the ignore parameter in UnCSS.

Adding:

ignore: [/^meta.foundation/, /f-topbar-fixed/, /contain-to-grid/, /sticky/, /fixed/]

to uncss() kept all the necessary CSS. The most important of these is /^meta.foundation as this allows the Foundation JS to inject the styles. The remaining values /f-topbar-fixed, contain-to-grid, /sticky/ and /fixed/ are all specific to the Foundation JS modules I'm using. The above work for a .sticky topbar.

If you're using other JS modules you'll need to determine what classes are being injected and add those to the the ignore array.

Upvotes: 0

Related Questions