foundation-sites
Version:
The most advanced responsive front-end framework in the world.
153 lines (113 loc) • 3.61 kB
HTML
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../assets/css/foundation-flex.css" rel="stylesheet" />
<style>
.button-group {
max-width: 1170px;
margin: 0 auto;
}
</style>
</head>
<body>
<h2>Flex Button Group</h2>
<hr>
<p>This button-group wrapped in the grid should be left aligned and auto button size</p>
<div class="row column">
<div class="button-group">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
</div>
<p>Should be same as:</p>
<div class="button-group">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
<hr>
<p class="text-right">This button-group wrapped in the grid should be right aligned and auto button size</p>
<div class="row column">
<div class="button-group align-right">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
</div>
<p class="text-right">Should be same as:</p>
<div class="button-group align-right">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
<hr>
<p>This button-group wrapped in the grid should be expanded</p>
<div class="row column">
<div class="button-group expanded">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
</div>
<p>Should be same as:</p>
<div class="button-group expanded">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
<hr>
<p>This button-group wrapped in the grid should be align-justify</p>
<div class="row column">
<div class="button-group align-justify">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
</div>
<p>Should be same as:</p>
<div class="button-group align-justify">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
<hr>
<p>This button-group wrapped in the grid should be align-spaced</p>
<div class="row column">
<div class="button-group align-spaced">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
</div>
<p>Should be same as:</p>
<div class="button-group align-spaced">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
<hr>
<p>This button-group wrapped in the grid should be align-center</p>
<div class="row column">
<div class="button-group align-center">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
</div>
<p>Should be same as:</p>
<div class="button-group align-center">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>