SimplonStrap

Téléchargement du Framework SimplonStrap

Pour télécharger le Framework, cliquez sur le bouton ci-dessous.

Download SimplonStrap.css

La Barre de Navigation Flex

Sa construction

Un container doté de la classe .nav pour l'adaptation à n'importe quel type de menu et non uniquement une barre de navigation
On initialise ensuite une liste à puce avec la balise ul comprenant les divers éléments du menu
On crée ensuite les différents liens du menu entre les balises li de la liste à puce
Pour intégrer un sous-menu, utilisez la classe "hid_ul" sur l'ul du sous-menu.

Le responsive

L'adaptabilité du menu est geré par des media queries à definir en fonction de votre design personel
- Sur Desktop :
Les éléments de la liste sont en flex 1.
- Sur Mobile :
L'affichage est en block sur un click de "Menu", les sous-menus sont affichés mais avec un font-size inférieur et des bordures afin de bien les distinguer

Le Html


<nav class="nav" role="navigation">
    <label for="show-menu" class="show-menu">Menu ￬</label>
    <input type="checkbox" id="show-menu" role="button">
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#menu">Navigation</a></li>
        <li>
            <a href="#">Grilles ￬</a>
            <ul class="hid_ul">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li>
        <li><a href="#form">Formulaire</a></li>
        <li><a href="#tableau">Tableau</a></li>
        <li><a href="#buttons">Boutons</a></li>
        <li><a href="#reset">Reset</a></li>
        <li><a href="#helper">Helper Class</a></li>
        <li><a href="#contact">Contact</a></li>
        <label for="show-menu" class="show-menu">Fermer ↑</label>
    </ul>
</nav>
<div class="clearnav"></div>

Le Css


/* Navigation Bar*/
.nav {
    width: 100%;
}
.nav>ul {
    list-style-type: none;
    width: 100%;
    position: absolute;
    display: flex;
    margin: 0;
    padding: 0;
}
.nav>ul li {
    flex: 1;
}
.nav li a  {
    height: 50px;
    line-height: 50px;
    color: #fff;
    background-color: #2f3036;
    display: flex;
    justify-content: center;
}
.nav li:hover a, .nav li:hover {
    background-color: #aaaaaa;
    color: black;
    transition: 0.2s;
}
/*Liens Toggle*/
.nav li:hover ul a {
    background-color: #aaaaaa;
    color: #2f3036;
    height: 50px;
    line-height: 50px;
}
/*Hover liens Toggle*/
.nav li:hover ul a:hover {
    background-color: #e2575e;
    transition: 0.1s;
}
/*Cache liens Toggle*/
.nav li ul {
    display: none;
}
/*Permet affichage liens Toggle*/
.nav>ul li:hover .hid_ul, .hid_ul:hover,.nav>ul li:hover {
    display: block;
    padding: 0;
}

.nav input[type=checkbox], .show-menu {
    display: none;
}
.show-menu {
    color: #fff;
    background-color: #2f3036;
    text-align: center;
    padding: 10px 0;
}
.nav input[type=checkbox]:checked~ul:first-of-type {
    display: block;
}

@media screen and (max-width: 800px) {
/* Navigation Bar Media Queries*/

    .nav ul li, .nav li a {
        width: 100%;
    }
    .show-menu {
        display: block;
    }
    .nav>ul {
        display: none;
    }
}

La Barre de Navigation inline-block

Sa construction

Cette fois c'est un container doté de la classe .navi pour l'adaptation à n'importe quel type de menu et non uniquement une barre de navigation
On initialise ensuite une liste à puce avec la balise ul comprenant les divers éléments du menu
On crée ensuite les différents liens du menu entre les balises li de la liste à puce
Pas besoin de classes pour le sous-menu cette fois-ci.

Le responsive

L'adaptabilité du menu est geré par des media queries à definir en fonction de votre design personel
- Sur Desktop :
Le menu a une largeur de 70%(modifiez le selecteur .navi {width:} pour l'adapter a votre menu).
- Sur Mobile :
L'affichage est en block sur un click de "Menu", les sous-menus sont affichés lors d'un clique avec un font-size inférieur et des bordures afin de bien les distinguer

Le Html


<nav class="navi" role="navigation">
    <label for="show-menuDemo2" class="show-menu">Menu ￬</label>
    <input type="checkbox" id="show-menuDemo2" role="button">
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#download">Téléchargement</a></li>
        <li><a href="#menu">Navigation</a></li>
        <li><a href="#">Grille ￬</a>
            <ul>
                <li><a href="#flexgrid">Grille Flex</a></li>
                <li><a href="#noflexgrid">Grille sans Flex</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Tableau / Form ￬</a>
            <ul>
                <li><a href="#form">Formulaire</a></li>
                <li><a href="#tableau">Tableau</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Autres ￬</a>
            <ul>
                <li><a href="#buttons">Boutons</a></li>
                <li><a href="#reset">Reset</a></li>
                <li><a href="#helper">Helper Class</a></li>
            </ul>
        </li>
        <li><a href="#contact">Contact</a></li>
        <label for="show-menuDemo2" class="show-menu">Fermer ↑</label>
    </ul>
</nav>
<div class="clearnav"></div>

Le Css


.navi {
    font-size: 1em;
    width: 1000px;
}

.navi ul {
    list-style: none;
    background-color: #2f3036;
    padding: 0;
    margin: 0;
    text-align: center;
}

.navi li {
    text-align: left;
    width: 120px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
}

.navi a {
    text-decoration: none;
    color: #fff;
    display: block;
    padding-left: 15px;
    transition: .3s;
}

.navi a:hover {
    background-color: #aaaaaa;
    color: black;
}

.navi li li {
    font-size: .8em;
}

.navi>ul>li {
    text-align: center;
}

.navi>ul>li>a {
    padding-left: 0;
}

.navi li ul {
    position: absolute;
    display: none;
    width: inherit;
}

.navi li:hover ul {
    display: block;
}

.navi li:hover ul a {
    background-color: #aaaaaa;
    color: #2f3036;
}

.navi li:hover ul a:hover {
    background-color: #e2575e;
    transition: 0.3s;
}

.navi input[type=checkbox],.navi .show-menu {
    display: none;
}

.navi .show-menu {
    color: #fff;
    background-color: #2f3036;
    text-align: center;
    padding: 10px 0;
}

.navi input[type=checkbox]:checked~ul:first-of-type {
    display: block;
}

.clearnav {
    padding-top: 50px;
}

@media screen and (max-width: 1000px) {
    .navi {
        width: 100%;
    }
    .navi ul li, .nav li a {
        width: 100%;
    }
    .navi .show-menu {
        display: block;
    }
    .navi>ul {
        display: none;
    }
}

La Grille Flex

La grille permet de placer et de dimensionner facilement ses divs et ses colonnes. "containflex" permet d'initialiser la grille. La taille de la grille prend celle de la div sur laquelle elle est initialisée. "colnorm" crée une colonne qui adapte sa taille aux nombres de colonnes placées dans le "containflex". "colnorm" donne donc la même taille à toutes les divs. Vous pouvez aussi choisir des tailles : petit, moyen ou grand avec "coltiny", "colmedium" et "colbig". Vous disposez aussi de colonne "flex" qui permette de mettre des colonnes dans des colonnes car elles font office de container.

Le Html



<div style="border: 1px solid black;" class="containflex h600p">

    <div style="background-color: red; padding: 16px;" class="colflexnorm">

        <div style="background-color: blue; margin: 6px;" class="coltiny">

        </div>
        <div style="background-color: blue; margin: 6px;" class="colmedium">

        </div>
        <div style="background-color: blue; margin: 6px;" class="colbig">

        </div>

    </div>
    <div style="background-color: blue;" class="colnorm">

    </div>
</div>

Le Css


/* -----------------------------------------------Grid */

.containflex {
  display: flex;
  box-sizing: border-box;
}

.colnorm {
  flex: 1;
  box-sizing: border-box;
}

.coltiny {
  flex: 0.5;
  box-sizing: border-box;
}

.colmedium {
  flex: 2;
  box-sizing: border-box;
}

.colbig {
  flex: 4;
  box-sizing: border-box;
}

.colflexnorm {
  display: flex;
  flex: 1;
  box-sizing: border-box;
}

.colflextiny {
  display: flex;
  flex: 0.5;
  box-sizing: border-box;
  }

.colflexmedium {
  display: flex;
  flex: 2;
  box-sizing: border-box;
}

.colflexbig {
  display: flex;
  flex: 4;
  box-sizing: border-box;
}

La Grille sans Flex

Pour les amateurs de BootStrap et les vétérans d'Internet Explorer, nous avons également implémenté une grille de base 12 colonnes, n'utilisant aucun flex.
classe du container: "grid"
Fonctionnement des dimensions des colonnes: w-dividende-diviseur, allant de 1 à 12
Exemples :

une colonne de taille un douzième: "w-1-12" = "one-twelve"
une colonne de taille un tier: "w-1-3" = "w-4-12" = "four-twelve"
une colonne faisant la moitié de la taille de son parent: "w-1-2" = "w-2-4" = "w-3-6" = "w-6-12" = "six-twelve"

Pour créer vos propres grilles, je vous propose d'utiliser la fraction la plus simplifiée de leurs noms de classe. Par exemple, si vous souhaitez y mettre deux colonnes - disons un tier et deux tiers - vous pourriez leur ajouter les classes "w-1-3" et "w-2-3"; par contre, si vous souhaitez ajouter une colonne dont le diviseur est 12, mon conseil est d'utiliser uniquement les classes de largeur de colonnes terminant par 12 ("w-1-12", "w-2-12", ..., "w-12-12")

1/12

7/12

4/12

1/3

2/3

Le Html



                      <div style="border: 2px solid black;" class="grid h600p">

                          <div style="background-color: pink; padding: 16px;" class="w-1-2">
                              <div style="background-color: grey; border: 2px solid pink;" class="w-1-12">1/12</div>
                              <div style="background-color: grey; border: 2px solid pink;" class="w-7-12">7/12</div>
                              <div style="background-color: grey; border: 2px solid pink;" class="w-4-12">4/12</div>
                          </div>

                          <div style="background-color: grey; padding: 16px;" class="w-1-2">
                            <div style="background-color: firebrick; border: 2px solid white;" class="w-1-3">1/3</div>
                            <div style="background-color: firebrick; border: 2px solid white;" class="w-2-3">2/3</div>
                          </div>

                      </div>

Le Css


                      /* -----------------------------------------------Grid */

                      /*------ Dans SimplonStrap */

                      .grid, .borderbox{
                          -webkit-box-sizing: border-box;
                          -moz-box-sizing: border-box;
                          box-sizing: border-box;
                      }

                      /* Grid Display*/

                      .grid {
                          display: block;
                          clear: both;
                      }

                      .grid *{
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                      }

                      /* Grid Widths */
                      /*--1/12--*/
                      .grid .one-twelve, .grid .w-1-12 {
                          width: calc(100%/12);
                          float: left;
                          padding: 10px;
                      }
                      /*--2/12--*/
                      .grid .two-twelve, .grid .w-1-6, .grid .w-2-12 {
                          width: calc(100%/6);
                          float: left;
                          padding: 10px;
                      }
                      /*--3/12--*/
                      .grid .three-twelve, .grid .w-1-4, .grid .w-3-12 {
                          width: calc(100%/4);
                          float: left;
                          padding: 10px;
                      }
                      /*--4/12--*/
                      .grid .four-twelve, .grid .w-1-3,.grid .w-2-6, .grid .w-4-12 {
                          width: calc(100%/3);
                          float: left;
                          padding: 10px;
                      }
                      /*--5/12--*/
                      .grid .five-twelve, .grid .w-5-12 {
                          width: calc(500%/12);
                          float: left;
                          padding: 10px;
                      }
                      /*--6/12--*/
                      .grid .six-twelve, .grid .w-1-2, .grid .w-2-4, .grid .w-3-6, .grid .w-6-12{
                          width: 50%;
                          float: left;
                          padding: 10px;
                      }
                      /*--7/12--*/
                      .grid .seven-twelve, .grid .w-7-12 {
                          width: calc(700%/12);
                          float: left;
                          padding: 10px;
                      }
                      /*--8/12--*/
                      .grid .eight-twelve, .grid .w-2-3,.grid .w-4-6, .grid .w-8-12 {
                          width: calc(200%/3);
                          float: left;
                          padding: 10px;
                      }
                      /*--9/12--*/
                      .grid .nine-twelve, .grid .w-3-4, .grid .w-9-12 {
                          width: 75%;
                          float: left;
                          padding-right: 10px;
                          padding-bottom: 10px;
                      }
                      /*--10/12--*/
                      .grid .ten-twelve, .grid .w-5-6, .grid .w-10-12 {
                          width: calc(500%/6);
                          float: left;
                          padding: 10px;
                      }
                      /*--11/12--*/
                      .grid .onze-twelve, .grid .w-11-12 {
                          width: calc(1100%/12);
                          float: left;
                          padding: 10px;
                      }
                      /*--12/12--*/
                      .grid .twelve-twelve, .grid .w-12-12, .grid .w-1{
                          width: 100%;
                          float: left;
                          padding: 10px;
                      }

                      /**Grid Media Query**/
                      @media all (max-width:768px){
                        .grid [class*="w-"] {
                          width:100%;
                        }
                      }

                      /*------ Dans le style.css utilisé pour cette doc*/

                      .grid [class*="w-"]{
                        height: 100%;
                        color: white;
                        font-size: 0.9em;
                      }
                      .grid [class*="w-"] div{
                        text-align: center;
                      }

Attribut

Valeur

Description

.table[margin]

auto

Centre le tableau

.table[background]

#EEEEEE

Couleur grise de background

.table[border-collapse]

separate

Sépare les borders afin d'améliorer la lisibilité

.table[font-size]

0.9em

Diminue un peu la taille du texte

.table[width]

80%

Définie la largeur à 80%

.table[text-align]

left

Aligne le texte à gauche

.table[box-shadow]

0 0 10px 0 rgba(0, 0, 0, .3)

Applique une ombre très légère tout autour du tableau

th[font-weight]

bold

Met la police des cellules du head du tableau en gras

th[padding]

10px 15px

Padding améliorant la lisibilité

th[color]

#fff

Couleur de police blanche

th[background]

linear-gradient(#777, #444)

Background en dégradé

td[border]

1px solid #fff

Bordure blanche

tbody tr td:first-child[font-weight]

bold

Met en gras la première cellule de chaque ligne