Zurb Foundation Classes: A Comprehensive Guide to Building Websites

Zurb Foundation Classes are a set of pre-designed CSS classes that make it easy to build responsive websites. They provide a solid foundation for your website's layout and design.

With over 50 classes to choose from, Zurb Foundation Classes offer a wide range of options for building complex layouts. This includes classes for setting up grid systems, creating navigation menus, and even adding interactive elements.

One of the key benefits of using Zurb Foundation Classes is that they save you a lot of time and effort. By using pre-designed classes, you can focus on the content and functionality of your website, rather than spending hours coding from scratch.

Zurb Foundation Classes are designed to be highly customizable, allowing you to tailor the look and feel of your website to suit your needs.

Layout is where the magic happens in Zurb Foundation classes. You can create a grid-layout with child elements that appear in rows of $n number of items, where $n is a number that you specify.

To control the number of elements per row, you can use the $n parameter in the grid-layout mixin. For example, if you want 3 items per row, you would use $n: 3.

You can also use the flex-grid-layout mixin to create a block grid for a flex grid row. This mixin accepts a $n parameter, which specifies the number of columns to display on each row.

Here's a summary of the layout options:

In addition to these mixins, you can also use classes to control the layout of your columns. For example, you can use the .small-centered class to center your columns on small screens.

When building a layout, it's essential to consider the most efficient way to structure your content. You can save some markup by combining the .row and .column classes together on the same element. This is known as a combined column/row.

This approach allows you to nest more grids inside this container like usual. For example, you can use the .small-8 class for column rows, but only when used as a top-level container. This means you can't use it when nested inside another row.

This technique can be particularly useful when you need to create a simple layout with minimal markup. By combining classes, you can achieve the same visual effect with less code.

The flex column can be created using the flex-grid-column mixin. This mixin calculates the flex property for a flex grid column, and it accepts all the same values as the basic grid-column() function, including the width of the column.

The width of the column can be set using the $columns parameter, which can be a mixed value. By default, the column will stretch to the full width of its container, but this can be overridden with sizing classes or by using the unstack class on the parent flex row.

If you want to set a specific width for your column, you can use the flex-grid-column mixin and specify the width using the $columns parameter. For example, you can set the width to 50% by using the value '50'.

Here is a list of possible values for the $columns parameter:

By using the flex-grid-column mixin, you can easily create a flex column with a specific width and style it according to your needs.

Position Fixed Bottom is a layout property that allows you to pin an element to the bottom of its parent container.

It's a simple yet powerful tool that can be used to create a variety of effects, such as sticky footers or persistent call-to-actions.

By setting the position to fixed bottom, you can ensure that your element remains visible even when the user scrolls through the content.

This is particularly useful for footers that need to stay at the bottom of the page, even when the content is longer than the screen height.

In the example of the footer layout, a fixed bottom position was used to keep the footer at the bottom of the page.

Max Width 100 is a CSS property that sets the maximum width of an element to 100 pixels. This can be useful for ensuring that a layout element doesn't exceed a certain width.

Setting max-width to 100 can be particularly helpful when working with images, as it prevents them from becoming too large and disrupting the layout.

For instance, if you're using an image as a background, setting max-width to 100 can help keep the image from overwhelming the content.

You can shift columns around between breakpoints using source ordering classes. These classes allow you to easily rearrange the layout of your content as the screen size changes.

To shift columns, use the prefix push/pull with the size of the device you want to apply the styles to. For example, .medium-push-# or .large-push-# is the syntax you'll use.

You can also use the number 0 to reset a push/pull, which is useful if you want to cancel out a previous setting. This is done by using classes like .medium-push-0 or .large-pull-0.

Custom Block Grids are incredibly useful for creating complex layouts with ease. You can use the grid-layout() mixin to create your own block grid, and it takes only three parameters: the number of columns, the child element selector, and the padding value.

To use this mixin, simply call it and pass in the required parameters. For example, grid-layout(4, .column, 2) will generate a block grid with 4 columns, using the .column selector, and a padding value of 2 rem.

The mixin is extremely flexible and allows you to customize the padding value to your heart's content. You can either use the values from the $grid-column-gutter map, which generates different paddings at different breakpoints, or supply a numeric value to output a static rem value.

Incomplete rows can be a challenge in layout design, especially when dealing with different browsers' rounding behaviors.

Foundation's solution is to float the last column in a row to the right, so the edge aligns. This ensures a consistent look across various browsers.

However, this behavior can be overridden by tagging the last column with a class of .end. This simple step can help you maintain control over your layout.

Alternatively, you can set the $grid-column-align-edge variable to false to turn off this behavior entirely. This gives you more flexibility in your design process.

The Grid System is a powerful tool in Zurb Foundation classes, allowing you to create flexible and responsive layouts. A row can be made completely fluid by adding the .expanded class.

You can also use the flex-grid-row mixin to create a container for a flex grid row, which accepts parameters such as $behavior, $size, $columns, $base, $wrap, $gutters, and more.

Here are some key parameters of the flex-grid-row mixin:

The grid gutter is responsive and becomes larger on larger screens, with default sizes of 20px for small screens and 30px for medium screens.

In the grid system, a fluid row is a game-changer for responsive designs.

You can make a row completely fluid by adding the .expanded class.

A fluid row takes up the full width of its parent container, making it perfect for layouts that need to adapt to different screen sizes.

For example, if you have a row that's normally 1200 pixels wide, adding the .expanded class will make it take up the full width of the container.

Fluid rows are especially useful for layouts that need to be flexible and adaptable.

Column Gutter is a crucial aspect of the Grid System. It's the space between two columns in a row, and the space between the edge of a grid and the edge of the page.

The Grid System's Column Gutter is responsive, meaning it becomes larger on larger screens. On small screens, the gutter size is 20px, while on medium screens, it's 30px.

You can change these defaults by editing the $grid-column-gutter variable map in the Sass version of Foundation. To add more gutter definitions, simply add new lines to the map.

The Grid System's Column Gutter can be customized using the grid-column-gutter() function. This function accepts multiple values, including numbers and keywords.

Here's a breakdown of the Grid System's Column Gutter parameters:

You can also use the grid-column-row() function to create a grid column row, which is equivalent to adding .row and .column to the same element. This function accepts a $gutters parameter, which controls the width of the gutters on either side of the column row.

Column-Offset is a key feature in our Grid System that allows you to offset columns to the right by a specified number of columns. This can be achieved using the grid-column-offset property, which takes a value of $n, where $n can be a number or a list.

You can pass in any value accepted by the grid-column() mixin, such as 6, 50%, or 1 of 2. This means you have flexibility in how you specify the offset width.

Offsets work identically to the float grid, by applying margin-left to a column. This is a clever way to create space between columns without having to manually add margins.

To use offsets, you can apply classes like .large-offset-1 and .small-offset-3 to move blocks up to 11 columns to the right. This is a convenient way to create a grid layout with consistent spacing.

Here are some examples of values you can use for grid-column-offset:

Automatic Stacking is a game-changer for designing responsive layouts. It allows you to stack columns in a row by default and then unstack them on larger screen sizes. This behavior is achieved through the use of shorthand classes.

The .[size]-unstack classes are your best friends when it comes to automatic stacking. They're designed to stack all columns in the row by default and then unstack them on a larger screen size, making each one equal-width.

Responsive design is a crucial aspect of Zurb Foundation classes, and it's surprisingly easy to work with.

To make columns stack on smaller screens, add the class .small-12 manually. This allows the columns to adjust their size and layout based on the screen size.

Responsive breakpoints are disabled by default, but you can easily enable them by setting $global-prototype-breakpoints to true. This will make the responsive classes work for all prototype helpers.

To switch back to the expand behavior from a percentage or shrink behavior, use the classes .medium-expand or .large-expand. This will make the columns become even-width on larger screens.

You can also customise responsive breakpoints for specific prototype helpers, such as text transformation classes, by setting the corresponding variable to true. For example, setting $prototype-transformation-breakpoints to true will enable responsive breakpoints for text transformation classes.

Alignment in Zurb Foundation classes is straightforward. You can align columns just like you would align text in a paragraph.

By default, all columns align to the left, but you can override this with classes like .align-justify or .align-spaced. These classes are shorthands for the justify-content CSS property.

A justified grid evenly distributes space between each column, while a spaced grid evenly distributes space around each column. This means there's always space to the left of the first column and to the right of the last column.

You can also change the default vertical alignment of columns by applying a vertical alignment class to the flex row. Your options are top, middle, bottom, and stretch.

Centered columns can be achieved by adding a class of .small-centered to your column. This will center the column on small screens. You can also center columns on large screens by applying a .large-centered class, which will override the default centering from the .small-centered class. Large columns will inherit small centering by default, but you can use .large-centered to center solely on large screens. To uncenter on large screens, use the .large-uncentered class.

Horizontal alignment is an essential aspect of creating visually appealing grids.

By default, all columns align to the left, but you can override this by adding the .align-[dir] class to the flex row.

You can choose between .align-justify and .align-spaced to evenly distribute the space between each column.

A justified grid (justify-content: space-between) pins the first and last columns to the edge of the grid.

A spaced grid (justify-content: space-around) leaves space to the left of the first column and to the right of the last column.

The horizontal alignment classes are shorthands for the justify-content CSS property.

Vertical alignment is a crucial aspect of designing a flex grid, and it's easier than you think. By default, all columns in a flex grid stretch to be equal height.

You can change this behavior using another set of alignment classes, which allow you to align your content vertically. Your options are top, middle, bottom, and stretch.

Applying a vertical alignment class to the flex row will affect every column directly inside it. This means you can quickly and easily align multiple columns with a single class.

Individual columns can also be aligned vertically using the .align-self-* classes. This is a more precise way to control the alignment of specific columns.

The .align-self-* classes replace the old method of using .align-* classes on columns.