Foundation 6: An advanced responsive front-end framework over Bootstrap 3

Overview

Nowadays Foundation 6 has been an advanced responsive framework which provides basic grid system, typography, basic form controls, HTML & CSS UI components, etc. In this blog we are going to learn what makes a Foundation 6 an advanced framework and how it differs from Bootstrap 3.

Basic grid system

We all know that what basic grid system is. It consists of 12 units i.e 12 blocks of your screen. It is mostly similar to bootstrap. But now question is how it is different from bootstrap?

No big difference is there. Only class names are different from bootstrap 3. Here is the grid structure for Foundation 6:

.small-* = For Extra small devices (Mobile Phones)
.medium-* = For Medium size devices (Tablets, Laptops,etc.)
.large-* = For Large devices (Large Desktops)

Apply one of the above unit with .columns class for any grid. Here .row is used for fixed width container.

The most amazing things for grids are Incomplete Rows, Centered Columns & Block Grids. Let’s understand them briefly.

Incomplete Rows:

This is the new concept in Foundation 6. Sometimes we don’t need to use all 12 units of grids. For ex: Suppose we have to use only 9 units of grid. So what we have to do is we just use 3 units from 12 i.e. we have just used .small-3 or .large-3 totally 3 times to make it one row having total width of 9 units.

For this we have to just add .end class in last column. In Foundation 6 every last column of row is right aligned by default for row alignment. Whenever we will add .end class it directly left aligns the specific block with respect to others.

Example:

Centered Columns:

This topic includes how we will display any grid into center align. Sometimes it is necessary for us to display any grid to center align. If we use any of the grid class it will align either left or right. So what we do is just use any specific unit with centered suffix.

For ex: small-centered, large-centered

Also for non-centered columns for any specific screen just use any specific unit with uncentered suffix.

For ex: small-uncentered, large-uncentered

Block Grids:

In Block grids .column-block class is used which will apply the margin at bottom of the block equal to the width of gutters.

Example:

Flex Grid

Flex grids are consisting of flexible grids which means no floating grids are there. The flex grids are using display: flex property to set grids side by side from each other.

Note: You can use either normal basic grid system (Floating Grids) or Flex Grid at a time. Just goto Foundation demo download page then from Customize Foundation select Flex Grid and then download custom foundation demo. It will give you only the Flex Grid Structure.

Now the most important topics are: Horizontal Alignment, Vertical Alignment, Source Ordering & Block Grids. Let’s understand each in brief.

Horizontal Alignment:

Here block alignment set as per our requirement. In a bootstrap we can only set text as left , right , center. But here we can also set block. We can use the below class for horizontal alignment:

1. Align-left
2. Align-right
3. Align-center
4. Align-justify
5. Align-spaced

Vertical Alignment:

Here using flex grid we can set blocks vertically as per our requirement. There are equal heights in all blocks. We can give alignment to all blocks. Give some class and set it as we want.

1. align-middle
2. align-top
3. align-bottom
4. align-self-top
5. align-self-bottom
6. align-self-middle

Source Ordering:

Here if we want to change place of blocks in different screen size then we can change using class and one css property order. Foundation 6 provides this type of advanced functionality.

Example:

Classname{
order: 1;
}

We can set order as per our requirement to show blocks in different screen sizes.For main screen.

Block change in small device

Block Grids:

Using Block grids we are able to show number of blocks in particular device. Here are some classes used:

.size-up-n (n=>1 to 9)
Here size is used for any device unit i.e.(small|Medium|Large).

HTML:

<div class="row small-up-1 medium-up-2 large-up-3">
    <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </div>
      <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </div>
      <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </div>
</div>

Example:
For Large Devices:

For Tablet:

For Small screen:

Right to Left Support

Nowadays some websites has multiple language functionality. For normal languages our designs are set properly but what will be done if the current website has Arabic or any other language support which has Right to Left behaviour?

Well no worries about that because our latest framework provides this functionality also. You have to just define lang and dir attributes intag as shown below:

<html class="no-js" lang="ar" dir="rtl">

Cards

This is the new concept in Foundation 6. Cards gives us a very nice visual effect just like some greeting cards. Please check below screenshot for this.

The card has it’s own Header, Content and Footer sections. Now what you have to do is just use them as shown in below code and get pretty cards as shown below:

HTML:

<div class="card">
      <div class="card-divider"></div>
      <img src="images/nature-1.jpg">
      <div class="card-section">
            <h4>Lorem ipsum dolor sit amet</h4>
            <p>Morbi tristique senectus et netus et malesuada fames ac turpis egestas</p>
      </div>
</div>

Media object

Media Object is generally used to display content and image block side by side with some headings. Here is an example and screenshot for that:

HTML:

<div class="media-object  stack-for-small">
      <div class="media-object-section">
            <div class="thumbnail">
                  <img src="images/graphic.jpg">
            </div>
      </div>
      <div class="media-object-section">
            <h4>Lorem ipsum dolor sit amet</h4>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolorem que laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
</div>

Example:

The amazing part is that if we use .stack-for-small class it will stack the blocks like below screenshot in small devices.

Off-canvas Navigation

Off-canvas navigations are currently in trending. It is outside the viewport and slides when it will be activated. You may also change the position of it i.e. left, right, top or bottom using following classes:

• .position-left
• .position-right
• .position-top
• .position-bottom

This is the great functionality given by Foundation 6. Isn’t it??? Now let’s check one example for it. Currently we are viewing left Off-canvas navigation.

Example:

<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
    <!-- Your navigation code here -->
</div>
 <div class="off-canvas-content" data-off-canvas-content>
    <!-- Your page content here -->
</div>

Here position-left class defines the position from where our menu will be slides. This is the container that holds your Off-canvas navigation. Here it is mandatory to define data-off-canvas attribute as your navigation container. Similarly data-off-canvas-content is a container for your page content which will slides to right after left navigation is activated and it is also a mandatory attribute. That’s it.

Conclusion

Here some functionalities are not available in bootstrap 3 and Foundation 6 is an advanced responsive front-end framework which will provide so many new functionalities. Also it is easy to use.

Some feature like Flex Grid, Off-canvas Navigation, RTL Support etc. are extra features and they are easy to use in website design. Also it is less time consuming.