Schnaps.it, le générateur de template HTML5

Super ce petit outil ! Par contre, faites attention aux espaces mélangés aux tabulations dans les fichiers html générés !

Et merdouille, j'étais en train de bosser sur un projet similaire. :(

Bon boulot ;)

Bien joué Laetitia ! C'est du bon boulot !

Notre stagiaire en chef elle roxx :)

Ça va beaucoup servir !

Une petite remarque par contre, en recevant le zip, le content-type est à "txt/html" alors qu'il devrait être à "application/zip" du coup certains navigateurs vont essayer de l'afficher au lieu de le télécharger.

Très simple, c'est propre.

En regardant la façon dont on change les margin, ne serait-ce pas plus adapté de mettre un slider ? C'est plus intuitif je pense, non ?

En tout cas bon boulot !

L'outil semble créer un gabarit sur la notion de présentation (layout), est-il possible d'associer aux boites et liens des valeurs sémantiques: élément spécifique, class, id, rel, meta, link.

Petit bug pour le 1er Gabarits sur trois colonnes :

- en choisissant margin : aucune
- puis padding aucun
- puis choisir un autre padding, le padding ne change pas dans le gabarit(étape 2)

Merci pour vos retours de bugs, on va s'y atteler !

@karlcow : pourrais-tu préciser ce que tu veux dire exactement ?
Pour ce qui est des éléments, on a essayé de choisir les tags les plus "sémantiques" possibles (header, footer, nav, etc.).

Par contre je ne saisis pas où tu veux en venir avec "class, id, rel, meta, link". Ces attributs existent dans le code produit.
Si tu veux dire que le choix de nommage d'une classe telle que "txtleft" n'est pas "sémantique", je te l'accorde... mais c'est quoi une "classe sémantique" ?
http://blog.goetter.fr/post/31193037773/css-l...

Juste une petite remarque, la page générée fait appel à
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Pour des questions de performance, il est conseillée de ne pas utiliser ce script :
1- Il est hébergée sur un dépôt de source (donc pas d'entête de cache)
2- La dernière version à jour est désormais sur github https://github.com/aFarkas/html5shiv

Il y a un article qui explique bien le problème :
http://zoompf.com/2012/05/html5shiv-and-servi...

Bonne soirée,

@franek : oui tu as raison.
Après hésitation, on a préféré faire ce choix parce que dans le cas contraire - comme tous les outils automatiques qu'on utilise sans chercher plus loin - , il y aurait un lien de type "/js/html5shiv.js" ... et 90% des utilisateurs ne penseraient pas à faire la démarche de télécharger le fichier chez eux.
On va peut-être faire un warning à ce sujet.

@Raphael : ah non non, le choix des class que vous utilisez pour le framework est une chose. Ce que je veux dire c'est de pouvoir nommer les éléments avec les class/rel/element/id de son choix pour extraire l'information. Les "class" n'ont pas été faits pour CSS, CSS utilise les 'class'. Donc votre outil semble faire assez bien la partie layout mais ne permet pas semble-t-il d'ajuster le gabarit à ses propres besoins.

Ce n'est pas grave, je voulais savoir si vous y aviez pensé. Je vais continuer à chercher.

Merci pour la réponse rapide.

@karlcow : "votre outil semble faire assez bien la partie layout mais ne permet pas semble-t-il d'ajuster le gabarit à ses propres besoins"

Pourrais-tu détailler ce point important ? Voire apporter des exemples concrets de ce qui pourrait être amélioré, modifié, banni ?

@gromb57 : résolu :)

Bravo Laetitia ! :-)

Ça c'est du Stagiare ++ !!!

Ouahh, génial !!!
Merci beaucoup ! Question bête : je n'ai pas vu de balises article, section, hgroup, ...
Pour des raisons plus "pédagogiques" il serait intéressant de les rajouter non ?

@jojaba : il y a les éléments nécessaires à la construction du gabarit (header, aside, nav, footer).
Il est vrai qu'on n'en a pas "fait de trop" volontairement parce qu'on ne peut pas "deviner" de quoi sera fait le contenu, ... et surtout pas de hgroup qui ne fait déjà plus partie des spécifications ;)

Outil très performant et très agréable à utiliser. Par contre, lorsque l'on définit le margin et le padding d'un bloc à 0, on ne peut plus le sélectionner.
Ça pourrait être intéressant de placer dans l'éditeur de bloc un lien vers le bloc parent.

Un grand bravo à Laetitia

Un outil très intéressant pour les designers

Hello :)

Merci pour cet outil. Je débute dans l'intégration et je dois dire que c'est bien pratique.
Par contre j'ai constaté un bug (lié au choix du doctype ?)
En choisissant le doctype XHTML 1.0 STRICT, le fichier HTML généré mélange les balises, on sent que HTML5 veut faire sa place !

Par exemple, la balise <div id=header"> se ferme avec la balise </header>,
la balise <div id="navigation"> se termine par la balise </nav>. Pareil pour la balise <div id="section"></section> et <div id="footer></footer>.

Le problème a-t-il été signalé ?

Merci pour ce signalement, le bug devrait être à présent corrigé.

Bravo ! très sympathique ! et rapide...

@dew :

je confirme. Merci pour votre réactivité.

Sur www.schnaps.it en ne touchant à rien, en cochant seulement google analytics mais sans y entrer un id de suivi, le code se termine ainsi :
</script>;
</body>
</html>
Y'aurait pas un ; en trop après <script> ?
Et au passage, le terme "ID de suivi" serait plus approprié que le terme "Code" (Google parle toujours de son "ID de suivi" sur Analytics, pour le fameux UA-XXX).

C'est rectifié, merci pour le bug report.

bonjour, je me demande s'il n'y a pas une erreur au niveau de la première classe conditionnelle :

<!--[if lte IE 7]> <html class="no-js ie67 ie678" lang="fr"> <![endif]-->

"si inférieur ou égal à IE7" et pour tant la classe ie678 est ajoutée ; je pense que cela devrait être ie67

par ailleurs on as ensuite :
<!--[if IE 8]> <html class="no-js ie8 ie678" lang="fr"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="fr"> <![endif]-->

pour suivre la logique, est-ce qu'il ne devrait pas y avoir une classe ie6789 ?

Plus globalement, je trouve que le modèle HTML5 Boilerplate est intéressant :
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

en combinant les deux approches (et si je ne me trompe pas), on peut arriver à quelque chose comme ça :

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 ie6"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ie7 ie67"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9 ie8 ie678"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 ie6789"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->

Bonjour,

Superbe outil.
Je débute dans la création et j'apprends à me servir de dreamweaver.
Donc j'ai chargé le deuxième modèle.
J'ai entièrement suivi le processus mais c'est en ouvrant la page d'accueil sur dreamweaver que j'ai un problème
Il n'y a pas les cadres et par exemple mon meneu de navigation au lieu d'être horizontal et vertical.
Comment faire, merci.

Nathan

Bonjour,

Tout d'abord un grand bravo pour votre outil facile à mettre en place.

J'ai besoin de votre aide/retour :
Constat :
Je souhaite utiliser "schnaps" avec less et le compilateur du même nom sur mac.
hors lorsque je compile les .less ça donne un message d'erreur car ça refuse ce genre de choses et ce dans tous les fichiers .less :
"// width helpers boolean
& when (@enable-helpers-width = true) { blablabla /"
Questions :
- Pourquoi ? Est-ce normal ? Dois-je faire quelque-chose pour que ça l'accepte ?
(précision je n'ai rien changé dans les fichiers de base)
- y'a-t-il un moyen de réécrire la même chose en .less plus "traditionnel" que le compileur accepterait ?

MERCI d'avance pour vos pistes/votre aide.