I. Un Portfolio ?▲
Vous avez créé votre page d'accueil, votre page À propos et maintenant vous voulez mettre en avant votre travail, vaste sujet… Dois-je tout mettre ? Dois-je mettre en avant mes WIP (Work in progress) ? Dois-je montrer mes compétences ?
Une page Portfolio est (à mes yeux) le moyen le plus adapté de faire découvrir au visiteur votre vision de la création, cela permet de se forger une idée et de voir si les idées mises en avant se rapprochent de celles d'un futur poste, on peut voir sur le Web moderne des milliers de sites portfolio mettant en avant la totalité de la personne sur une seule page, cela a son charme, ne nous le cachons pas, mais au fond, est ce véritablement bien pensé ?
Oui et non, tout mettre sur une seule page peut démontrer un « relâchement » dans l'envie de montrer le tout correctement, mais cela peut être plus facile à lire pour un visiteur pressé, ne nous le cachons pas. Alors au fond, page unique ou multipage ? Le choix vous appartient, dans ce tutoriel, nous partons sur un site multipage, libre à vous de reprendre tout le code et transférer tout cela sur une seule page, si cela vous intéresse, je vous invite à attendre la fin du tutoriel complet afin d'avoir un aperçu du résultat en page unique.
I-A. Reprendre du bon pied▲
Vous êtes prêt ?
Allons-y, pour commencer, nous faisons la même procédure que la partie II, à savoir copier le code essentiel à ce stade :
]<!doctype html>
<html class="no-js" lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Loulier Guillaume - Freelance</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<!-- BootStrap Core -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom style -->
<link href="css/main.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<!-- Old Browser -->
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
</head>
<body>
<!-- Navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Loulier Guillaume - Freelance</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="Blog.html">Blog</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Propos.html">A Propos</a></li>
<li><a href="#Contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- Script Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/bootstrap.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>À ce stade, n'hésitez pas à créer toutes vos pages et copier ce code, il ne changera pas dans le futur (sinon, utilisez du code PHP afin de vous simplifier la tâche, indice : une inclusion fera l'affaire à merveille).
Maintenant, prenons un instant pour réfléchir au design de cette partie, dans mon design personnel, j'ai pensé à des images réduites qui s'agrandiraient lors du clic et ouvrirait une fenêtre modale, le code nécessaire à ce tour de passe-passe n'est pas nécessairement très compliqué, la mise en place sera plus longue, mais le résultat du plus bel effet !
I-B. Créer ses blocs d'images▲
Dans un portfolio classique, les images sont montrées simplement et lors du clic, l'ouverture se fait dans une fenêtre modale avec l'image ou un minitexte précisant le travail effectué, cet effet simple et efficace est ce que nous recherchons, sa mise en place dans BootStrap n'est pas difficile et vous serez vite remis dans le bain, ce que nous allons ajouter est un effet de couleur sur ces images avant l'ouverture de la fenêtre.
Mais alors, que penser d'un carrousel ? L'idée n'est pas mauvaise, mais cela peut poser souci sur un support mobile ou le défilement ne sera pas optimisé pour, cependant il existe la solution de créer des menus tactiles pensés pour ces supports et offrir aux visiteurs une expérience propre et efficace, cela se fait rapidement en CSS, mais au fond, je ne trouve pas l'idée intéressante, non pas par sa mise en place, mais par son concept, il vaut mieux afficher peu d'effets, mais rendre la navigation optimale plutôt qu'ajouter des effets pour le plaisir de les ajouter, libre à vous de choisir votre voie.
I-C. Se lancer dans le code▲
Dans un premier temps, créons les blocs d'images ainsi que les effets CSS correspondants, les images doivent s'afficher proprement sur tous supports, il faudra donc prendre en compte la grille de BootStrap (qui se compose de 12 colonnes) afin de rendre le tout responsive.
Dans ce tutoriel, nous avons deux choix possibles, le premier consiste à créer une image double de la nôtre qui viendrait se superposer sur l'image voulue et il ne resterait plus qu'à ajouter une icône sur laquelle un clic ouvrirait une fenêtre, c'est une idée brillante, mais sa mise en place nécessite de placer correctement son masque et quelques pixels de différence peuvent saboter le travail, nous optons pour une solution plus simple, mais plus longue.
Nous allons créer un bandeau sous l'image qui fera glisser l'image vers le haut, ce bandeau contiendra un mot clé tel que UI, Bureau, Web Design et un bouton Aperçu qui ouvrira une fenêtre modale qui contiendra une image, une description plus riche, etc.
Cette solution est plus longue à mettre en place, notamment de par son fonctionnement purement CSS pour le bandeau et l'affichage au survol, mais le résultat sera plus « pro » qu'un simple masque, n'allez pas croire que tout ceci est difficile, en suivant le code correctement, le tout ne devrait pas prendre très longtemps, nous allons travailler sur une seule image puis nous dupliquerons le code pour éviter de quelconques fautes.
<!-- Portfolio -->
<!-- En-tête -->
<div id="propos_hub">
<div class="container">
<div class="row">
<h3>Portfolio</h3>
</div>
</div>
</div>
<!-- Intro -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<p class="centered">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
<br/
<!-- Bloc Image -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-4">
<div class="grille masque">
<figure>
<img class="img-responsive" src="img/mac_coffee_1024.jpg" alt="">
<figcaption>
<a data-toggle="modal" data-target="#myModal" class="btn btn-theme">Aperçu</a>
</figcaption>
</figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title centered" id="myModalLabel">Nom du projet</h4>
</div>
<div class="modal-body">
<h4 class="centered">Fonction au sein du projet</h4>
<img src="img/mac_coffee_1024.jpg" alt="">
<h5 class="centered">Description du projet</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div><!-- Fin fenêtre modale -->
</div><!-- Fin premier bloc -->
<div class="col-lg-4 col-sm-4">
<div class="grille masque">
<figure>
<img class="img-responsive" src="img/mac_coffee_1024.jpg" alt="">
<figcaption>
<a data-toggle="modal" data-target="#myModal_B" class="btn btn-theme">Aperçu</a>
</figcaption>
</figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal_B" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title centered" id="myModalLabel">Nom du projet</h4>
</div>
<div class="modal-body">
<h4 class="centered">Fonction au sein du projet</h4>
<img src="img/mac_coffee_1024.jpg" alt="">
<h5 class="centered">Description du projet</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div><!-- Fin fenêtre modale -->
</div><!-- Fin premier bloc -->
<div class="col-lg-4 col-sm-4">
<div class="grille masque">
<figure>
<img class="img-responsive" src="img/mac_coffee_1024.jpg" alt="">
<figcaption>
<a data-toggle="modal" data-target="#myModal_C" class="btn btn-theme">Aperçu</a>
</figcaption>
</figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal_C" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title centered" id="myModalLabel">Nom du projet</h4>
</div>
<div class="modal-body">
<h4 class="centered">Fonction au sein du projet</h4>
<img src="img/mac_coffee_1024.jpg" alt="">
<h5 class="centered">Description du projet</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div><!-- Fin fenêtre modale -->
</div><!-- Fin premier bloc -->
</div><!-- Fin row -->
<br/>
<br/><!-- Espace entre Row_I et Row_II -->
<div class="row">
<div class="col-lg-4 col-sm-4">
<div class="grille masque">
<figure>
<img class="img-responsive" src="img/mac_coffee_1024.jpg" alt="">
<figcaption>
<a data-toggle="modal" data-target="#myModal_D" class="btn btn-theme">Aperçu</a>
</figcaption>
</figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal_D" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title centered" id="myModalLabel">Nom du projet</h4>
</div>
<div class="modal-body">
<h4 class="centered">Fonction au sein du projet</h4>
<img src="img/mac_coffee_1024.jpg" alt="">
<h5 class="centered">Description du projet</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div><!-- Fin fenêtre modale -->
</div><!-- Fin premier bloc -->
<div class="col-lg-4 col-sm-4">
<div class="grille masque">
<figure>
<img class="img-responsive" src="img/mac_coffee_1024.jpg" alt="">
<figcaption>
<a data-toggle="modal" data-target="#myModal_E" class="btn btn-theme">Aperçu</a>
</figcaption>
</figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal_E" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title centered" id="myModalLabel">Nom du projet</h4>
</div>
<div class="modal-body">
<h4 class="centered">Fonction au sein du projet</h4>
<img src="img/mac_coffee_1024.jpg" alt="">
<h5 class="centered">Description du projet</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div><!-- Fin fenêtre modale -->
</div><!-- Fin premier bloc -->
<div class="col-lg-4 col-sm-4">
<div class="grille masque">
<figure>
<img class="img-responsive" src="img/mac_coffee_1024.jpg" alt="">
<figcaption>
<a data-toggle="modal" data-target="#myModal_F" class="btn btn-theme">Aperçu</a>
</figcaption>
</figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal_F" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title centered" id="myModalLabel">Nom du projet</h4>
</div>
<div class="modal-body">
<h4 class="centered">Fonction au sein du projet</h4>
<img src="img/mac_coffee_1024.jpg" alt="">
<h5 class="centered">Description du projet</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div><!-- Fin fenêtre modale -->
</div><!-- Fin premier bloc -->
</div><!-- Fin row -->
</div><!-- Fin container -->Le bloc de code est imposant à première vue, mais le code a été copié tout le long afin d'éviter les fautes involontaires, une fois ce code appliqué sur la page, le code CSS va créer l'apparence du menu et ajouter les effets au survol.
/* ========== Style Portfolio.html =========== */
/* Style Grille */
.grille figure {
margin: 0;
position: relative;
}
.grille figure img {
width: 100%;
display: block;
position: relative;
}
.grille figcaption {
position: absolute;
top: 0;
left: 0;
padding: 30px;
color: #fff;
background: #384452;
}
.grille figcaption h5 {
margin: 0;
padding-top: 0px;
padding-left: 20px;
padding-bottom: 5px;
color: #fff;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
}
.grille figcaption a {
text-align: left;
padding: 5px 10px;
margin-left: 20px;
display: inline-block;
background: #FCAC45;
color: #fff;
font-size: 15px;
}
/* Style Masque */
.masque figure {
overflow: hidden;
}
.masque figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.masque figcaption {
height: 40px;
width: 100%;
top: auto;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .masque figure:hover figcaption,
.masque figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.masque figcaption a {
position: absolute;
top:10px;
bottom: 10px;
right: 30px;
}Ici nous ajoutons le mouvement du « bandeau » au survol et ajoutons un code couleur correspondant au design respectif du site, le fond du souci se situe encore dans le fait que le code peut sembler imposant de par l'ajout du code nécessaire aux anciens navigateurs web et au fait que par volonté d'aérer le code, les espaces s'accumulent, libre à vous d'utiliser cette mise en page ou de la modifier selon vos besoins.
I-D. S'intéresser aux préprocesseurs CSS▲
Les préprocesseurs CSS ? Kézako ?
Vous connaissez le CSS ? Vous savez que ce langage - aussi intéressant qu'il soit - n'est au mieux que temporaire et que chaque itération de ce langage vous force à reprendre une partie de vos bases ?
Bien, partant de ce principe-là, on peut se demander pourquoi l'utiliser alors qu'il n'est pas terminé ? Au fond, le CSS répond à une demande classique, s'il n'était pas là, nous devrions l'inventer et comme nous n'aimons pas réinventer la roue, nous l'utilisons encore et encore et continuons à prendre de mauvaises habitudes.
Voyez par vous-même, qui n'a pas déjà rêvé de pouvoir écrire du CSS sans se soucier des anciens navigateurs ? Des règles non prises en compte, des adaptations à faire, etc.
Prenons un cas concret, imaginons que nous sommes un vendredi soir avant Noël, il est 17 h et votre responsable design vient vous parler dans l'oreille avec une voie douce, vous apprend que la charte graphique a changé et que les changements doivent être effectifs pour demain matin, demain étant férié dans votre entreprise, vous savez ce que cela signifie…
Dans ce cas de figure, soit votre conscience professionnelle vous invite à prolonger vos horaires sans rien dire soit vous claquez un méchant coup de tête dans votre clavier et priez pour que le code CSS ait été bien écrit afin que les changements soient simples à faire, vous ouvrez le fichier CSS et horreur, le tout est écrit avec les pieds, vous ne trouvez rien et ratez la bûche de réveillon, au mieux vous obtenez les fonds de verre et vous faites une croix sur les desserts restants, c'est cruel, triste mais, voilà « grossièrement » ce qui peut vous arrivez, mais alors pourquoi ne pas utiliser des outils qui feraient les compilations à votre place, qui permettraient de changer des règles situées sur des centaines de lignes en quelques instants et qui vous permettraient d'avoir l'apéritif de ce repas béni des dieux ?
Oui, pourquoi ?
Il est une vérité réelle, nous n'aimons pas le changement, changer d'outil de travail est un fléau du monde actuel, tout évoluant si vite qu'en quelques semaines, nous sommes dépassés et mis de côté.
Les préprocesseurs CSS sont au CSS ce qu'est l'automobile aux déplacements en campagne, un don du ciel (dans une mesure prise avec des pincettes), c'est pourquoi j'ai décidé de les garder pour cette partie, n'allons pas embrouiller tout le monde.
I-D-1. Choisir le côté obscur ▲
N'allez pas croire que ces outils venus du ciel sont des méchants garnements, mais les utiliser vous forcera à revenir sur vos bases et à revoir votre conception d'un code propre.
Dans ce tutoriel, nous utilisons BootStrap, si vous avez lu plus vite que votre ombre les chapitres précédents, vous ne savez peut-être pas que BS utilise un préprocesseur CSS en son cœur, oui, ce dernier nous offre déjà les outils nécessaires à un code clair, net et précis, mais nomdezeus qu'attendons-nous ?
I-D-2. Se lancer !▲
BootStrap utilise LESS, mais il supporte aussi SASS et la version 4 utilisera aussi SCSS quant à la version 5 (ils sont visionnaires chez BS), elle pourrait utiliser PostSCSS, bref, le préprocessing est l'avenir, croix de bois croix de fer !
Avant toute chose, comprenez que je ne vous ferai pas un cours complet sur LESS, cela pourrait se faire, mais dans l'optique « uniquement » d'un autre tutoriel (avis à ceux qui le souhaitent), non pas que cela soit difficile, mais vous embrouillez ici ne serait pas malin.
Pour utiliser LESS au sein de BS, nous devons obtenir les fichiers nécessaires, pour cela, direction le site officiel de BootStrap, cliquez sur Download et choisissez Source Code, une fois les fichiers rapatriés sur votre poste, dézippez le tout et placez les dossiers bien au chaud.
Voici ce que vous devriez voir, le dossier qui nous passionne est le dossier bien nommé Less, la clé du paradis vous tend les bras ! Ouvrez-le.
Voilà, vous y êtes, le côté obscur vous a conquis, à ce stade, tout y est, il ne vous manque plus qu'un compilateur, BS recommande Grunt, mais j'utilise Crunch (question de choix personnel), vous pouvez ouvrir ces fichiers dans Brackets, mais au fond, vous ne pourrez pas faire grand-chose…
Prenons un instant pour réfléchir, si nous utilisons LESS, le site gagnera en « propreté », mais est-ce adapté à un site personnel ? Oui et non, si vous ne modifier pas souvent vos règles de style, c'est inutile, les CSS feraient l'affaire, mais dans le cas d'un site comme le nôtre et parce qu'il serait long de tout modifier à la main un vendredi soir, nous usons le LESS afin de fluidifier le travail.
Mais par où commencer ?
Nous allons faire d'une pierre deux coups, la logique voudrait que l'on modifie les fichiers existants et que l'on y greffe notre code, mais que faire si un changement parvient après la sortie d'une version plus récente ? Il faudrait tout retaper, c'est illogique, au lieu de cela, nous allons créer un fichier main.less qui sera pris en compte par le fichier central de BS et qui chargera nos codes personnels, simples, efficaces et comportant un seul fichier à recompiler par la suite, simple comme bonjour.
I-D-3. Mettre les mains dans le cambouis▲
I-D-4. ▲
Le fichier créé, nous allons y copier notre code CSS écrit précédemment (l'image ne montre qu'une partie du code, mais toute la page main.css est copiée).
Nous ouvrons le fichier bootstrap.less dans Crunch et indiquons de prendre en compte le fichier créé.
En cliquant sur la petite icône à côté de bootstrap.less et sur Set Output, nous compilons le fichier, nous renommons le fichier pour s'y retrouver et l'installons dans le dossier correspondant au CSS du projet.
Ceci fait, il nous faut indiquer à la page HTML où aller chercher le code CSS créé, nous effaçons aussi le fichier main.css du code HTML.
Le résultat sur la page reste le même et nous venons de libérer de la vitesse de chargement sur notre page, le code HTML ne chargeant plus qu'un fichier CSS.
Bien sûr, je ne vous ai pas expliqué l'attrait majeur de LESS, la possibilité d'écrire moins de code tout en concevant un code plus propre, mais ce n'est pas le but de ce tutoriel (peut-être par la suite ?), vous venez d'apercevoir une des fonctionnalités du LESS (celle que je préfère) et de créer votre page Portfolio tout en libérant de la vitesse de chargement, que demander de mieux ?
I-D-5. LESS, un préprocesseur comme les autres▲
Pour aller plus loin, nous allons nous diriger vers CodePen, ce dernier intègre une gestion des Préprocesseurs ce qui va nous faciliter la tâche, une fois sur un nouveau projet, cliquez le rouage au-dessus du secteur CSS et choisissez LESS, puis BootStrap dans les CSS externes (cela forcera CodePen à compiler pour BS), copiez votre code CSS au sein du secteur et cliquez sur Compiler.
Pour ceux qui penseraient avoir sauté une partie de code, voici le fichier main.css dans son ensemble.
/* Style Global */
body {
background: #ffffff;
margin: 0;
height: 100%;
color: #384452;
font-family: sans-serif;
font-weight: 400;
}
h1,
h2,
h3,
h4,
H5,
H6 {
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
p {
padding: 0;
margin-bottom: 12px;
font-family: 'Raleway', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #384452;
margin-top: 10px;
}
img {
height: auto;
max-width: 100%;
}
a {
padding: 0;
margin: 0;
text-decoration: none;
-webkit-transition: background-color 0.4s linear, color 0.4s linear;
transition: background-color 0.4s linear, color 0.4s linear;
}
a:hover,
a:focus {
text-decoration: none;
color: rgba(195, 197, 198, 0.87);
}
::moz-selection {
color: #fff;
text-shadow: none;
background: #2B2E31;
}
::-moz-selection {
color: #fff;
text-shadow: none;
background: #2B2E31;
}
::selection {
color: #fff;
text-shadow: none;
background: #2B2E31;
}
.centered {
text-align: center;
}
/* =========== Style index.html ========== */
/* Style Navigation */
.navbar {
min-height: 70px;
padding-top: 10px;
margin-bottom: 0px;
}
.navbar-brand {
font-family: 'Raleway', sans-serif;
font-weight: 900;
}
.navbar-header .navbar-brand {
color: white;
}
.navbar-default .navbar-nav > li > a {
color: white;
font-weight: 700;
font-size: 15px;
}
.navbar-default .navbar-nav > li > a:hover {
color: rgba(172, 186, 191, 0.82);
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: rgba(172, 186, 191, 0.82);
background: transparent;
}
.navbar-default {
background-color: #384452;
border-color: transparent;
}
/* Style Introduction */
#Introduction {
background: url(../img/photo-1440783335184-280994ff71a2.jpg) no-repeat center top;
margin-top: -10px;
padding-top: 20px;
text-align: center;
background-attachment: relative;
background-position: center;
min-height: 700px;
width: 100%;
background-size: 100%;
background-size: cover;
}
#Introduction h1 {
margin-top: 150px;
color: white;
font-size: 50px;
font-weight: 700;
}
#Introduction h3 {
color: white;
font-size: 30px;
font-weight: 100;
font-family: 'Raleway', sans-serif;
font-style: oblique;
}
/* Style About */
#f {
background: #384452;
padding-top: 70px;
padding-bottom: 70px;
text-align: center;
}
#f h3 {
color: white;
font-size: 28px;
font-weight: 700;
letter-spacing: 1px;
}
#f icon {
font-size: 8px;
color: #fff;
padding: 3px;
}
#f p {
font-size: 20px;
color: #f2f2f2;
}
#f img {
tex-align: center;
}
/* Style bouton */
.btn-theme {
color: #fff;
background-color: #384452;
border-color: #384452;
margin: 4px;
}
.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-theme.active,
.open .dropdown-toggle.btn-theme {
color: #fff;
background-color: #FCAC45;
border-color: #ffffff;
}
/* Compétences */
#Competences {
padding: 80px 0;
}
.espace {
margin-top: 40px;
}
#Competences i.fa {
font-size: 40px;
border: solid #FCAC45 4px;
width: 100px;
height: 100px;
padding: 27px 25px;
margin-bottom: 10px;
border-radius: 50%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#Competences i.fa.fa mobile {
font-size: 50px;
padding: 20px 25px;
}
#Competences .Service:hover > i.fa {
background: #FCAC45;
color: #ffffff;
}
/* =========== Style Propos.html ========== */
#propos_hub {
background: #FCAC45;
margin-top: 60px;
margin-bottom: 60px;
padding-top: 25px;
padding-bottom: 25px;
}
#propos_hub h3 {
color: white;
margin-left: 18px;
}
#propos {
margin-top: 80px;
margin-bottom: 80px;
}
#f_Propos {
background: #384452;
padding-top: 70px;
padding-bottom: 70px;
text-align: center;
}
#f_Propos h3 {
color: white;
font-size: 22px;
font-weight: 450;
}
#f_Propos p {
font-size: 20px;
color: #f2f2f2;
}
/* ========== Style Portfolio.html =========== */
/* Style Grille */
.grille figure {
margin: 0;
position: relative;
}
.grille figure img {
width: 100%;
display: block;
position: relative;
}
.grille figcaption {
position: absolute;
top: 0;
left: 0;
padding: 30px;
color: #fff;
background: #384452;
}
.grille figcaption h5 {
margin: 0;
padding-top: 0px;
padding-left: 20px;
padding-bottom: 5px;
color: #fff;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
}
.grille figcaption a {
text-align: left;
padding: 5px 10px;
margin-left: 20px;
display: inline-block;
background: #FCAC45;
color: #fff;
font-size: 15px;
}
/* Style Masque */
.masque figure {
overflow: hidden;
}
.masque figure img {
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.masque figcaption {
height: 40px;
width: 100%;
top: auto;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .masque figure:hover figcaption,
.masque figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.masque figcaption a {
position: absolute;
top: 10px;
bottom: 10px;
right: 30px;
}Nous passons de plus de 358 lignes à un petit 292, c'est bien, mais nous aurions pu faire mieux si notre code était minifié plus efficacement, ici, CodePen a majoritairement enlevé les espaces et mis en lignes tout le CSS, nous aurions pu le faire nous-même et je ne suis pas satisfait du résultat (moi et mon envie de la perfection), pour aller plus loin encore, nous allons sauter sur LESScss.org (site officiel), les explications du site sont largement suffisantes pour créer quelque chose de qualité respectable et nul doute qu'une fois les principes de LESS pris en compte dans votre workflow, le reste suivra.
Pour vous donner un aperçu rapide de ce que Less peut faire, nous allons prendre le code de notre bouton fait maison, une modification toute simple fera l'affaire :
Code précédent :
.btn-theme {
color: #fff;
background-color: #384452;
border-color: #384452;
margin: 4px;
}
.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-theme.active,
.open .dropdown-toggle.btn-theme {
color: #fff;
background-color: #FCAC45;
border-color: #ffffff;
}Nouveau code :
.btn-theme {
color: #fff;
background-color: #384452;
border-color: #384452;
margin: 4px;
&:hover,
&:focus,
&:active,
&.active,
.open .dropdown-toggle.btn-theme {
color: #fff;
background-color: #FCAC45;
border-color: #ffffff;
}
}Vous remarquerez que le code se fait plus simple et plus précis, voici un premier aperçu de ce que peut faire LESS, bien entendu, je ne suis pas entré dans les détails du préprocesseur, je vous laisse la découverte.
Par la suite, il vous faut changer le chemin des autres pages créées à ce jour et indiquer le nouveau fichier CSS (uniquement si vous utilisez la méthode LESS), j'écrirais tout mon code sur mon fichier main.less (mais la procédure est la même en CSS), si vous venez à écrire dans le fichier main.less pour la suite du tutoriel, faites-le depuis Crunch, ce dernier compilera en automatique via Ctrl+S votre fichier et le tout sera à jour sans problème.
II. Conclusion ▲
Nous y voilà, la 3e partie de ce tutoriel se termine, nous avons vu plusieurs choses et je vous encourage à relire le tout et à changer les règles que vous jugez inutiles, dans la partie 4 nous créerons la page Contact, la page Blog et nous ajouterons les derniers atouts CSS de notre page, la partie 5 verra arriver le JavaScript (fouleendélire) et nous reviendrons sur certains points importants, à l'issue de quoi vous aurez un site terminé et fonctionnel, que demander de plus ?
Je tiens à remercier ClaudeLELOUP pour sa correction toujours juste et rapide.
Merci de votre lecture et bonne journée.