#FOUNDATION RESPONSIVE COLUMNS HOW TO#
#FOUNDATION RESPONSIVE COLUMNS FULL#

Setting the margin to “0 auto” assures us that there will be no margin above or below the divs, but if the screen is wider than 1200px, the horizontal margins will be equal, which will center the div.

wrap divs will simply fill the entire width of the screen. On any device smaller than 1200px wide, the. wrap divs get a max-width of 1200px so on really large screens they don’t get too spread out. Now that we can see what we’re working with, we’ll set up the structure. First let’s add a little bit of color so we can tell the difference between the #header, #main, and #footer divs. We can simply use a fluid width layout that will account for all devices. For a single column layout we don’t need media queries. Actually, we’ll only start doing that once we add more columns to our layout.

#FOUNDATION RESPONSIVE COLUMNS FULL#

*/įollowing the mobile first development philosophy, we’ll start with mobile styles and then add styles for tablets and then the full desktop styles using media queries. We just need to set all elements to use the “border-box” box model, remove the top margin from all elements, and remove all margin/padding from a few specific elements. We don’t need much of a reset for what we’re doing here. In future tutorials we will include #secondary and #tertiary divs to hold the sidebars. Also note the #primary div that will hold the actual page content. That’s about all we need to understand for now. As you can see, there is a #page div that contains the #header, #main, and #footer divs. I’ve tried to keep everything as simple and familiar as possible, while at the same time allowing for (almost) any layout to be achieved. This is very similar to the structure of the _s theme by Automattic as well as the Genesis Framework and the upcoming StartBox theme.

#FOUNDATION RESPONSIVE COLUMNS HOW TO#

For examples of how to handle menus in responsive design, I would suggest taking a look at the mo.js project.īefore I write about the CSS, I want to show a simplified version of HTML that is displayed by the Solum theme. I will not be including menus in these tutorials.Solum doesn’t contain any layout markup, so it gives a clean starting point. The HTML structure will be coming from the Solum starter theme I released last week.There are just a few things I want to mention before getting started: It’s pretty simple, but I’ll move on to more complex layouts in the next posts. In this post, I will be covering how to easily put together a single column layout. This is the first in a series of posts detailing how to setup basic responsive page structures using CSS.

Foundation responsive columns