Foundation Block Grid – Easily Use It In Your Posts

foundation-block-grid

The Foundation Block GridΒ gives you a way to evenly split contents of a list within the grid. If you wanted to create a row of 5 images or paragraphs that need to stay evenly spaced no matter the screen size, the block grid is for you.
Foundation

Foundation Block Grid Example

One of the great things about the Foundation Block Grid is the fact that you can use it to manually create columns for your content. All you need to do is change a number. In the following example I am using large-block-grid-4 to create a 4 column layout for the content:

  • Column

    Nam nec scelerisque ante. Ut congue neque eu blandit blandit. Vivamus ut risus id magna tristique semper at nec lorem.

  • Column

    Nam nec scelerisque ante. Ut congue neque eu blandit blandit. Vivamus ut risus id magna tristique semper at nec lorem.

  • Column

    Nam nec scelerisque ante. Ut congue neque eu blandit blandit. Vivamus ut risus id magna tristique semper at nec lorem.

  • Column

    Nam nec scelerisque ante. Ut congue neque eu blandit blandit. Vivamus ut risus id magna tristique semper at nec lorem.

In the above example this is what I used after clicking the “text” tab in the post/page editor:

<ul class="large-block-grid-4">
    <li>
        <h4>Column</h4>
        Nam nec scelerisque ante. Ut congue neque eu blandit blandit. Vivamus ut risus id magna tristique semper at nec lorem.</li>
    <li>
        <h4>Column</h4>
        Nam nec scelerisque ante. Ut congue neque eu blandit blandit. Vivamus ut risus id magna tristique semper at nec lorem.</li>
    <li>
        <h4>Column</h4>
        Nam nec scelerisque ante. Ut congue neque eu blandit blandit. Vivamus ut risus id magna tristique semper at nec lorem.</li>
    <li>
        <h4>Column</h4>
        Nam nec scelerisque ante. Ut congue neque eu blandit blandit. Vivamus ut risus id magna tristique semper at nec lorem.</li>
</ul>

The number of column (li or list items) options that are available to you with the Foundation Block Grid are large-block-grid-1Β (1 column or 1 list item) all the way to large-block-grid-12 (12 columns or 12 list items). The same holds true if you want to use the small-block-grid. The number of columns small-block-grid-1 (1 column or 1 list item) to small-block-grid-12 (12 columns or 12 list items).

The only difference between the small-block-grid and the large-block-grid in the Foundation Block Grid system, is that the small-block-grid list items will keep their spacing and configuration no matter the screen size whereas the large-block-grid list elements will “stack” on top of each other for small screens. I myself prefer the using the large-block-grid layout.

Read more Foundation Docs: The Grid

6 thoughts on “Foundation Block Grid – Easily Use It In Your Posts

  1. This is simply beautiful!

    Columns are probably my most used Foundation element and now I know I’ve been using them the “wrong” way all this time.

    I’ve been using then

    That method actually works equally well, but one of my biggest challenges when using Foundation elements in the WYSIWYG is handing things over to the client.

    I’ve been using the Easy Foundation Shortcode plugin and that is a good option for some, but it’s not a perfect solution and still requires a level of competence to use. With more complicated page layouts, it inevitably leads to switching to the Text view in the editor – fine for people who know what they are doing, but…

    So now I have an alternative approach, at least for using columns, which is much simpler to use.

    Most users can handle bulleted lists. So all we have to do is provide a way of styling those lists from the WYSIWYG.

    Following this reference it’s possible to provide a button with options for number of columns: https://codex.wordpress.org/TinyMCE_Custom_Styles

    So for a 4 column selector the code in for the styles format is:

    array(
                'title' => '4 Columns',
                'selector' => 'ul',
                'classes' => 'large-block-grid-4',
                'wrapper' => true,
            )
    

    It’s then relatively easy for an end user to create a list with 4 bullets in the WYSIWYG and hit a button to turn that into 4 columns.

    I wonder what other Foundation elements I can enable in the same way!

    • hey there, yes adding code via the text tab in the editor is OK for people who know what they are doing. However, it can be disastrous when I client wants to do it, especially if they do not know what they are doing.

      I think you can probably do pretty much all Foundation elements if you get creative enough πŸ˜‰

  2. Great theme, and I’m just getting setup with the child theme and styles etc… very nice and easy πŸ˜‰

    One quick question though about using the foundation grid above..how would i use that outside of the editor and in my template? For WP_Starter I want the wordpress posts to be arranged using this grid if possible?

    I tried adding the code to the index.php page but it didn’t work πŸ™

    Any suggestions would be very much appreciated!

    Thx

    • Hey there, glad you like using the theme. I believe what you need to do is replace the loop. So take this (in index.php):

          < ?php while ( have_posts() ) : the_post(); ?>
              < ?php get_template_part( 'content', get_post_format() ); ?>
          < ?php endwhile; ?>
      

      and replace it with this:

      <ul class="large-block-grid-4">
         <?php while ( have_posts() ) : the_post(); ?>
            <li><?php get_template_part( 'content', get_post_format() ); ?></li>
         <?php endwhile; ?>
      </ul>
      

      Now remember, I believe you have to match what you set in Settings > Reading. So if you have Blog pages show at most set to 5 then I would use large-block-grid-5 and so on.

      Hope this helps.

  3. Absolutely awesome Thomas πŸ˜‰

    Thanks for the help and it worked perfectly. So far anyway!

    I’ll add my review of the theme asap !

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.