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

Outilhtml

Publié par le , mis à jour le (68433 lectures)

modeles gabarits schnapsum ipsum lorem générateur schnapsit squelettor

Alsacréations est fier de vous annoncer la naissance de Schnaps.it, notre nouvel outil de génération de code HTML / CSS !

schnaps.it

Combinaison de plusieurs outils existants (KNACSS,  Schnapsum et Squelettor), Schnaps.it offre une palette de fonctionnalités lorsque vous débutez un nouveau projet web :

  • il permet de construire un squelette HTML5 vide très rapidement
  • il offre la possibilité de concevoir des gabarits de mise en page simple (une, deux, trois colonnes, hauteurs identiques, etc.) basés sur le mini framework KNACSS
  • il propose du faux-texte "Lorem Ipsum" en version alsacienne.

Le générateur de gabarits permet d'affiner certains réglages visuels des différents éléments (largeur, marges internes, marges externes, alignement de texte, etc.).

Une fois vos réglages effectués, il ne vous reste plus qu'à récupérer l'ensemble des fichiers en un clic !

générateur HTML

Un grand merci à Laetitia Bonanni, stagiaire dans l'agence Alsacréations pour ce joli travail réalisé tant du point de vue graphique que technique !

Commentaires

Ç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 ?

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

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é ?

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).

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.

Commentaires clos