Bootstrap and Foundation are two of my favorite front-end frameworks, especially on prototypes for fast-developing websites. They all provide ready-to-use components, speeding up my workflow. Except for some small differences, most of their basic characteristics seem to me to be similar.
In this article, I will introduce the basic construction of their grids. First, I'll show you how they are built, describe their main components, and how they show differences to the size of different screens. I will then help you add knowledge through a real-life example practice.
Let's start together!
Comparison 1: Comparison of media queries
Before analyzing the raster structures of Bootstrap and Foundation, let's take a look at the breakpoints they provide for the response layout. This is what each frame provides to set the number of available rasters.
Bootstrap specifies 4 px-based media query breakpoints. Displayed as follows:
Foundation contains 5 em-based media queries. They are shown in the following table:
To give you a way to understand how media queries work, I suggest you check out Bootstrap's demo and related Foundation demos. But if you're still confused, the next part will explain everything.
Note: Foundation's mesh and super large screens are disabled by default. If you want to use them, you must "cancel" and set the values of the two variables $include-xl-html-grid-classes and $include-xl-html-block-grid-classes to true. You can find these variables in the _settings.scss section.
Comparison 2: Grid structure
Both Bootstrap and Foundation provide a moving first 12-column grid consisting of rows and columns. Columns are nested in rows. The sum of the columns in each row is 12 columns. Rows can also be nested in columns.
These two frameworks contain many predefined classes that you can use to set the size of a column. As mentioned above, Bootstrap contains 4 media query breakpoints and Foundation contains 5. For each grid, they have different class prefixes that can be used to set the column size (see the two tables above).
Bootstrap grid lines also require encapsulated elements. This should have a container or container-fluid class. The container class in an element has a fixed value, and its value depends on the window (see the first table above), while the container-fluid class in an element extends to the entire width of the browser window.
Comparison 3: Column!=12?
It is possible that the number of columns in a grid system does not equal to 12. In this case, Bootstrap will float the last column to the left, and Foundation will float it to the right. If you want to override the default behavior of Foundation, add the .end class in the last column.
Comparison 4: Functional Class
Both frameworks provide additional classes that allow you to define their mesh very flexibly.
Visible classes allow you to choose to show or hide content on screens of a specific size. The offset class allows you to center incomplete columns or adjust the spacing between them. Of course there are other classes that can specify the order of columns according to different devices.
Comparison Five: Grid Blocks
In addition to the default grid, Foundation supports another raster feature, namely grid blocks. It allows you to create columns of the same size with the smallest mark. To use it, define the row as the ul element and the columns in the row as the li element. Then specify the size of the column by applying the relevant class to the ul element (see the second table above for details).
At this time, you may wonder, what is the difference between a regular grid and a grid block? Let's take a brief look at the two differences between them:
Unlike the default grid, (grid blocks) each row has a maximum width applied, so the entire browser window is always covered.
Mesh blocks can only be used in projects of equal size.
Using the grid
Now that we have a good understanding of the grids of these two frameworks, let's see how we can use them to create a Bootstrap page and the corresponding Foundation page.
The following screenshot shows the first layout we are going to build:
Starting with Bootstrap, we define an element with the container class. As discussed earlier, this class will set a fixed width for this element according to the size of the screen (see the table in Bootstrap for details). Then, we add an element with the class row to it.
Now we are ready to set up our columns. For large screens, we want 4 columns of the same size. So we define 4 div elements each with col-lg-3 class. However, for small and medium-sized devices we prefer to have two columns in each row. For this reason, we use the col-sm-6 class. Finally, for the ultra-small screen we want the columns to be stacked. This is the default behavior of moving the first framework, so there is no need to define the col-xs-12 class.
Its HTML looks like this:
<div> <div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <!-- content --> </div> </div></div>
Let's continue to look at Foundation.
The mesh of Foundation is very similar to the mesh of Bootstrap, but it is a little simpler. First, we have to define an element with the row class, which will contain our columns. This class sets the element's max-width to 62.5rem (1000px). Next, we add the column. To achieve this, we specify that each div element has a column or columns class, and then use the corresponding raster class (see the table in Foundation above for details) to set their width. Similarly, for small devices, we do not need to define the small-12 class.
This is HTML based on Foundation raster :
<div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <!-- content --> </div></div>
At this moment, I think you have begun to become more familiar with the grid system of these two frameworks. But perhaps another example can help you understand more clearly.
In the next example, we will build footer. The following diagram shows the style we want:
Here, we will choose a different layout to compare with the previous example. For screens with a mid-screen and above (or screens with a small screen and above in the Bootstrap grid), we want to display three columns. However, we noticed that there is a nested row in the last column. This consists of two columns. We will set their width to half of the row width in all devices. Finally, we adjust the visibility of the images that appear in the nested rows.
Here is the code in Bootstrap:
<div> <div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <div> <a href="#"> <p>Let's meet and discussion</p> <i></i> </a> </div><!-- .col-xs-6 --> <div> <!-- content --> </div> </div><!-- .row --> </div><!-- .col-sm-4 --> </div><!-- .row --></div><!-- .container -->
Here is the code for Foundation:
<div> <div> <!-- content --> </div> <div> <!-- content --> </div> <div> <ul> <li> <a href="#"> <p>Let's meet and discussion</p> <i></i> </a> </li> <li> <!-- content --> </li> </ul> </div><!-- .medium-4 .columns --></div><!-- .row -->
Note: If you want to replace mesh blocks, we can use Foundation's default mesh to create nested rows.
in conclusion
If you want more information about Bootstrap grid system, you can check out this article: "Bootstrap must learn about every day (Layout)"
Finally, in this article, I introduce the mesh structure of Bootstrap and Foundation. Then we saw in a real project how to use their grids. As you can see, all grids are similar and can be further defined.
I hope you like this article. Maybe you can apply what you have learned to your project. For more Bootstrap content, please follow: "Bootstrap Learning Tutorial", thank you for reading.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.