{% extends "skeleton.html" %}

{% block base_content %}
<div class="row">
    <div class="small-12 columns">
        <h2>La guerre des boutons</h2>
        
        <div class="row">
        
            <div class="small-12 columns">
                <h3>Variations de formes</h3>
                <div class="large-4 columns">
                    <a href="" class="button">Standard</a>
                </div>
                <div class="large-4 columns">
                    <a href="" class="button radius">Arrondi léger</a>
                </div>
                <div class="large-4 columns">
                    <a href="" class="button round">Arrondi fort</a>
                </div>
            </div>
            
            <hr>
            <div class="small-12 columns">
                <h3>Variations de tailles</h3>
                <div class="large-4 columns">
                    <a href="" class="button tiny">Minuscule</a>
                </div>
                <div class="large-4 columns">
                    <a href="" class="button small">Petit</a>
                </div>
                <div class="large-4 columns">
                    <a href="" class="button">Standard</a>
                </div>
                <div class="large-4 columns">
                    <a href="" class="button large">Large</a>
                </div>
                <div class="large-4 columns end">
                    <a href="" class="button expand">Étendu</a>
                </div>
            </div>
            
            <hr>
            <div class="small-12 columns">
                <h3>Variations de couleurs</h3>
                <div class="large-4 columns">
                    <a href="" class="button">Standard</a>
                </div>
                <div class="large-4 columns">
                    <a href="" class="button primary">Couleur secondaire</a>
                </div>
                <div class="large-4 columns">
                    <a href="" class="button secondary">Couleur secondaire</a>
                </div>
                <div class="large-4 columns">
                    <a href="" class="button tertiary">Couleur tertiaire</a>
                </div>
                <div class="large-4 columns">
                    <a href="" class="button white">Blanc</a>
                </div>
                <div class="large-4 columns">
                    <a href="" class="button black">Noir</a>
                </div>
                <div class="large-4 columns">
                    <a href="" class="button go">Go</a>
                </div>
            </div>
            
            <hr>
            <div class="small-12 columns">
                <h3>Variations d'ombres</h3>
                <div class="large-4 columns text-center panel" style="background-color:#fff; border-color:#fff;">
                    <a href="" class="button">Standard</a>
                </div>
                <div class="large-4 columns text-center panel" style="background-color:#fff; border-color:#fff;">
                    <a href="" class="button dark-shadow">Sombre</a>
                </div>
                <div class="large-4 columns text-center panel" style="background-color:#363636;">
                    <a href="" class="button light-shadow">Claire</a>
                </div>
            </div>
            
            <hr>
            <div class="small-12 columns">
                <h3>Variations d'icones</h3>
                <div class="large-4 columns">
                    <a href="" class="button">Standard</a>
                </div>
                <div class="large-4 columns">
                    <a href="" class="button icon-android">Android</a>
                </div>
                <div class="large-4 columns">
                    <a href="" class="button icon-youtube">Youtube</a>
                </div>
            </div>
            
            <hr>
            <div class="small-12 columns">
                <h3>Variations de menus</h3>
                <div class="large-4 columns">
                    <a href="" class="button">Standard</a>
                </div>
                <div class="large-4 columns">
                    <a href="#" class="button dropdown" data-dropdown="drop-1">Menu</a>
                    <ul class="f-dropdown" id="drop-1" 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>
                </div>
                <div class="large-4 columns">
                    <a href="#" class="button dropdown" data-dropdown="drop-2">Liste de séléction</a>
                    <ul class="f-dropdown overflow overflow-100" id="drop-2" 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>
                </div>
            </div>
            
        </div>
    </div>
    
</div>
{% endblock %}