Leaframe Page Example

Bonjour, voici une page de présentation du FrameWork "Leaframe", réalisé par Curtis Pelissier. Il s'agit d'un framework less CSS et Javascript, réalisé avec jQuery (nécéssaire pour fonctionner). Leaframe est responsive, il peut donc s'adapter sur mobile. Il s'agit là de la version 0.7 du framework, ce n'est donc pas le rendu final qui est présenté sur cette page.

Patch Note version 0.7

Voici les informations concernant la dernière mise à jour, la version 0.7 :

  • Correction des couleurs des boutons
  • Ajout de la "normal" color grise
  • Correction du débordement des tab-panel
  • Correction des link dans les listes, passage à 100%
  • Correction des messages: font-weight, hX, p, a.close et padding
  • Ajout des Progress-bar

Patch Note version 0.6

Voici les informations concernant la mise à jour de la version 0.6 :

  • Ajout du responsive grid
  • Ajout du presentation block
  • Modification design button
  • Modification des ranges-x

Patch Note version 0.5

Voici les informations concernant la mise à jour de la version 0.5 :

  • Ajout des dropdown
  • Ajout des menus horizontaux
  • Modification du theater et thumbnails
  • Modifications des listes

Patch Note version 0.4

Voici les informations concernant la mise à jour de la version 0.4 :

  • Ajout de la pagination
  • Ajout du fil d'arianne (breadcrumb)
  • Correction de l'accordeon
  • Modification CSS sur le margin des <li>

Remarque: l'accordéon avait quelques soucis de fluidité, j'ai donc appliqué une legère correction. Je pense que l'accordéon est un élément qui sera souvent retouché dans les futures mises à jour. Dans la prochaine mise à jour, je m'occuperai du théâtre qui n'est pas réellement fini.

  • Info
  • Patch Note 0.7
  • Patch Note 0.6
  • Patch Note 0.5
  • Patch Note 0.4

Typography of Leaframe

Voici une balise h1

Voici une balise h2

Voici une balise h3

Voici une balise h4

Voici une balise h5
Voici une balise h6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, repellendus sit nulla officia animi necessitatibus numquam repudiandae suscipit, reiciendis? Doloremque ullam nam consectetur eligendi repellendus dolore dignissimos, vel porro numquam?

Buttons 0.6

Code

Les classes peuvent s'accumuler: une classe par option. S'il n'y a pas de classe, le bouton prend la forme normale.

                                                      
<button class="[success|error|info|warning]"></button>
<button class="[tiny|small|fat]">Taille</button>
<button class="[rounded|round]">Border Radius</button>
                        
                    

Labels

This is a header title and a label

This is a header title and a label

This is a header title and a label

This is a header title and a label
This is a header title and a label

This is a long text and an error label

This is a long text and a success label

This is a long text and an info label

This is a long text and a warning label

Code
                            
<span class="label [success|error|info|warning]">label</span>
                            
                        

Columns 0.6

Show on large : 7

Show on medium : 3

Show on small : 12

3

3

4

1

3

4

1

3

4

Code
                                
<div class="row">
    <div class="col [l-m-s]-range-[0-12]"></div>
</div>
                                
                            
Code
                                
<nav> 
    <ul> 
        <li><a class="title">Menu</a></li> 
        <li class="[left|right]" data-drop="drop-menu"> 
            <a href="#" class="link-menu ref">Link Drop</a> 
            <div id="drop-menu" class="drop"> 
                <ul> 
                    <li><a>Link 1</a></li> 
                    <li><a>Link 2</a></li> 
                    <li><a>Link 3</a></li> 
                </ul> 
            </div> 
        </li> 
        <li><a class="button info rounded">Button nav link</a></li> 
    </ul> 
</nav>
                                
                            
Code
                                
<ul class="pagination [rounded]">
    <li class="active"><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    ... 
</ul>
                                
                            
Code
                                
<div class="breadcrumbs [directory|arrow] [rounded]"> 
    <ul> 
        <li><a>Accueil</a></li>
        ...
    </ul>
</div>
                                
                            

Progress Bar

Success progress bar
Error rounded fat progress bar
Info round tiny progress bar
Warning small stripped progress bar
Code
                                
<div class="progress-bar [success|error|info|warning] [stripped] [tiny|small|fat]"> 
    <span class="progress-value" [style="width: [0-100]%"]></span>
</div>
                                
                            
Code

S'il n'y a pas de classe, l'élément prendra la classe de base.

                                
<ul class="[classic|beauty]"> 
    <li><a href="#">Link</a></li> 
    ... 
</ul>
                                
                            

Leaframe Form

Classic Form

With Informations 0.2

Code
                                    
<label class="input-label"> 
    <span class="info-label">Votre adresse email</span> 
    <input type="email" /> 
</label>
                                     
                                

Presentation Block 0.6

Remarque

Remarque

Remarque

Chrome Special Scrollbar 0.3

Une fonctionnalité esthétique de Leaframe est la possibilité d'ajouter une scrollbar spéciale mais uniquement sur Google Chrome. Si vous êtes sur ce dernier navigateur, vous pouvez voir à droite qu'il s'agit d'une scrollbar personnalisé et non de la classique. Pour l'utiliser il faut mettre la classe "lf-scrollbar" dans la balise ‹html›.

Code
                                
<html class="lf-scrollbar">
                                
                            

Messages 0.7

Ceci est l'alerte d'un succès ! ×
Ceci est l'alerte rounded d'une erreur ! ×
Ceci est une alerte round d'une info ! ×

Attention !

Vous êtes dans un message warning

×
Code
                                        
<div class="message [success|error|info|warning]">
    Ceci est l'alerte d'un succès
    <a class="close">×</a>
</div>
                                        
                                    

Tables

Classic Table

Id Pseudo Nom Prénom
1 Rewar Pelissier Curtis
2 Norberh Norber Chris
3 ActionMan Bidule Machin
4 Daft Punk Bangalter Thomas

Leaframe Table

Id Pseudo Nom Prénom
1 Rewar Pelissier Curtis
2 Norberh Norber Chris
3 ActionMan Bidule Machin
4 Daft Punk Bangalter Thomas
Code

S'il n'y a pas de classe, le tableau sera classique.

                                
<table class="dif"> 
    <thead>...</thead> 
    <tbody>...</tbody> 
</table>
                                
                            

Tabs 0.7

Tabs Top Panels

  • Tab 1
  • Tab 2
  • Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur suscipit, doloribus, nihil nobis corrupti tenetur fuga, voluptates esse perspiciatis repellat autem natus perferendis modi labore. Unde aut id vero reiciendis.

Yolo

Wheeeeeee !

Tabs Left Panels

  • Tab 1
  • Tab 2
  • Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur suscipit, doloribus, nihil nobis corrupti tenetur fuga, voluptates esse perspiciatis repellat autem natus perferendis modi labore. Unde aut id vero reiciendis.

This is a little second tab

Wheeeeeee !

Tabs Right Panels

  • Tab 1
  • Tab 2
  • Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur suscipit, doloribus, nihil nobis corrupti tenetur fuga, voluptates esse perspiciatis repellat autem natus perferendis modi labore. Unde aut id vero reiciendis.

This is a little second tab

Wheeeeeee !

Tabs Bottom Panels

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur suscipit, doloribus, nihil nobis corrupti tenetur fuga, voluptates esse perspiciatis repellat autem natus perferendis modi labore. Unde aut id vero reiciendis.

This is a little second tab

Wheeeeeee !

  • Tab 1
  • Tab 2
  • Tab 3
Code
                                
<div class="tabs to-[top|bottom|left|right]">
    <div class="tab-panel">
        <ul>
            <li show="content-1" class="active">Tab 1</li>
            <li show="content-2">Tab 2</li>
            <li show="content-3">Tab 3</li>
        </ul>
    </div>
    <div class="tab-content">
        <div class="content active" id="content-1">...</div>
        <div class="content" id="content-2">... </div> 
        <div class="content" id="content-3">...</div> 
    </div> 
</div>
                                
                            

Accordeon 0.4

Normal Section

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, repellendus sit nulla officia animi necessitatibus numquam repudiandae suscipit, reiciendis? Doloremque ullam nam consectetur eligendi repellendus dolore dignissimos, vel porro numquam?

Rounded Section

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, repellendus sit nulla officia animi necessitatibus numquam repudiandae suscipit, reiciendis? Doloremque ullam nam consectetur eligendi repellendus dolore dignissimos, vel porro numquam?

Round Section

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, repellendus sit nulla officia animi necessitatibus numquam repudiandae suscipit, reiciendis? Doloremque ullam nam consectetur eligendi repellendus dolore dignissimos, vel porro numquam?

Another Section

RIP RW. Now, you're a dead poet.

Code
                                
<div class="accordeon">
    <div class="ac-section [rounded|round] [active]">
        <div class="ac-head">Section</div>
        <div class="ac-body">...</div>
    </div>
</div>
                                
                            
Code
                                
<button class="dropdown button" data-dropdown="drop-target">Dropdown</button> 
<ul class="dropdown-content" id="drop-target"> 
    <li><a href="#">Ceci est le lien numéro 1</a></li> 
    <li><a href="#">Ceci est le lien numéro 2</a></li> 
    <li><a href="#">Ceci est le lien numéro 3</a></li> 
</ul> 
                                
                            

Modals

Code

La valeur mise dans l'attribut "modal" doit être l'id de la modal à afficher.

                                
<button modal="modal-id">Click to Open a Normal Modal</button>
<div id="modal-id" class="modal">
    <a class="close">×</a>
    ...
</div>
                                
                            

Theater

Le théâtre est une fonctionnalité de Leaframe qui permet de visionner une galerie donnée. Cliquez sur une des images pour voir s'ouvrir le théâtre. Une fois ouvert appuyez sur Echap ou cliquez sur la croix en haut à droite pour fermer le théâtre.

  • img-theater exemple
  • img-theater exemple
  • img-theater exemple
  • img-theater exemple
  • img-theater exemple
Code
 
                             
<ul data-theater="theater-example">
    <li class="block-img">
        <img alt="Alt" title="Title" src="/url/to/img" />
    </li>
</ul>
                             
                        

Affix

L'affix est une fonctionnalité de Leaframe qui permet de position un élement de telle sorte à ce qu'il soit toujours visible à l'écran. Vous avez un exemple avec le menu de droite.

Code

L'attribut "decal-top" permet de faire un margin-top sur l'affix. Optionnellement, l'affix peut aussi avoir comme classe rounded ou round.

                            
<div class="affix affix-block" [data-decal-top="X"]> 
    ... 
</div>