Advertisement

Foundation for Beginners: Buttons and Dropdowns

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →
This post is part of a series called Foundation for Beginners.
How to Customize the Foundation 4 Top Bar
Foundation for Beginners: Custom Forms and Switches

In this part of "Foundation for Beginners" we’ll look at buttons, dropdowns and the "Clearing" plugin.

foundation-5-1

Buttons

Foundation has a solid set of buttons and they are very easy to implement. Simply add a class of ‘button’ to any anchor, input, div or button element to see it transform into a glorious Foundation styled button. This just gets you the standard box button, but there are a wide range of button styles and types you can use. Here’s a quick example:

foundation-buttons
<!-- Size Classes -->
<a class="button" href="#">Default Button</a>
<a class="tiny button" href="#">Tiny Button</a>
<a class="small button" href="#">Small Button</a>
<a class="large button" href="#">Large Button</a>

<!-- Color Classes -->
<a class="button secondary" href="#">Secondary Button</a>
<a class="button success" href="#">Success Button</a>
<a class="button alert" href="#">Alert Button</a>

<!-- Radius Classes -->
<a class="button radius" href="#">Radius Button</a>
<a class="button round" href="#">Round Button</a>

<!-- Disabled Class -->
<a class="button disabled" href="#">Disabled Button</a>

This example demonstrates all the preset sizes, styles and states. They each offer quite a lot in the way of flexibility; all presets can be overridden with custom styles meaning you don’t need to build up your buttons from scratch.

Buttons use chained classes to achieve different styles. For instance, start with ‘button’ then add a size, ‘small’, a color, ‘success’ and a radius ‘round’. You could also disable any button by adding ‘disabled’, illustrating just how versatile this styling approach is.


Button Groups

Basic buttons are simple enough to implement and buttons groups are just as easy. They use a simple list structure like so:

<ul class="button-group">
	<li><a class="small button" href="#">Button 1</a></li>
	<li><a class="small button" href="#">Button 2</a></li>
	<li><a class="small button" href="#">Button 3</a></li>
</ul>
foundation-5-3

This will give you a standard group of three buttons, however you can add radius classes and classes to control the width, ‘even-2’, ‘even-3’ right through to ‘even-8’. These width classes are used to fill the available space with your buttons and are used best when the number in the even class matches the amount of buttons present. For example, if you had four buttons then ‘even-4’ would be the best choice.


Button Bars

Button bars could be described as being a group of button groups. Take a div, add class="button-bar" to that div and place as many button groups as you wish inside it. This can be a real help when it comes to more complex button layouts. Here’s an example:

<div class="button-bar">
<ul class="button-group">
	<li><a class="small button" href="#">Button 1</a></li>
	<li><a class="small button" href="#">Button 2</a></li>
	<li><a class="small button" href="#">Button 3</a></li>
</ul>
<ul class="button-group">
	<li><a class="small button" href="#">Button 1</a></li>
	<li><a class="small button" href="#">Button 2</a></li>
	<li><a class="small button" href="#">Button 3</a></li>
</ul>
</div>
foundation-5-7

On small screens, each button group within the bar is stacked automatically, allowing for a clean look on any screen. By taking options covered in each of the above sections you can really go to town on your buttons.


Dropdown Buttons

In the latest major revision of Foundation a new JavaScript plugin called dropdowns was introduced, which really comes in handy when layered on top of buttons. The markup essentially requires you to add a ‘dropdown’ class to your button, with the addition of a custom attribute namely ‘data-dropdown’.

Follow this with an unordered list containing an id matching your data-dropdown attribute, for example:

<a class="button dropdown" href="#" data-dropdown="drop1">Dropdown Button</a>

</pre>
<ul class="f-dropdown" id="drop1">
	<li><a href="#">This is a link</a></li>
	<li><a href="#">This is another</a></li>
	<li><a href="#">Yet another</a></li>
</ul>

It’s also important to note that the ‘f-dropdown’ class on the ul is very important so don’t forget to add it.

Note: Don't forget to include the dropdown js in your download of Foundation.

foundation-5-4

Split Buttons

The final layer of flexibility you have to play with is the option to add a split in your buttons. This can be used to indicate the availability of a dropdown, a download, whatever you want really. Add it onto your button using the ‘split’ class and a span element that should include the same ‘data-dropdown’ attribute we used earlier in our dropdown example.

<a class="button dropdown" href="#" data-dropdown="drop1">Dropdown Button </a>

</pre>
<ul class="f-dropdown" id="drop1" data-dropdown-content="">
	<li><a href="#">This is a link</a></li>
	<li><a href="#">This is another</a></li>
	<li><a href="#">Yet another</a></li>
</ul>
<pre>
foundation-5-5

As the dropdown JavaScript is a simple plugin, there is only one option to play with - defining the class name applied to the dropdown when open:

$(document).foundation('dropdown', {
  activeClass: 'open'
});

Clearing Plugin

Clearing makes it easy to create responsive lightboxes with any size image.

Clearing is a super fast lightbox plugin. As you can imagine, markup is dead simple and is very useful when the orbit slider isn’t working for you.

By now you’ll be very familiar with the way Foundation works with list structures, and they're once again at the heart of this plugin. Build an unordered list, with some content within each list item. Add a ‘clearing-thumbs’ class to the ul, plus an empty custom attribute of ‘data-clearing’.

</pre>
<ul class="clearing-thumbs" data-clearing="">
	<li><a href="path/to/your/img"><img alt="" src="path/to/your/img-th" /></a></li>
	<li><a href="path/to/your/img"><img alt="" src="path/to/your/img-th" /></a></li>
	<li><a href="path/to/your/img"><img alt="" src="path/to/your/img-th" /></a></li>
</ul>
<pre>
foundation-5-6

If you were to add a ‘clearing-feature’ class to the first li in your ul structure then Foundation would display it as the featured image in your lightbox selection. It’s worth noting that clearing uses the block grid structure we covered earlier in the series. This helps ensure all thumbnails are the same height and evenly distributed.


Conclusion

Following our complete coverage of buttons and dropdowns, we can look forward to covering custom forms and switches. I'll see you there!

Advertisement