Last month I mentioned the Zurb Foundation when discussing bower. For a long while it was my go-to grid system, regardless of my opinion towards using divs for rows and the strict formatting guidelines. Very recently, however, I have found a new framework which does not require those sorts of divs (or even pre-defined classes). It is called Jeet, and after using it on only one project, I don’t see myself using Foundation for the grid any more. Example Files I’ve created a github repository containing all my example files. For anyone interested in them, they can either be viewed on the web, or cloned. The repository is here: https://github.com/lswest/FCM91. Jeet - What is it? Jeet is a so-called “Ratio Grid”. It features functions in SASS or Stylus to generate the CSS required to create columns on any element. The website linked to in Further Reading (below) does an excellent job describing what exactly Jeet is. So instead, I will focus on an example of how it differs from Foundation.

Le mois dernier, j'ai mentionné la Fondation Zurb en parlant de bower. Pendant longtemps il a été mon système de grille préféré, indépendamment de mon opinion sur l'utilisation des divs pour les lignes et les directives de mise en forme strictes. Très récemment, cependant, j'ai trouvé un nouveau cadre qui ne nécessite pas ces sortes de divs (ou mêmes des classes pré-définies). Il s’appelle Jeet et, après l'avoir utilisé sur un seul projet, je ne me vois plus utiliser Fondation pour des grilles.

Fichiers d'exemple

J'ai créé un dépôt github contenant tous mes fichiers d'exemple. Pour ceux qui sont intéressés, vous pouvez soit les consulter sur le web, soit les cloner. Le dépôt est ici : https://github.com/lswest/FCM91.

Jeet - C'est quoi ?

Jeet est ce qu'on appelle un « Ratio Grid ». Il propose des fonctions SASS ou Stylus pour générer le CSS nécessaire pour créer des colonnes sur n'importe quel élément. Le site Web cité dans « Pour aller plus loin » (ci-dessous) décrit de façon excellent exactement ce qu'est Jeet. Je vais donc plutôt me concentrer sur un exemple de la façon dont il diffère de Foundation.

Emmet? Who? Emmet is essentially the spiritual successor to Zen Coding. It enables you to enter a series of selectors (based off the CSS selectors), which then auto-completes into HTML code when you hit tab. There are plugins available for the vast majority of text editors, so you should have no problem finding one. The Emmet example For the illustration between the differences of Jeet and Foundation, I will use the same three statements in Emmet, and work from there. After each statement, I’ll hit tab and have emmet complete it, then move onto the next. They are: html:5 This generates the basic HTML5 page structure (doctype, html tags, head and body). link[href=”css/foundation.css”]:css This generates a <link rel=”stylesheet” href=”css/foundation.css”> line. Replace foundation.css for app.css for the Jeet example header+section>article+aside^footer This creates a set of header tags, followed by (“+” adjacent sibling selector) a section element with two children (“>”, an article and an aside), and then a following (“^“ up one level) footer tag. After running these commands, I will have a basic HTML5 page. To see what the end result was, look in the emmet.html file in the example code.

Emmet ? Qui ?

Emmet est essentiellement le successeur spirituel de Zen Coding. Il vous permet de saisir une série de sélecteurs (basés sur les sélecteurs CSS), qu'il complète ensuite automatiquement en code HTML quand vous appuyez sur TAB. Il existe des greffons disponibles pour la grande majorité des éditeurs de texte et vous ne devriez avoir aucun problème pour en trouver un.

L'exemple Emmet

Pour l'illustration des différences entre Jeet et Foundation, je vais utiliser les trois mêmes déclarations dans Emmet, et travailler à partir de là. Après chaque déclaration, je vais utiliser TAB et laisser Emmet compléter, puis passer à la suivante. Les voici :

html:5 Cela génère la structure de base de la page HTML5 (doctype, balises HTML, en-tête et corps). link[href=”css/foundation.css”]:css Cela génère une ligne <link rel=”stylesheet” href=”css/foundation.css”>. Remplacez foundation.css par app.css pour l'exemple Jeet.

header+section>article+aside^footer Cela crée un ensemble de balises d'en-tête, suivi par (« + » sélecteur adjacent) un élément de section avec deux enfants (« > », un article et un latéral), puis une (« ^ » remonter d'un niveau) balise pied de page.

Après l'exécution de ces commandes, je vais avoir une page de base en HTML5. Pour voir le résultat final, regardez dans le fichier emmet.html dans l'exemple de code.

The Example Assuming you wanted to create a two-column layout that spans the whole width of the webpage, you’d need to do the following for Foundation: • Create a div with class “row” within the body tags. • Create an extra style to expand the width of the row to 100%. • Add your column classes to every element. • Add a div with class “row” around the article and the aside elements within section. The same steps for Jeet (starting after the emmet file was created): • Run the cf() function on header, footer and section (Not strictly necessary, but it definitely doesn’t hurt). • Run the column function on article and aside (col(0.75) and col(0.25) respectively). • Compile the scss or stylus file.

L'exemple

En supposant que vous vouliez créer une mise en page sur deux colonnes qui s'étend sur toute la largeur de la page Web, vous auriez besoin de faire ce qui suit pour Foundation : • Créer un div avec la classe « row » dans les balises du corps. • Créer un style supplémentaire pour étendre la largeur de la ligne à 100 %. • Ajouter vos classes de colonne à chaque élément. • Ajouter un div avec la classe « row » autour de l'article et les éléments latéraux dans la section.

Les mêmes étapes pour Jeet (en commençant après la création du fichier emmet) : • Exécuter la fonction cf() sur l'en-tête, le pied de page et la section (pas strictement nécessaire, mais cela ne coûte rien de le faire). • Exécuter la fonction de colonne sur l'article et la partie latérale (col(0.75) et col(0.25) respectivement). • Compiler le fichier scss ou stylus.

In both cases, I’ve added a few extra styles to help illustrate the end layout, but as they aren’t necessary, I haven’t included them. Note: The functions for Jeet can be run in scss, but that requires the format @include col(0.75); The format I use above is for Stylus. Note #2: If you want to work on the stylus file, you’ll first need to install jeet (most easily done via npm).

Dans les deux cas, j'ai ajouté quelques styles supplémentaires pour aider à illustrer la mise en page finale, mais comme ils ne sont pas nécessaires, je ne les ai pas inclus.

Remarque : les fonctions pour Jeet peuvent être exécutées en scss, mais cela exige le format @include col(0.75); Le format que j'utilise ci-dessus est pour Stylus.

Remarque n° 2 : si vous voulez travailler sur le dossier stylus, vous devrez d'abord installer jeet (plus facile à faire par l'intermédiaire de npm).

The conclusion As you can see, the configuration of the columns occurs in a stylesheet, meaning you can focus on creating a basic html structure, and then only edit it as you add extra styles that you may need. You’re not forced to adjust the columns by editing the element tags, which is great when you’re working with a CMS and won’t necessarily be able to easily edit an HTML file to make your changes. Another benefit is that the compiled CSS file contains literally only the styles you use. While Foundation does let you pick and choose different modules to compile, there is very often a large amount of unnecessary code. Hopefully this will help bring Jeet to the attention of those just starting out, so they can focus more on good formatting and being succinct rather than conforming to the Zurb Foundation format. That isn’t to say Foundation isn’t useful for certain aspects, as it offers more than just a grid (such as pre-defined styles for buttons or menus), and it can easily be mixed with the Jeet grid.

Conclusion

Comme vous pouvez le voir, la configuration des colonnes se passe dans une feuille de style, ce qui signifie que vous pouvez vous concentrer sur la création d'une structure de base html, puis la modifier uniquement pour ajouter des styles supplémentaires au besoin. Vous n'êtes pas obligé d'ajuster les colonnes en modifiant les balises d'éléments, ce qui est génial quand vous travaillez avec un CMS et ne pourrez pas nécessairement modifier facilement un fichier HTML pour effectuer vos changements. Un autre avantage est que le fichier CSS compilé contient littéralement uniquement les styles que vous utilisez. Alors que Foundation vous laisse choisir différents modules à compiler, il y a très souvent une grande quantité de code inutile.

Espérons que cela va aider à porter Jeet à l'attention de ceux qui débutent, afin qu'ils puissent se concentrer davantage sur la bonne mise en forme et la concision plutôt que se conformer au format de la Fondation Zurb. Cela ne veut pas dire que Foundation n'est pas utile pour certains aspects, car il offre plus que juste une grille (par exemple les styles prédéfinis pour les boutons ou menus), et il peut facilement être mélangé avec la grille Jeet.

Final note: If you want Jeet to work in older versions of Internet Explorer, you’ll need to use something like selectivzr, modernizr, or HTML5shiv, or a combination. I hope this article has been helpful to anyone starting out with web programming. If you have any questions, or have used either Emmet or Jeet for an interesting project, feel free to email me at lswest34+fcm@gmail.com. Also, anyone who has a request for an article is also welcome to email me. Further Reading http://jeet.gs/ - The Jeet Framework https://github.com/mojotech/jeet/tree/master/stylus - The Jeet Framework Stylus github repository with useful stylus projects (listed under Protips). http://emmet.io/ - The Emmet website https://github.com/lswest/FCM91 - Github repository with examples.

Note finale : si vous voulez que Jeet fonctionne avec les anciennes versions d'Internet Explorer, vous aurez besoin d'utiliser quelque chose comme selectivzr, modernizr, ou HTML5shiv, ou une combinaison.

J'espère que cet article a été utile à tous ceux qui débutent dans la programmation Web. Si vous avez des questions ou avez utilisé Emmet ou Jeet pour un projet intéressant, n'hésitez pas à m'envoyer un courriel à lswest34+fcm@gmail.com. En outre, toute personne qui a une demande pour un article est également encouragée à me contacter.

Pour aller plus loin :

http://jeet.gs/ - Le Framework Jeet. https://github.com/mojotech/jeet/tree/master/stylus - Le dépôt github pour Jeet Framework Stylus avec des projets stylus utiles (listés dans Protips). http://emmet.io/ - Le site Emmet. https://github.com/lswest/FCM91 - Dépôt github avec des exemples.