Our visibility classes work the same as they do in Foundation for Sites, allowing you to easily define when content is shown or hidden on various screen sizes. Add the class show-for-[size]
to display an element on that size of screen and larger.
Add the class show-for-[size]-only
to display an element only at that screen size, not on any larger or smaller screens.
To hide elements at certain screen sizes, use the classes hide-for-[size]
and hide-for-[size]-only
You are on a small or larger device.
You are on a medium or larger device.
You are on a large or larger device.
You are on a small device.
You are on a medium device.
You are on a large device.
You are in a landscape orientation.
You are in a portrait orientation.
You are on a small or larger device.
You are on a medium or larger device.
You are on a large or larger device.
You are on a small device.
You are on a medium device.
You are on a large device.
You are on a landscape device.
You are on a portrait device.
These classes are also available as mixins, if you'd rather not add these classes to your markup.
Quickly align text with our text alignment classes.
Basic left-hand text
Saucy right-hand text
Sassy centered text
Rachet justified text
Basic left-hand text
Saucy right-hand text
Sassy centered text
Rachet justified text. Why's that text so justified, anyways? Why does it just stretch to the sides of the container?
These classes also come in responsive flavors, meaning you can shift text alignment on different screen sizes.
This text is left-aligned on small screens, and center-aligned on medium screens and larger.
This text is left-aligned on small screens, and center-aligned on medium screens and larger. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, doloribus, sapiente. Quas aliquam, ea eaque. Earum nostrum laboriosam, quidem iusto sint! Quisquam voluptatem atque, corporis sapiente doloremque laborum fugiat dolores.
Using the magic of flexbox, we can vertically align a series of items in a row. We took these vertical alignment features and wrote a series of CSS classes to leverage them.
To start, create a container that will hold each item.
By default, each item will align to the top of the container. Add the classes align-top
, align-center
, or align-bottom
to individual elements in the container to change their alignment.
These classes also come in responsive flavors, allowing you to change the alignment on different screen sizes. In the below example, the left box is top-aligned by default, and switches to center-aligned on medium-sized screens and larger.
Float an element to the left or right using our float classes.
If you have a container with only floated elements, add the clearfix class to ensure it has a proper height.
You can create thumbnails by adding a thumbnail
class to an <img>
element like so:
You can use the thumbnails
class in a <ul>
to affect all the images in it.
You can create a basic close button for components like panel and modal with this markup.
The close button automatically positions itself in the top-right corner of its parent. You can also add the zf-close
directive to make it functional.
The close button automatically positions itself in the top-right corner of its parent. You can also add the zf-close
directive to make it functional.