Menu icon Foundation

Engineer

I am building a nice iphone app paired with a wonderful website built with foundation 5 and Ink for email messaging

My Posts






My Comments

andrea tagliazucchi commented on Nathan Wright's post almost 5 years

I am trying to configure grunt-uncss to work with reveal and the small screen hamburger. but no luck so far. After linking to the cleaned.css file (the one return from grunt uncss) if i click the harburger menu or a button triggering a modal, nothing work.
I know this is a documented "issue" with code injeced dynamically, but I wonder if anybody came out with a good "ignore" configuration in the Gruntfile.js to solve this.

Below the last config i tried (pay attention to the Ignore setting)

  uncss: {
            options: {
                ignore       : ['.reveal*', ':hover', /test\-[0-9]+/],
                //media        : [],
                //csspath      : '',
                //raw          : 'h1 { color: green }',
                stylesheets  : ['css/app.css'],
                //ignoreSheets : [],
                //urls         : [], // Deprecated
                timeout      : 1000,
                //htmlroot     : '',
                //report       : 'min'
            },

            dist: {
                files: {
                    'css/app-cleaned.css': ['*.html']
                }
            }
        },

andrea tagliazucchi commented on andrea tagliazucchi's post about 5 years

Hi lyn,
yes that works, even if i would prefer something done properly through scss and without !important.
thanks anyway

andrea tagliazucchi commented on andrea tagliazucchi's post over 5 years

there is an open post you can follow about this here: https://github.com/zurb/foundation/issues/4791

andrea tagliazucchi commented on andrea tagliazucchi's post over 5 years

Thanks Rafi,
one more question: how con i add it into my gruntfile.js to compile in say font.css?
Here my current gruntfile.js (the default):

 odule.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        includePaths: ['bower_components/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'compressed'
        },
        files: {
          'css/app.css': 'scss/app.scss'
        }        
      }
    },

    watch: {
      grunt: { files: ['Gruntfile.js'] },

      options: {
      livereload: true,
      },
      css: {
        files: ['public/scss/*.scss'],
        tasks: ['compass'],
      },

      sass: {
        files: 'scss/**/*.scss',
        tasks: ['sass']
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('build', ['sass']);
  grunt.registerTask('default', ['build','watch']);
}

andrea tagliazucchi commented on Malou Geurts's post over 5 years

Saw it.
i figured out that masonry does not include images loaded library so i add
Javascript
<script src="js/imagesloaded.pkgd.min.js"></script>

and now the reload is perfect.

Panel: i figured out that in order to have the image resizing with the panel i just needed to add

.item img {
  width: 100%;
}

That was trivial!

thanks for your help

andrea tagliazucchi commented on Malou Geurts's post over 5 years

yes i did. my problem is the panel element below images

<!doctype html>







Wanda | Popular


<!-- Navigation -->

<div class="fixed">
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">Wanda</a>
                </h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#">Menu</a>
            </li>
        </ul>

        <section class="top-bar-section">
            <!-- Left Nav Section -->
            <ul class="left">
                <li><a href="#">Blog</a>
                </li>
            </ul>

            <!-- Right Nav Section -->
            <ul class="right">
                <li class="active"><a href="#">Popular</a>
                </li>
                <li class=""><a href="#">Friends Event</a>
                </li>
                <li class=""><a href="#">Add Item</a>
                </li>
                <li class=""><a href="#">Me</a>
                </li>
                <li class="has-dropdown">
                    <a href="#">Settings</a>
                    <ul class="dropdown">
                        <li><a href="#">Profile</a>
                        </li>
                        <li><a href="#">Find &amp; Invite Friends</a>
                        </li>
                        <li><a href="#">Share Settings</a>
                        </li>
                        <li><a href="#">Terms and Privacy</a>
                        </li>
                        <li><a href="#">Reset Password</a>
                        </li>
                        <li><a href="#">Logout</a>
                        </li>
                        <li><a href="#">Delete My Account</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </section>
    </nav>
</div>
<br>

<!-- End Navigation -->


<div class="row">

    <!-- Side Bar -->
    <div class="large-4 medium-4 small-12 columns" itemscope itemtype="http://schema.org/Product">
        <a href="#">
            <img itemprop="image" src="img/pin3.jpg" alt="desc">
        </a>
        <div class="panel panel-masonry">
            <h5 itemprop="name">Item Name</h5>
            <div class="row">
                <div class="large-8 medium-8 small-8 columns">
                    <h6 class="subheader" itemprop="brand">Brand name</h6>
                </div>
                <div class="large-4 medium-4 small-4 columns" itemscope itemtype="http://schema.org/AggregateRating">
                    <h6 class="subheader" itemprop="ratingValue">wants</h6>
                </div>
            </div>
            <h6 class="subheader" itemscope itemtype="http://schema.org/Offer">
                <span itemprop="price">$1,000.00</span>
            </h6>
            <hr>
            <!-- row for image and user name lastname-->
            <div class="row">
                <a href="#">
                    <div class="small-4 medium-4 large-4 columns">
                        <img class="user-image" src="img/pin1.jpg" alt="name lastname" />
                    </div>
                    <div class="small-8 medium-8 large-8 columns">
                        <p>Name Last_name</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <!-- End Side Bar -->

    <!-- Masonry container -->
    <div class="large-8 medium-8 small-12 columns">
        <div id="container" class="js-masonry" data-masonry-options='{ "itemSelector": ".item" }'>


            <!-- items -->
            <div class="small-6 medium-6 large-4 columns item" itemscope itemtype="http://schema.org/Product">
                <a href="#">
                    <img itemprop="image" src="img/pin3.jpg" alt="desc">
                </a>
                <div class="panel panel-masonry">
                    <h5 itemprop="name">Item Name</h5>
                    <div class="row">
                        <div class="large-8 medium-8 small-8 columns">
                            <h6 class="subheader" itemprop="brand">Brand name</h6>
                        </div>
                        <div class="large-4 medium-4 small-4 columns" itemscope itemtype="http://schema.org/AggregateRating">
                            <h6 class="subheader" itemprop="ratingValue">wants</h6>
                        </div>
                    </div>
                    <h6 class="subheader" itemscope itemtype="http://schema.org/Offer">
                        <span itemprop="price">$1,000.00</span>
                    </h6>
                    <hr>
                    <!-- row for image and user name lastname-->
                    <div class="row">
                        <a href="#">
                            <div class="small-4 medium-4 large-4 columns">
                                <img class="user-image" src="img/pin1.jpg" alt="name lastname" />
                            </div>
                            <div class="small-8 medium-8 large-8 columns">
                                <p>Name Last_name</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>


            <!-- items -->
            <div class="small-6 medium-6 large-4 columns item">
                <a href="#">
                    <img src="img/pin5.jpg" alt="desc">
                </a>
                <div class="panel panel-masonry">
                    <h5>Item Name</h5>
                    <div class="row">
                        <div class="large-8 medium-8 small-8 columns">
                            <h6 class="subheader">Brand name</h6>
                        </div>
                        <div class="large-4 medium-4 small-4 columns">
                            <h6 class="subheader">NR. wants</h6>
                        </div>
                    </div>
                    <h6 class="subheader">$000.00</h6>
                </div>
            </div>

            <!-- items -->
            <div class="small-6 medium-6 large-4 columns item">
                <a href="#">
                    <img src="img/pin6.jpg" alt="desc">
                </a>
                <div class="panel panel-masonry">
                    <h5>Item Name</h5>
                    <div class="row">
                        <div class="large-8 medium-8 small-8 columns">
                            <h6 class="subheader">Brand name</h6>
                        </div>
                        <div class="large-4 medium-4 small-4 columns">
                            <h6 class="subheader">NR. wants</h6>
                        </div>
                    </div>
                    <h6 class="subheader">$000.00</h6>
                </div>
            </div>

            <!-- items -->
            <div class="small-6 medium-6 large-4 columns item">
                <a href="#">
                    <img src="img/pin7.jpg" alt="desc">
                </a>
                <div class="panel panel-masonry">
                    <h5>Item Name</h5>
                    <div class="row">
                        <div class="large-8 medium-8 small-8 columns">
                            <h6 class="subheader">Brand name</h6>
                        </div>
                        <div class="large-4 medium-4 small-4 columns">
                            <h6 class="subheader">NR. wants</h6>
                        </div>
                    </div>
                    <h6 class="subheader">$000.00</h6>
                </div>
            </div>

            <!-- items -->
            <div class="small-6 medium-6 large-4 columns item">
                <a href="#">
                    <img src="img/pin8.jpg" alt="desc">
                </a>
                <div class="panel panel-masonry">
                    <h5>Item Name</h5>
                    <div class="row">
                        <div class="large-8 medium-8 small-8 columns">
                            <h6 class="subheader">Brand name</h6>
                        </div>
                        <div class="large-4 medium-4 small-4 columns">
                            <h6 class="subheader">NR. wants</h6>
                        </div>
                    </div>
                    <h6 class="subheader">$000.00</h6>
                </div>
            </div>
        </div>
        <!-- end Masonry container -->
    </div>
</div>


<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
<script>$(document).foundation();</script>
<script src="js/masonry.pkgd.min.js"></script>
<script>
    var $containter = $('#container');
    $containter.imagesLoaded( function(){
        $containter.masonry({
            itemSelector: '.item',
        }); 
    });
</script>

this is my custom CSS

.item {
padding: 0.2em;
}

.panel-masonry {
padding: 0.2em;
margin:0;
overflow: hidden;
}

.user-image {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

andrea tagliazucchi commented on Malou Geurts's post over 5 years

Hi Malou,
i did follow Loc answer as well. Works great but since i have image + text (wrapped in a .panel) i have a problem when i do resize viewport: the image width does not match the panel width so i got a very ugly effect. Any hint?

andrea tagliazucchi commented on Yamenshahin's post over 5 years

i found a solution around. my final code is:

.top-bar-section .has-dropdown:hover > a:after {
    border-color: rgb(255, 255, 255) transparent transparent;

}

@media only screen and (max-width: 942px) {

    .top-bar-section .has-dropdown:hover > a:after {
        border-color: transparent transparent  transparent rgb(255, 255, 255) ;
    }


} 

I have not fully test it so careful

andrea tagliazucchi commented on Yamenshahin's post over 5 years

Thanks Alexander
your solution works but my question was poorly formulated!
I meant to ask for the drop down arrow. I am able to change the arrow color for large screen break point but not for small screen. That's why i was asking for a scss solution.
If you try this code

.top-bar-section .has-dropdown:hover > a:after {
    border-color: rgb(255, 255, 255) transparent transparent;
    
}  

you will see that the arrow turns white in large screen but stay gray in small screen.

thanks in advance

andrea tagliazucchi commented on andrea tagliazucchi's post over 5 years

what i did was to change the class from

<table class="row">

to
<table class="row header">

but your solution is more semantic!
thanks

Posts Followed





Following

    No Content

Followers

My Posts

My Comments

You commented on Nathan Wright's post almost 5 years

I am trying to configure grunt-uncss to work with reveal and the small screen hamburger. but no luck so far. After linking to the cleaned.css file (the one return from grunt uncss) if i click the harburger menu or a button triggering a modal, nothing work.
I know this is a documented "issue" with code injeced dynamically, but I wonder if anybody came out with a good "ignore" configuration in the Gruntfile.js to solve this.

Below the last config i tried (pay attention to the Ignore setting)

  uncss: {
            options: {
                ignore       : ['.reveal*', ':hover', /test\-[0-9]+/],
                //media        : [],
                //csspath      : '',
                //raw          : 'h1 { color: green }',
                stylesheets  : ['css/app.css'],
                //ignoreSheets : [],
                //urls         : [], // Deprecated
                timeout      : 1000,
                //htmlroot     : '',
                //report       : 'min'
            },

            dist: {
                files: {
                    'css/app-cleaned.css': ['*.html']
                }
            }
        },

You commented on andrea tagliazucchi's post about 5 years

Hi lyn,
yes that works, even if i would prefer something done properly through scss and without !important.
thanks anyway

You commented on andrea tagliazucchi's post over 5 years

there is an open post you can follow about this here: https://github.com/zurb/foundation/issues/4791

You commented on andrea tagliazucchi's post over 5 years

Thanks Rafi,
one more question: how con i add it into my gruntfile.js to compile in say font.css?
Here my current gruntfile.js (the default):

 odule.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        includePaths: ['bower_components/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'compressed'
        },
        files: {
          'css/app.css': 'scss/app.scss'
        }        
      }
    },

    watch: {
      grunt: { files: ['Gruntfile.js'] },

      options: {
      livereload: true,
      },
      css: {
        files: ['public/scss/*.scss'],
        tasks: ['compass'],
      },

      sass: {
        files: 'scss/**/*.scss',
        tasks: ['sass']
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('build', ['sass']);
  grunt.registerTask('default', ['build','watch']);
}

You commented on Malou Geurts's post over 5 years

Saw it.
i figured out that masonry does not include images loaded library so i add
Javascript
<script src="js/imagesloaded.pkgd.min.js"></script>

and now the reload is perfect.

Panel: i figured out that in order to have the image resizing with the panel i just needed to add

.item img {
  width: 100%;
}

That was trivial!

thanks for your help

You commented on Malou Geurts's post over 5 years

yes i did. my problem is the panel element below images

<!doctype html>







Wanda | Popular


<!-- Navigation -->

<div class="fixed">
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">Wanda</a>
                </h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#">Menu</a>
            </li>
        </ul>

        <section class="top-bar-section">
            <!-- Left Nav Section -->
            <ul class="left">
                <li><a href="#">Blog</a>
                </li>
            </ul>

            <!-- Right Nav Section -->
            <ul class="right">
                <li class="active"><a href="#">Popular</a>
                </li>
                <li class=""><a href="#">Friends Event</a>
                </li>
                <li class=""><a href="#">Add Item</a>
                </li>
                <li class=""><a href="#">Me</a>
                </li>
                <li class="has-dropdown">
                    <a href="#">Settings</a>
                    <ul class="dropdown">
                        <li><a href="#">Profile</a>
                        </li>
                        <li><a href="#">Find &amp; Invite Friends</a>
                        </li>
                        <li><a href="#">Share Settings</a>
                        </li>
                        <li><a href="#">Terms and Privacy</a>
                        </li>
                        <li><a href="#">Reset Password</a>
                        </li>
                        <li><a href="#">Logout</a>
                        </li>
                        <li><a href="#">Delete My Account</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </section>
    </nav>
</div>
<br>

<!-- End Navigation -->


<div class="row">

    <!-- Side Bar -->
    <div class="large-4 medium-4 small-12 columns" itemscope itemtype="http://schema.org/Product">
        <a href="#">
            <img itemprop="image" src="img/pin3.jpg" alt="desc">
        </a>
        <div class="panel panel-masonry">
            <h5 itemprop="name">Item Name</h5>
            <div class="row">
                <div class="large-8 medium-8 small-8 columns">
                    <h6 class="subheader" itemprop="brand">Brand name</h6>
                </div>
                <div class="large-4 medium-4 small-4 columns" itemscope itemtype="http://schema.org/AggregateRating">
                    <h6 class="subheader" itemprop="ratingValue">wants</h6>
                </div>
            </div>
            <h6 class="subheader" itemscope itemtype="http://schema.org/Offer">
                <span itemprop="price">$1,000.00</span>
            </h6>
            <hr>
            <!-- row for image and user name lastname-->
            <div class="row">
                <a href="#">
                    <div class="small-4 medium-4 large-4 columns">
                        <img class="user-image" src="img/pin1.jpg" alt="name lastname" />
                    </div>
                    <div class="small-8 medium-8 large-8 columns">
                        <p>Name Last_name</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <!-- End Side Bar -->

    <!-- Masonry container -->
    <div class="large-8 medium-8 small-12 columns">
        <div id="container" class="js-masonry" data-masonry-options='{ "itemSelector": ".item" }'>


            <!-- items -->
            <div class="small-6 medium-6 large-4 columns item" itemscope itemtype="http://schema.org/Product">
                <a href="#">
                    <img itemprop="image" src="img/pin3.jpg" alt="desc">
                </a>
                <div class="panel panel-masonry">
                    <h5 itemprop="name">Item Name</h5>
                    <div class="row">
                        <div class="large-8 medium-8 small-8 columns">
                            <h6 class="subheader" itemprop="brand">Brand name</h6>
                        </div>
                        <div class="large-4 medium-4 small-4 columns" itemscope itemtype="http://schema.org/AggregateRating">
                            <h6 class="subheader" itemprop="ratingValue">wants</h6>
                        </div>
                    </div>
                    <h6 class="subheader" itemscope itemtype="http://schema.org/Offer">
                        <span itemprop="price">$1,000.00</span>
                    </h6>
                    <hr>
                    <!-- row for image and user name lastname-->
                    <div class="row">
                        <a href="#">
                            <div class="small-4 medium-4 large-4 columns">
                                <img class="user-image" src="img/pin1.jpg" alt="name lastname" />
                            </div>
                            <div class="small-8 medium-8 large-8 columns">
                                <p>Name Last_name</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>


            <!-- items -->
            <div class="small-6 medium-6 large-4 columns item">
                <a href="#">
                    <img src="img/pin5.jpg" alt="desc">
                </a>
                <div class="panel panel-masonry">
                    <h5>Item Name</h5>
                    <div class="row">
                        <div class="large-8 medium-8 small-8 columns">
                            <h6 class="subheader">Brand name</h6>
                        </div>
                        <div class="large-4 medium-4 small-4 columns">
                            <h6 class="subheader">NR. wants</h6>
                        </div>
                    </div>
                    <h6 class="subheader">$000.00</h6>
                </div>
            </div>

            <!-- items -->
            <div class="small-6 medium-6 large-4 columns item">
                <a href="#">
                    <img src="img/pin6.jpg" alt="desc">
                </a>
                <div class="panel panel-masonry">
                    <h5>Item Name</h5>
                    <div class="row">
                        <div class="large-8 medium-8 small-8 columns">
                            <h6 class="subheader">Brand name</h6>
                        </div>
                        <div class="large-4 medium-4 small-4 columns">
                            <h6 class="subheader">NR. wants</h6>
                        </div>
                    </div>
                    <h6 class="subheader">$000.00</h6>
                </div>
            </div>

            <!-- items -->
            <div class="small-6 medium-6 large-4 columns item">
                <a href="#">
                    <img src="img/pin7.jpg" alt="desc">
                </a>
                <div class="panel panel-masonry">
                    <h5>Item Name</h5>
                    <div class="row">
                        <div class="large-8 medium-8 small-8 columns">
                            <h6 class="subheader">Brand name</h6>
                        </div>
                        <div class="large-4 medium-4 small-4 columns">
                            <h6 class="subheader">NR. wants</h6>
                        </div>
                    </div>
                    <h6 class="subheader">$000.00</h6>
                </div>
            </div>

            <!-- items -->
            <div class="small-6 medium-6 large-4 columns item">
                <a href="#">
                    <img src="img/pin8.jpg" alt="desc">
                </a>
                <div class="panel panel-masonry">
                    <h5>Item Name</h5>
                    <div class="row">
                        <div class="large-8 medium-8 small-8 columns">
                            <h6 class="subheader">Brand name</h6>
                        </div>
                        <div class="large-4 medium-4 small-4 columns">
                            <h6 class="subheader">NR. wants</h6>
                        </div>
                    </div>
                    <h6 class="subheader">$000.00</h6>
                </div>
            </div>
        </div>
        <!-- end Masonry container -->
    </div>
</div>


<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
<script>$(document).foundation();</script>
<script src="js/masonry.pkgd.min.js"></script>
<script>
    var $containter = $('#container');
    $containter.imagesLoaded( function(){
        $containter.masonry({
            itemSelector: '.item',
        }); 
    });
</script>

this is my custom CSS

.item {
padding: 0.2em;
}

.panel-masonry {
padding: 0.2em;
margin:0;
overflow: hidden;
}

.user-image {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

You commented on Malou Geurts's post over 5 years

Hi Malou,
i did follow Loc answer as well. Works great but since i have image + text (wrapped in a .panel) i have a problem when i do resize viewport: the image width does not match the panel width so i got a very ugly effect. Any hint?

You commented on Yamenshahin's post over 5 years

i found a solution around. my final code is:

.top-bar-section .has-dropdown:hover > a:after {
    border-color: rgb(255, 255, 255) transparent transparent;

}

@media only screen and (max-width: 942px) {

    .top-bar-section .has-dropdown:hover > a:after {
        border-color: transparent transparent  transparent rgb(255, 255, 255) ;
    }


} 

I have not fully test it so careful

You commented on Yamenshahin's post over 5 years

Thanks Alexander
your solution works but my question was poorly formulated!
I meant to ask for the drop down arrow. I am able to change the arrow color for large screen break point but not for small screen. That's why i was asking for a scss solution.
If you try this code

.top-bar-section .has-dropdown:hover > a:after {
    border-color: rgb(255, 255, 255) transparent transparent;
    
}  

you will see that the arrow turns white in large screen but stay gray in small screen.

thanks in advance

You commented on andrea tagliazucchi's post over 5 years

what i did was to change the class from

<table class="row">

to
<table class="row header">

but your solution is more semantic!
thanks

Posts Followed

Following

  • No Content

Followers

  • No Content