Un regard dans: La langue du kit

Imaginons que vous construisiez des prototypes pour un site Web avec des fichiers HTML . Vous avez environ 10 pages HTML ou plus, et ces pages partagent certains composants communs tels que l'en-tête, la barre latérale et le pied de page.

Maintenant, voici le problème: si vous faites un changement dans ces composants partagés, vous devrez peut-être aussi les changer dans les autres fichiers . C'est contre-productif et une grosse perte de temps.

Pour éviter cela, vous pouvez essayer des moteurs de templates . Il y a un certain nombre de moteurs de modèles là-bas, chacun avec ses caractéristiques distinctives. Dans ce post, nous allons vous guider à travers celui que nous avons trouvé pour être le plus simple mais encore puissant: Kit .

Qu'est-ce que Kit?

Kit est un langage propriétaire de Codekit qui apporte la capacité d' importation de fichiers et de variables en HTML. Il est écrit avec une extension de fichier .kit . En utilisant Codekit, il peut ensuite être compilé dans un fichier HTML lors d'une sauvegarde de fichier.

Variables

Les variables du kit ne sont pas figées; ils peuvent être définis avec la notation $ ou @ . Donc, si vous utilisez Kit avec LESS, vous pouvez nommer vos variables avec la notation @ pour suivre la convention LESS. De même, vous pouvez utiliser le $ pour Sass. Les valeurs peuvent être affectées de deux points, d'un signe égal ou d'un espace. Voici quelques exemples:

Cependant, il est à noter que vous ne pouvez définir qu'une seule variable par commentaire, l'exemple suivant ne fonctionnera donc pas comme variable.

Importer

Avec le langage Kit, vous pouvez importer n'importe quel type de fichier, y compris .html, .txt, .kit et même .php . Pour importer des fichiers, vous pouvez utiliser @import ou @include .

De plus, contrairement à la définition de variables, vous pouvez importer plusieurs fichiers sur une ligne, comme ceci:

Lors de l'enregistrement, Codekit récupère le contenu de ces fichiers et les ajoute au fichier.

Utiliser Kit

Nous avons donc vu ce que Kit a à offrir. Ils peuvent ne pas être beaucoup, mais ils sont certainement assez puissants pour rendre la vie plus facile lors de la manipulation d'un tas de fichiers HTML.

Dans un scénario pratique, nous pouvons décomposer notre document en plusieurs fichiers, par exemple: header.kit, sidebar.kit, footer.kit, head.kit, closing.kit et closing.kit . Nous importerons ces fichiers dans nos pages afin que lorsque nous faisons un changement, il s'appliquera sur toutes les pages.

Ouverture et clôture du document

Je suis sûr que les noms de fichiers sont assez explicites quant à ce que les fichiers closing.kit, sauf (peut-être) le closing.kit et le closing.kit .

Dans notre exemple ci-dessous, le fichier opening.kit contient le Doctype, la balise d'ouverture HTML et la balise body d'ouverture. Dans ce fichier, nous importons également le head.kit qui contient tout ce qui est enveloppé dans le élément, et peut également définir plusieurs variables globales qui peuvent être héritées à travers tous les fichiers, comme ceci:

Notez que j'ai également ajouté deux variables: @body_class dans la balise body et @page_name dans la balise title. Ces variables nous permettront de définir différentes classes et noms de pages sur les pages. Si nous avons deux pages nommées index.kit et about.kit, dans chacun de ces fichiers, nous pouvons définir les valeurs de ces deux variables comme suit:

index.kit

à propos de

Lorsque nous aurons sauvegardé les fichiers, Codekit remplacera les variables que nous avons placées dans la balise body et le title avec ces valeurs. Une chose à noter cependant, c'est que les variables doivent venir avant l'inclusion de opening.kit, sinon elles ne seront pas récupérées.

Conclusion

Comme mentionné précédemment, Kit pourrait être la langue de modèle la plus simple disponible. Il utilise uniquement la balise de commentaire HTML et offre une grande flexibilité dans la définition des variables et l'importation des fichiers.

La possibilité d'utiliser des variables et d'importer des fichiers en HTML signifie que nous pouvons augmenter notre productivité, car nous ne devons plus changer nos codes plusieurs fois dans plusieurs fichiers, ce qui prend beaucoup de temps. De plus, cela nous permet également de rendre notre projet modulaire et donc plus maniable.

Badges PSD gratuits et ensembles de vecteurs pour vos futurs projets

Les badges peuvent être très utiles pour un concepteur car ils peuvent être incorporés dans divers objets tels que des bannières, des pages de destination et d'autres choses. Il peut même être utilisé comme filigrane. Au lieu de passer beaucoup de temps à créer vos propres badges, il y a en fait beaucoup de badges déjà disponibles pour votre usage.Dans cette

(Conseils techniques et de conception)

Vectr offre un éditeur graphique gratuit pour le navigateur et le bureau

Combien de fois avez-vous voulu créer une icône de vecteur rapide ou un design d'interface simple? C'est beaucoup plus facile avec un programme comme Sketch, mais tout bon logiciel de conception coûte aussi de l'argent.Heureusement, il y a un nouveau venu sur le bloc nommé Vectr qui prend d'assaut le monde du design. C&

(Conseils techniques et de conception)