Thème HTML5 CSS3 Responsive

11 Fév

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.

thème HTML 5 / CSS 3

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 

Publié le: Lundi 11 février 2013
blog comments powered by Disqus
Monter

© Circonflex-studio - Tous droits réservés - Mentions legales
Développeur web indépendant / Webdesigner / Intégrateur
Nice - Cannes - Monaco - Antibes - côte d'azur | site valide HTML 5

Ce site à été développé en Python avec le framework Django

"http://www.cssawards.net/nominee/circonflex-studio/"