Récemment, nous avons jeté un coup d'œil sur un cadre très solide de la part des gens bien sur Twitter appelé Bootstrap. Cette boîte à outils est un couteau suisse d’utilité publique et comprend à la fois une grille de mise en page fonctionnelle et suffisamment d’éléments préconçu pour obtenir un excellent départ sur chaque projet.
Aujourd'hui, nous allons examiner un outil très similaire de Joshua Gatcke appelé HTML KickStart. Ce cadre déborde simplement d’excellents éléments qui vous permettront de créer des prototypes de pages Web à une vitesse réduite. Ouvrons une page avec elle pour voir ce que nous pensons.
Ce que nous construisons
Avant de vous expliquer ce qu'est HTML KickStart et comment vous pouvez l'utiliser, voici un aperçu du résultat final du didacticiel d'aujourd'hui:
Démo: Cliquez ici pour lancer.
Qu'est-ce que HTML KickStart?
Selon 99Lime.com (la page d'accueil du projet), HTML KickStart est un ensemble ultra-maigre de fichiers HTML5, CSS et jQuery (javascript), de mises en page et d'éléments conçus pour vous donner une longueur d'avance et vous faire gagner 10 heures de travail. prochain projet web.
Selon cette affirmation, ce projet pourrait théoriquement nous épargner une, voire plusieurs journées complètes de travail. Ce n'est certainement pas une petite promesse! Comment ça se passe sur une telle réclamation? En fournissant un vaste ensemble de fonctionnalités. Ne demandez pas ce qu'il y a dans HTML KickStart ?? Au lieu de demander, ne pas en HTML KickStart ?? La réponse est bien sûr, "pas grand chose".
Mise en route: menu de navigation
Pour voir comment tout cela fonctionne, nous allons élaborer un projet rapide. Si vous souhaitez suivre, téléchargez le projet et commencez par l'exemple de page HTML, veillez simplement à supprimer tous les éléments de substitution afin de disposer d'une nouvelle page vierge.
La première chose que nous allons faire est d’ajouter une navigation de dessus. Si nous parcourons la page des éléments HTML KickStart, nous trouverons trois options de menu intégrées parmi lesquelles choisir.
Nous voulons l’option du menu horizontal afin de cliquer sur le bouton? Horizontal? onglet et trouver un exemple de code que nous pouvons utiliser à nos propres fins.
Le système ici est vraiment simple, vous créez simplement une liste non ordonnée avec le menu? classe et chaque élément de la liste deviendra un élément de menu. La classe? Courant? est ajouté à la page actuelle et des sous-listes peuvent être utilisées pour créer des menus déroulants.
Avec seulement ce petit peu de HTML et zéro travail CSS, notre menu a fière allure et est parfaitement fonctionnel. Comme avec le CSS, la magie JavaScript est déjà prise en charge pour nous.
Notez qu'il y a déjà une image de fond appliquée à notre corps. Il s’agit de l’image de grille par défaut fournie avec le cadre. Nous verrons comment la remplacer plus tard.
Message de bienvenue
Nous souhaitons ensuite ajouter un gros titre à notre page pour accueillir tous les visiteurs. Cela utilisera les styles de typographie prédéfinis.
Les balises h1 et p contiendront déjà un style par défaut, mais à ce stade, rien ne gouverne notre mise en page; nous devrons donc vous aider avec quelques CSS personnalisés.
Pour commencer, nous voudrons centrer ce texte dans la fenêtre. Le paragraphe et l'en-tête ont également une marge énorme entre eux donc nous devrons resserrer cela. Allez dans le? Style.css? classer et commencer une nouvelle section avec vos propres styles. Puis insérez ce code:
Avec cela, notre titre est magnifique. Il est parfaitement centré et a une hauteur verticale considérablement réduite.
Utiliser la grille
Nous n'en avons pas encore vraiment besoin, mais HTML KickStart est fourni avec une grille de mise en page prédéfinie. Si vous avez déjà utilisé quelque chose comme 960.gs auparavant, il n'y aura pas de surprises ici. C'est votre grille de base de 12 colonnes qui utilise des classes numérotées (ex: col_5).
Comme vous pouvez le constater, pour obtenir toute la largeur, vous avez besoin que le total de vos colonnes soit égal à 12. Par conséquent, si vous souhaitez scinder la page en deux, vous allez créer deux divs, chacun ayant la classe. ? col_6? (6 + 6 = 12). Vous pouvez le faire avec n'importe quelle combinaison qui ajoute 12: col_7 + col_5, col_2 + col_10, etc.
Pour tester cela, nous ferons ce que je fais toujours pour tester un système de grille: coder une mise en page de base à trois colonnes. Le CSS pour cela est déjà en place, il est donc aussi facile de créer une disposition en trois colonnes que de créer trois div, chacune avec le? Col_4? classe.
Dans chaque div, nous allons lancer trois éléments: un titre (h3), un paragraphe et une image. Les images d'espace réservé sont saisies via le service placehold.it.
Tout ce que vous avez à faire est de remplacer le? Grid.png? image avec votre propre motif de fond. J'ai saisi celui-ci et l'ai déposé juste pour donner un peu de contraste à notre page.
Diaporamas et boutons
Nous avons encore à peine effleuré la surface des grands éléments disponibles dans ce cadre. Décomposons une nouvelle section rapide qui utilise quelques fonctionnalités supplémentaires.
Ici, il utilise une div laide et non sémantique pour nettoyer les flotteurs, mais il s’agit d’une pratique assez courante et qui n’est pas vraiment la fin du monde, ne vous en faites donc pas trop.
Pour styler le div du pied de page, un peu de remplissage et de couleur ont été appliqués et le petit lien en haut de la page a été un peu plus joli. Cette transition est animée via du code JavaScript intégré plus sophistiqué.
Produit final
Nous pourrions continuer pendant des jours avec tout ce qui se trouve dans cette boîte à outils. Vous y trouverez également des tableaux pré-stylés, des formulaires, des galeries d'images, de la chapelure, des onglets, des règles horizontales et même des extraits de code.
Avec ce que nous avons vécu, vous obtenez une idée de base sur la manière dont tout cela fonctionne. La documentation étant très complète, il vous suffit de trouver l'élément que vous souhaitez insérer, puis de coller le code dans votre code HTML et de le modifier au besoin. Voici un autre regard sur la page que nous venons de construire:
Démo: Cliquez ici pour lancer.
Pour qui est-ce?
Maintenant que nous avons vu Comment pour utiliser HTML KickStart, il est important de discuter Pourquoi vous l'utiliseriez. Peut-être encore plus pertinent est de savoir qui devrait penser à donner une chance à cela.
Comme la plupart des frameworks et des standards complets, HTML KickStart vous fournit un point de départ vraiment solide pour vos projets de développement, non seulement du point de vue HTML, mais également du CSS et même de JavaScript. Vous devriez penser à y jeter un coup d'oeil si vous n'avez pas actuellement de système en place qui facilite le démarrage de nouveaux projets.
«La force réelle de ces types de boîtes à outils est le prototypage rapide.Gardez à l'esprit qu'il y a beaucoup dans cette boîte à outils, trop pour le goût de nombreux développeurs. Vous pouvez choisir ce que vous voulez et laisser de côté le reste, mais vous pouvez également considérer que la force réelle de ces types de kits d'outils est le prototypage rapide. Dans un produit fini, vous voudrez peut-être prendre le temps d'élaborer un schéma de disposition et tous ces éléments de style manuellement, mais dans les premières étapes du concept, pourquoi ne pas mettre à niveau vos structures filaires non fonctionnelles pour qu'elles ressemblent à ce que nous avons construit aujourd'hui? C'est beaucoup plus interactif qu'un croquis plat et ne prend vraiment pas beaucoup plus de temps à casser.
Est-il bon?
Certes, ce n'est pas le seul produit de ce type sur le marché. Il existe un million de cadres gratuits différents, chacun avec son propre degré de style personnalisé. Comme je l'ai mentionné ci-dessus, la chose la plus proche de HTML KickStart que je connaisse est le Bootstrap de Twitter. En fait, les deux projets sont presque identiques au premier abord.
Après avoir essayé les deux, il y a certainement beaucoup de choses que j'aime mieux à propos de Bootstrap. Pour commencer, la mise en page est un peu plus serrée et la documentation utilise des fonctionnalités avancées telles que le décalage des colonnes. J'aime aussi mieux les styles de typographie de Bootstrap et j'apprécie vraiment l'intégration de LESS.
Cela étant dit, il y a certaines choses que j'aime à propos de HTML KickStart et que vous ne trouverez pas dans Bootstrap. Par exemple, la fonction de diaporama est un bonus énorme et quelque chose que j'utiliserais vraiment beaucoup. En outre, tout le JavaScript en HTML KickStart? Fonctionne? alors que je devais faire beaucoup de bidouillage pour que les choses fonctionnent dans Bootstrap.
En fin de compte, je recommande que vous donniez à la fois un rapide essai routier pour voir ce que vous préférez. Mieux encore, utilisez ces deux sources d’inspiration pour développer votre propre cadre personnalisé, adapté à vos besoins.
Conclusion
HTML KickStart est un projet génial et j'apprécie vraiment tout le travail manuel qui y a été consacré. Lorsque des membres de la communauté de développement distribuent librement de tels projets, je suis toujours émerveillé par leur générosité et leur volonté d'aider les autres.
Vous devez maintenant avoir une solide compréhension de ce qu'est HTML KickStart, de son fonctionnement, de son utilisation et de sa pertinence ou non. Laissez un commentaire ci-dessous et dites-nous ce que vous pensez. Comment ce projet se compare-t-il aux autres boîtes à outils similaires que vous avez utilisées?