Les développeurs Web développent en permanence des outils gratuits qui sont extrêmement utiles pour réduire le nombre de petites tâches ennuyeuses que vous devez traiter lors de la création d'un site Web ou d'une maquette.
Aujourd’hui, nous allons examiner trois nouveaux outils que vous trouverez dans la mise en page, les images d’espace réservé et les styles de texte sur votre prochain site.
Griddle.It
Le premier outil que nous allons examiner nous aide à définir rapidement une mise en page basée sur une grille. Je sais ce que vous pensez, vous détestez les cadres de grille, n'est-ce pas? Des tonnes de peluches, des noms de classe non sémantiques, une complexité inutile; tous rendent les frameworks CSS détestés par de nombreux développeurs.
Heureusement, Griddle.Il n’est pas du tout un framework CSS! Il s'agit simplement d'un graphique d'arrière-plan personnalisable qui vous aide à aligner votre contenu en insérant des colonnes et des largeurs de pixel.
Comment l'utiliser
Les instructions pour utiliser Griddle.Il se trouve sur le site web et ne pourrait être plus simple, mais pour que vous puissiez vraiment comprendre le fonctionnement de l'outil, nous allons commencer le projet d'aujourd'hui par celui-ci et en construire d'autres avec les outils suivants .
Tout ce que vous devez faire pour implémenter Griddle.Il est défini l’arrière-plan du corps de votre fichier CSS sur une URL personnalisée qui construit la grille pour vous. La structure de l'URL est la suivante:
Supposons donc que votre site Web ait une largeur de 1 200 pixels et une largeur de 12 colonnes avec une gouttière de 20 pixels. Il suffit de déposer le code CSS suivant dans votre document:
Voyez comment le? 1200-12-20? définit les termes pour lesquels nous visions? Maintenant, si vous voulez changer ceci en quelque chose d'un peu plus typique, disons 960 pixels de large avec 12 colonnes et une gouttière de 30 pixels, l'extrait serait le suivant:
Ceci applique automatiquement l'image suivante à l'arrière-plan de votre page Web. Il est assez difficile de voir dans le petit aperçu ci-dessous alors cliquez ici pour voir un exemple réel. Essayez de jouer avec les numéros dans l'URL pour voir comment ils mettent à jour l'image.
Il existe quelques fonctionnalités de base supplémentaires, telles que le changement de couleur et l'ajout de lignes horizontales, mais cela convient parfaitement à nos besoins. À partir de là, nous pouvons commencer à étoffer une présentation de page Web de base.
Ajout de contenu basé sur la grille
Pour commencer, nous allons jeter une div dans notre document qui contiendra trois colonnes de texte. Pour l'instant, nous allons simplement inclure un paragraphe d'espace réservé, puis ajouter quelques CSS pour le pousser en place.
Maintenant, étant donné que notre grille a une largeur de 960 pixels avec des gouttières de 30 pixels, nous savons que nous voudrons régler la largeur de notre div à 960px avec une marge de? Auto? pour le centrer. De même, en regardant notre image de grille, nous pouvons voir que pour diviser la page en trois colonnes paires, nous voudrons utiliser une largeur de 300 pixels pour les paragraphes.
J'ai également effectué quelques autres tâches importantes, telles que la configuration de mon flotteur pour les paragraphes suivants et le rejet de certaines marges. Notez que la marge droite est égale à la gouttière de la colonne.
Ce code nous donne le résultat ci-dessous. Comme vous pouvez le constater, notre texte s’aligne parfaitement avec notre grille d’arrière-plan. Le réglage justifié a fait quelques vilaines lacunes dans le texte, mais nous ne faisons que commencer une rapide maquette pour que je puisse vivre avec cela.
Cette structure est assez bonne et fonctionne bien avec notre grille, mais regardez ce qui se passe lorsque nous ajoutons deux paragraphes supplémentaires. La marge sur notre dernier paragraphe bousille notre mise en page.
Cela peut être facilement résolu en utilisant le pseudo sélecteur last-child, mais d'après ce que je peux dire, le support IE sur ce sujet est zilch. J'ai donc essentiellement fait la même chose avec une classe que nous pourrons utiliser ultérieurement.
Avec cela, nous avons une belle mise en page à trois colonnes. Aurions-nous pu le faire sans l'image de fond? Certainement! Mais Griddle.Il nous a aidés à visualiser notre mise en page afin que nous puissions éviter les calculs mathématiques liés à la division de trois colonnes en un espace de 960 pixels de large avec des gouttières uniformes.
Il est important de noter que notre CSS ici est très minimal comparé à ce que vous obtenez en utilisant un système de grille standard comme 960.gs.
Lorempixum
Notre site Web en texte brut est plutôt ennuyeux! Pour le moment, nous n'avons pas vraiment d'images pour l'agrémenter, alors que pouvons-nous faire pour étoffer notre mise en page?
Entrez Lorempixum, un petit service vraiment cool qui est conceptuellement presque identique à Griddle.It. Vous utilisez une URL personnalisable pour insérer une image, mais cette fois-ci, il s'agira d'un espace réservé pour le contenu, et non d'une grille d'arrière-plan utilisée pour la présentation.
À l'aide de l'application Web présentée ci-dessus, vous pouvez générer une image de la bonne taille. Vous pouvez également simplement déposer l'URL ci-dessous. Le premier nombre est la largeur et le second est la hauteur.
Il y a plusieurs façons de rendre cela plus spécifique. Vous pouvez choisir entre couleur ou noir et blanc ou même spécifier votre catégorie parmi un groupe de onze options. Par exemple, voici l'URL d'une image de ville aléatoire mesurant 510 pixels de large et 310 pixels de haut, ainsi que l'image résultante.
Mettons cela à utiliser sur notre petite page Web. Pour commencer, nous allons ajouter une grande image d'en-tête de 960 pixels de large sur 350 pixels de haut.La largeur est évidemment celle de notre site mais la hauteur est quelque chose que je viens de saisir au hasard. Voici le code HTML:
Le résultat est une présence typographique grandement améliorée sur notre page. Notez que nous n'avons pas utilisé une fraction de ce qui est inclus dans les styles Type-a-file, assurez-vous de vérifier et d'examiner tout ce que la feuille de style a à offrir. Une fois que vous avez terminé, vous pouvez également exécuter un service de nettoyage CSS, tel que CSS non utilisé, pour effacer toutes les propriétés du téléchargement de fichier type que vous n’avez pas utilisé.
Conclusion
N'oubliez pas que ce didacticiel ne présente pas de flux de travail à suivre lors de la création de vos propres sites. Le but est simplement de vous informer de certains outils gratuits que vous pouvez utiliser pour accélérer la création de maquettes de sites Web ou de structures filaires, qui peuvent ensuite être étendues à des sites à part entière.
Avec Griddle.It, vous pouvez ignorer les infrastructures CSS complexes et créer rapidement une grille personnalisée basée sur votre propre CSS. Lorempixum intervient ensuite et vous aide à combler ces lacunes d'image jusqu'à ce que vous receviez enfin les photographies que votre client avait promis de vous procurer il y a deux semaines. Enfin, Type-a-file fournit un ensemble de styles de texte prédéfinis pratiques que vous pouvez rapidement mettre en œuvre pour rendre toute la typographie de votre page plus parfaite.
Laissez un commentaire ci-dessous et indiquez-nous quels autres outils Web intéressants qui facilitent votre travail.