![foundation framer zurb foundation framer zurb](https://i.pinimg.com/736x/9c/1b/86/9c1b869f9b22c800419922ebae2b3827.jpg)
#FOUNDATION FRAMER ZURB CODE#
Study this code for a moment, and then move on to the more detailed explanations of each class below. I’ve simplified the template’s code to only include the elements and classes that are necessary for creating the grid. If you view the source for this example template, you’ll see quite a lot of code, much of it not related to creating the grid itself. This is a screenshot of the same HTML template with an orange outline added to the columns class. In this second screenshot, I’ve added a bright orange outline to the columns class to help you see how the page is built. The rest of the page is constructed in a similar fashion, using rows and columns. This single column has the class large-12 because it should span across all 12 columns. Next, the large image in the center of the page is a row with a single column inside.
![foundation framer zurb foundation framer zurb](https://i.ytimg.com/vi/b08cH8t-rOQ/maxresdefault.jpg)
These two classes added together fill all 12 columns inside the header row. The navigation has the class large-9, meaning it should span nine columns. The logo div has the class large-3, which means it should span across three grid columns. Inside the header there’s a div for the logo and a div for the navigation. In the template example, the header is a row. Each group of columns inside a row should generally add up to a total of 12, but there are more advanced features that allow you to bend this rule.
#FOUNDATION FRAMER ZURB SERIES#
Then, a series of columns is nested inside the rows. Each major horizontal section of the site is a row. The grid in Foundation is 12 columns across. This is a screenshot of the HTML template available at GRid Templateīefore I describe each grid class, I’d like you to see the “big picture” by looking at this HTML template from Zurb’s website: Cramming a big layout onto a small screen is much more difficult than starting with a simple mobile layout and working up to complex desktop designs. Multi-column layouts don’t work well on mobile web browsers because they tend to be on small screens that are taller than they are wide.
![foundation framer zurb foundation framer zurb](https://bottomlineconstructionllc.com/wp-ctnt975/site-uploads/2018/05/9565314.jpg)
This might seem counter-intuitive, but it’s a smart workflow. When building websites with Foundation, it’s best to start by thinking about the mobile experience first and then gradually work your way up to desktop sizes. That means that Foundation is designed to work on mobile phones, tablets, and larger displays like laptops and desktops, in that order. This is a simple idea on its own, but Foundation is also a responsive framework that uses a mobile-first approach. Grid Basicsįoundation creates columns and rows by applying CSS classes to HTML elements. If you’re a beginner, I recommend the official Foundation CSS guide, but you can also use Foundation with SASS or integrate Foundation with a web app. The first step is to download Foundation and include it in your project. However, it’s worth learning, because it dramatically reduces the amount of project-specific code that needs to be written. Even if you are familiar, the grid in Zurb Foundation 5 might be a bit overwhelming at first. If you’re totally new to front-end frameworks, I also recommend the course Framework Basics on Treehouse. Most modern websites use a grid to visually organize content into columns and rows, and nearly every front-end framework includes a robust grid system.