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.

foundation-image1

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:

foundation-image2

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:

foundation-image3

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

foundation-image4

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

foundation-image5

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:

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

foundation-image6

Block change in small device

foundation-image7

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:

Example:
For Large Devices:

foundation-image8

For Tablet:

foundation-image9

For Small screen:

foundation-image10

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:

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:

foundation-image11

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:

Example:

foundation-image12

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

foundation-image13

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:

foundation-image14

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.

mm

Nipa Khunt Jr. Web Designer

I am Jr. Web Designer at Yudiz Solutions Pvt. Ltd. - a leading web, mobile apps and Game development company. Designing has always been my passion which makes it obvious that I chose my career in web designing. I like to share my experiences and challenges that I face through writing blogs.

Comments are closed.

Top