With Foundation you can improve your site design in many ways. This framework can help you comply with the principles of modern design, such as mobile approach, semantic markup and responsive design.
Zurb Foundation 5 is one of the strongest front-end frameworks on the market. It’s easy to use and it’s completely free. Allows you to use a flexible CSS grid and provide a clean, user-friendly design. This framework has been tested extensively, so it is compatible with various browsers.
In this article, we’ll tell you how you can build a fantastic website with the Zurb Foundation 5. A site that is responsive and suitable for mobile is user friendly and meaningful.
The steps in working with Foundation 5 are as follows:
- Download Foundation 5
- Understanding the Grid Concept
- When you use Larde-N, Medium-N, and Small-N classes.
- Add the top menu bar
- Create the original part
- Add a panel for popular posts
- Add 3 more posts to the public panel
- Advance CSS
- Add more content
- Add layout
- Create sidebar bar
- Newsletter form
- Flex Video
- Sidebar menu
- end of the work
1- Download Foundation 5
You can download Foundation 5 in 4 different formats:
- Full code
- A lighter version with only the essential code
- A customized version that you can customize what you need
- A version of Sass, if you want to set variables and mixins in SCSS
In this article, I chose the full CSS code. Of course you can choose any other version if you want to create your own simple site using what you really need.
After downloading the zip file, if you open the index.html file in your browser, you will see something like this:
You can do this with this method and create a new file as your prototype home.html or something like that, but you do not need to keep it because you can add folders at any time. Access the Foundation.
Open the index.html file in your favorite code editor and delete everything in the <body> section before the <script> tag.
Type <title> in the <head> section to change whatever you want. I change it to Foundation 5 Recipes.
2. Understanding Grid
By default, Foundation 5 splits the page into rows and columns. The rows are marked with the CSS class ” row “, and the columns are marked with “CSS columns “.
All CSS selectors in the Foundation have very simple names. Foundation 5 has three different grades:
- One for a mobile display: Small Grid.
- One for tablets: Medium Grid.
- And another for the desktop: the big grid (Large Grid).
There are two breakpoints between small, medium, and large grains across the screen of 641 pixels and 1025 pixels:
- The small tag is between 0 and 640px.
- The average grade is between 641 and 1024px.
- And the bigger grid is above 1025px.
All of these 3 networks are by default 12 parallel columns. Why are 12 columns? Because it can be divided into 2, 3, 4, and 6, this allows many layout options to be possible.
If you choose “Custom Download” in step 1, you can choose another column for more complex designs, but for this example we use the default of 12.
Our layout will be as follows: In cell and tablet sizes, there will be a large column without the sidebar and there will be a right sidebar on the desktop. Below you can see a screenshot of the planned desktop layout with some bogus content.
The most important thing to keep in mind is to create a good looking network.
You must first add a row. When you create a row, you need to add the columns inside the row. The total number of columns should be 12. If the columns are more or less than 12, the grid will not work.
In our desktop, we add 8 columns to the original content on the left and 4 columns on the left sidebar.
Let’s see how the code is written. You can first see a <div> class row. To divide the design into two strips, we need to place the entire page in a row. Later we can add more rows to it. As such, rows and columns can be divided indefinitely into Foundation 5.
Within each row you will need to put columns that are divided into 12 numbers. Columns are marked with “classes” and “large-n”, “medium-n” or “small-n” classes.
<div class = "row"> <div class = "large-8 columns"> <p> Some content for the Main Div </ p> </ div> <aside class = "large-4 columns"> <p> Some content for the Sidebar </ p> </ aide> </ div>
When do you use “large-n”, “medium-n” or “small-n” classes?
Now, you’re sure to ask why we just used the “large-8” and “large-4” classes and did not set anything for small and medium networks. Our design has a sidebar, and if you remember, there’s a sidebar just on the desktop that is displayed by the big grid. On the phone and tablet there is only one column per page.
The foundation works in the following way: You just have to set the smallest network that you want to use for a specific layout.
To better understand this concept, if you change your browser window, you can test the above code. In the mobile and tablet sizes, you can see the sidebar below the main section.
Now change the classes “large-8” and “large-4” to “medium-8” and “medium-4” classes. You will see that the site has a sidebar on both the size of the tablet and the desktop, but not on the mobile phone.
Just change the classes to “small-8” and “small-4” just for fun. In this case, the sidebar appears on all sizes even on the mobile.
As Foundation 5 is considered with the first-mobile development approach (mobile-first), you should always make cheap web design for the mobile display . Because larger scales in the foundation inherit the rules of the smaller network style, smaller networks than the larger ones do not inherit the style.
Therefore, the medium and large network inherits from the small, and inherits large from the medium, but it is not true on the contrary.