Thème HTML5 CSS3 Responsive
Depuis quelques jours déjà j'ai commencé le développement d'un thème en HTML 5 et CSS 3 sur la base du framework Foundation crée par Zurb, c'est un framework que j'ai découvert et que j'affectionne de plus en plus et le préfère désormais au boostrap Twitter.
Le but de ce template est la réutilisation de celui-ci afin de l'incorporer comme structure de départ dans mes futurs projets, muni d'une architecture propre et bien commentée je compte aussi le commercialiser en l'intégrant dans différents CMS comme Contao qui sera le premier à en bénéficier, le second ça sera mon CMS en Python / Django voir Django CMS, et par la suite je ferais peut-être un thème Drupal.
Framewok CSS
Comme expliqué le thème est basé sur le framework foundation, ce que j'aime dans ce framework c'est la rapidité de prototypage des pages, pour ma part je l'ai pris en main plus rapidement que le Twitter Boostrap.
Il possède pratiquement les mêmes fonctionnalités que son concurrent même si je trouve la gestion de grille plus poussée avec différentes options suivant les versions du périphérique ciblé (mobile, tablette, desktop).
Préprocesseur
Une version du framework est téléchargeable avec SASS et le framework Compass, comme j'ai une petite préférence pour LESS, je n'ai donc pas pris la version SASS, mais j'ai créé mon thème sur la base de LESS et ajouter des Mixins venant du boostrap Twitte. J'ai donc fait un petit mélange pour avoir le meilleur de ces 2 frameworks CSS pour le développement de mon thème.
Bonnes pratiques CSS et modularité
Pendant le développement, j'ai essayé de m'inspirer des meilleurs pratiques CSS du moment, comme par exemple la méthode SMACSS qui nous montre comment rendre son CSS modulaire et lisible afin d'optimiser et réutiliser son code. Je me suis inspiré aussi de plusieurs livres sur les bonnes pratiques CSS actuelles et fais un mélange pour coller au mieux à ma façon de travailler et au système de grille choisie. Il est certain que je ferais des améliorations au fur et à mesure pour améliorer la structure CSS et ainsi, essayer d'avoir la meilleure base possible.
Responsive Webdesgin
Le thème est totalement compatible mobile et tablette grâce aux grilles responsives et le navigation est totalement optimisée pour la navigation tactile.
Personnalisation Couleurs et Textures
Une petite fonctionnalité que j'ai développé qui n'est pas des plus originales je l'accorde, mais comme le template sera commercialisé j'ai jugé utile de l'ajouter. J'ai donc de ce fait développé 2 scripts JS (jQuery), le premier en utilisant le localstorage et l'autre les cookies via jQuery cookie dans le cas où le localstorage ne serait pas supporté par le navigateur. Nous pouvons via ce script faire le choix entre 8 couleurs de base pour le thème, et dans le cas où les couleurs ne seraient pas au goût de tous, il est possible de définir sa propre couleur à l'aide d'un éditeur visuel.
Il est aussi possible de choisir différentes textures pour la partie haute (header) et pour la partie du contenu. Il est très facile d'ajouter sa propre couleur en l'ajoutant dans une feuille de style dédiée et dans le fichier JS qui se charge de switcher entre les différentes variantes.
Plus de 1000 icônes
J'ai fait le choix d'implanter plus de 1000 icônes sous forme de fonts, grâce à cette façon de faire il est alors très facile d'ajouter une icône en ajoutant simplement à n'importe quelle balise sa classe correspondante et tout ça sans les iconvénients et la lourdeur de création et d'insertion d'images ou bien de sprites dans le document HTML.
Conclusion
La version HTML / CSS / JS du thème est terminée, je mettrai une demo en ligne bientôt sur un des CMS.
N'hésitez pas à laisser un commentaire si vous avez des questions