Comment démarrer votre HTML
Un objectif principal de tous les développeurs est un développement plus rapide, en particulier un démarrage rapide. Au cours des dernières années, des dizaines de frameworks ont été mis au point pour que nos prototypes se développent en quelques minutes.
Malheureusement, nombre de ces frameworks datent rapidement, au fur et à mesure que les exigences du projet évoluent et doivent être actualisés ou remplacés.
Si vous recherchez un framework récent qui résout les problèmes rencontrés par les anciennes solutions tout en optimisant votre flux de travail, vous ne pouvez pas vous tromper avec HTML Kickstart.
La grille
La grille est l'un des aspects les plus importants de tout cadre, d'autant plus qu'une grille flexible détermine la réactivité d'un site.
HTML Kickstart nous offre l'option d'une grille flexible ou d'une grille standard (non flexible) - bien que cela ne soit pas clair lorsque vous utiliserez cette dernière, étant donné la prédominance croissante des appareils mobiles.
Pour créer une grille flexible avec deux colonnes de taille égale, nous utiliserons:
Content HereContent HereComme vous pouvez le voir, nous avons simplement ajouté des classes simples à trois div. Si vous préférez la grille non flexible, il vous suffit de supprimer le nom de classe flex du div externe.
(Notez que la grille flexible s'étendra sur toute la largeur de l'écran, alors que la grille non flexible aura une largeur maximale de 1024px.)
En plus des classes basées ci-dessus, il existe un certain nombre de classes d'assistance que nous pouvons utiliser, par exemple:
- show-desktop et hide-desktop avec ces classes, vous pouvez décider si vous voulez que cette grille soit visible sur un ordinateur de bureau.
- show-tablet et hide-tablet le même concept s'applique ici, mais pour les tablettes.
- encore une fois, ces classes dictent la visibilité, cette fois pour les téléphones intelligents.
Si nous voulions cacher notre grille à deux colonnes sur les smartphones, par exemple, nous utiliserions du code comme ceci:
La navigation
HTML Kickstart nous donne trois options de menu: vertical gauche, vertical droit et horizontal.
La version que vous voulez le plus souvent est le menu horizontal. Pour le coder, nous avons juste besoin de listes non ordonnées:
Si vous voulez un menu vertical à gauche, ajoutez simplement vertical à l'ouverture ul, et si vous voulez un menu vertical à droite, ajoutez verticalement à droite , comme ceci:
C'est vraiment simple de coder les menus réactifs avec HTML Kickstart.
Styles par défaut
HTML Kickstart vous offre d'excellents styles de base. Évidemment, vous voudrez les affiner pour votre projet, mais pour un prototypage rapide, ils sont plus que suffisants.
En ce qui concerne la typographie, HTML utilise KickStart Steve Matteson 'S Arimo police par défaut. Vous pouvez voir la gamme complète des paramètres de type ici.
Les styles de boutons sont toujours au centre de l'attention dans tous les environnements, et HTML Kickstart est fourni avec des boutons de toutes formes et de toutes tailles. Vous n'avez même pas besoin d'utiliser des classes pour cela, créez simplement une balise de bouton et les styles seront automatiquement appliqués.
Si vous préférez que les styles de bouton soient appliqués à une balise d'ancrage, il vous suffit d'y ajouter la classe de bouton :
Il existe également un certain nombre de styles différents que nous pouvons appliquer:
Enfin, nous avons également la possibilité de créer une barre de boutons, avec une syntaxe similaire au menu horizontal:
Images
HTML Kickstart permet d'améliorer UX en générant des fenêtres contextuelles pour les galeries et les images. C'est une bien meilleure solution que d'ouvrir une nouvelle fenêtre.
Pour créer une galerie pop-up entièrement fonctionnelle basée sur JavaScript, tout ce dont nous avons besoin est le code suivant:
C'est simple à mettre en œuvre et vous n'avez pas besoin d'une seule ligne de JavaScript.
Les images ont également de grandes classes d'aide, telles que la légende. Cette classe appliquée à une image affiche le titre de l'image comme une légende stylisée:
Nous avons également des classes align-right et align-left que nous pouvons utiliser pour faire flotter les images à gauche et à droite. (HTML Kickstart ajoutera une petite marge pour que les images ne soient pas en contraste avec le texte.)
Et bien sûr, HTML Kickstart nous fournit également des diaporamas simples. Il utilise BXSlider curseur pour gérer cela.
Le code d'un simple curseur ressemblera à ceci:
A Content Slider
This slider handles HTML content as well as images.
Le curseur est tactile pour les appareils mobiles et, encore une fois, vous n'avez pas besoin d'une seule ligne de JavaScript.
Formes
La dernière chose que je veux vous présenter est les formes. Les formulaires sont indispensables à tout framework, car ils sont l'une des choses les plus difficiles à coiffer sur une page Web.
HTML Kickstart conserve sa simplicité en ce qui concerne les formulaires, et une forme verticale peut être créée aussi simplement que:
Comme vous pouvez le constater, je n'ai eu à utiliser aucune classe pour ce formulaire. Tout ce que j’ai fait, c’est d’ajouter la classe verticale en haut pour que les éléments de formulaire ne soient pas traités comme étant en ligne.
Une de mes parties préférées de HTML Kickstart sont les simples avis d'erreur utilisés avec les formulaires:
Conclusion
Il y a des tonnes d'options qui viennent avec HTML Kickstart, nous avons vraiment seulement gratté la surface; il y a un énorme ensemble d'icônes, d'infobulles et même d'onglets.
La véritable force de HTML Kickstart est la simplicité de son code. L'absence de divs et de classes superflus en fait un excellent gain de temps, moins de code signifie moins d'erreurs. Si vous cherchez à commencer à coder votre propre code HTML à partir de zéro, ou si vous cherchez un cadre simple pour prototyper rapidement un design, HTML Kickstart est une excellente option.
Avez-vous utilisé HTML Kickstart? Préférez-vous un cadre différent? Faites le nous savoir dans les commentaires.