Using Foundation 5 in conjunction with jquery masonry to create a custom grid layout of recent posts in a WordPress site with trimmed titles, and trimmed post output.

masonry-grid-foundation-5

<div class="row">
        <div class="small-12 columns">
            <div id="masonry-grid">
                <?php 
                    $args = array( 'numberposts' => '99' );
                    $recent_posts = wp_get_recent_posts();
                    foreach( $recent_posts as $recent ) {
                        if($recent['post_status']=="publish"){
                        echo '<div class="gutter-sizer"></div>
                        <div class="medium-4 small-12 grid-item columns">' 
                        .  '<div class="fp-featured-image"> '
                        . get_the_post_thumbnail($recent["ID"], 'featured-image')
                        . '</div>';  
                        $trimtitle = get_the_title($recent["ID"]);
                        $shorttitle = wp_trim_words( $trimtitle, $num_words = 8, $more = '… ' );
                        echo '<h2 class="myspecial-post-title">' . '<a href="' . get_permalink($recent["ID"]) . '">' . $shorttitle . '</a></h2>';  
                        $trimcontent = get_post_field('post_content', $recent["ID"]);
                        $shortcontent = wp_trim_words( $trimcontent, $num_words = 20, $more = '… ' ); 
                        echo '<p>' . $shortcontent . '</p>'
                        . '<p class="gb-more-link"><a href="' . get_permalink($recent["ID"]) . '"> View Submission <i class="fa fa-play"></i> </a></p>'
                        . '</div>';
                        }}
                        ?>
            </div>
            <!--end masonry-grid-->
        </div>
    </div>