Frustré par la qualité des modèles CSS gratuits en ligne mais vous ne parvenez pas à créer vos propres modèles? Fatigué de passer des heures à essayer de personnaliser des conceptions préfabriquées boiteuses?
Aujourd'hui, nous vous proposons plus de sept cents modèles CSS téléchargeables gratuitement qui se concentrent sur la fourniture d'une mise en page de base. En utilisant ces dispositions inter-navigateurs, vous pouvez éviter les problèmes de positionnement CSS sans fin et vous concentrer sur vos points forts: la conception.
Pour qui sont-ils?
Vous êtes nombreux à jouer au design depuis des années, mais vous venez tout juste de commencer à créer des sites Web et à les coder à la main. Vous avez suffisamment de compétences en Photoshop pour créer un beau design et suffisamment de connaissances de base en CSS pour rendre le texte joli.
Cependant, le plus gros problème rencontré par de nombreux nouveaux développeurs peut simplement être de faire fonctionner leur présentation de base en CSS. Le positionnement avec CSS peut être beaucoup plus délicat que le style de base, en particulier lorsque vous commencez à intégrer plusieurs navigateurs. Si vous ne savez pas comment résoudre un problème, des heures de peaufinage peuvent vous ramener à votre point de départ, immensément frustrés et désespérément désireux d'obtenir de l'aide.
Les schémas simples téléchargeables ci-dessous vous fourniront une base solide sur laquelle construire vos sites et vous fourniront d'excellents exemples pour apprendre à créer le vôtre.
Pourquoi pas des modèles complets?
Si vous lancez une recherche rapide dans Google pour rechercher des modèles CSS gratuits, vous en trouverez un million. Cependant, la plupart d'entre elles ne conviennent pas aux vrais développeurs Web souhaitant créer des sites uniques. Ce que vous obtenez généralement est quelque chose comme ceci:
Des modèles tels que celui-ci vous obligent vraiment à adopter un modèle pré-établi laide que vous devez suivre ou passer des heures à séparer pour essayer de le personnaliser. En fin de compte, il aurait été plus facile de coder vous-même à partir de zéro!
Je pense qu'il est beaucoup plus utile de télécharger quelques mises en page CSS super basiques aussi simples que possible. Cela vous permet de prototyper rapidement la mise en page d'une page sans perdre la moitié de votre journée à trier le code dont vous n'avez pas besoin. La mise en page typique de cette catégorie ressemble plus à ceci:
Ici, nous n’avons ni texte ni images à jeter, c’est juste un squelette nu prêt à être rempli. Jetez un coup d'œil aux excellentes ressources ci-dessous pour trouver tous les modèles de présentation de base dont vous aurez besoin!
CSS primaire: 22 mises en page
"Primary est un simple framework CSS, conçu pour les développeurs et les concepteurs afin de rendre l'utilisation de CSS aussi simple que possible."
Petites boîtes: 16 mises en page
Une collection intéressante de quatre mises en page de base effectuées à travers un certain nombre de méthodes différentes.
CSS Easy: 8 mises en page
Une collection de quatre mises en page fixes et quatre fluides visant à vous enseigner les bases du positionnement CSS.
Max Design: 25 mises en page
Une solide collection de modèles super basiques, dont beaucoup sont accompagnés de didacticiels afin que vous puissiez apprendre comment procéder.
Iron Meyers: 224 dispositions
Certainement l'une des meilleures ressources de la liste. Ce site contient 56 présentations de base, chacune en quatre versions: 100% fluide, 974 pixels, 950 pixels et 750 pixels.
Dynamic Drive: 47 mises en page
Ces mises en page CSS sont divisées en quatre catégories: deux colonnes, trois colonnes, des mises en page fixes, des mises en page liquides et des cadres CSS.
Intensivstation: 16 mises en page
Une petite mais utile collection de mises en page XHTML 1.0 et CSS2.
BlueRobot: 3 mises en page
Seulement trois modèles ici, mais ce sont des mises en page solides et populaires que vous voudrez certainement vérifier si vous avez besoin de quelque chose de base.
Matthew James Taylor: 7 mises en page
Pas de hacks CSS. SEO amical. Pas d'images. Pas de JavaScript. Compatible avec plusieurs navigateurs et iPhone. Ces schémas sont également accompagnés de nombreux documents pour vous aider à démarrer.
CSS gratuits: 252 Layouts
252 mises en page CSS qui ne manqueront pas de vous mettre sur la bonne voie. Rapide à télécharger et facile à personnaliser!
Code Sucks: 95 Layouts
Code Sucks possède une collection impressionnante de mises en page téléchargeables gratuitement comprenant 53 versions à largeur fixe et 42 versions à colonne factice. Les mises en page de colonnes fausses utilisent une image d’arrière-plan pour donner l’impression que les colonnes gauche et droite ont la même hauteur et sont indépendantes l’une de l’autre.
Conclusion
Déchirer les schémas ci-dessus devrait vous apprendre énormément sur le positionnement CSS de manière beaucoup plus pratique que la lecture de trois livres sur CSS. Assurez-vous de ne pas simplement implémenter ces modèles, mais bien de casser les pneus et d'ajuster les chiffres pour voir comment ils fonctionnent.
Laissez un commentaire ci-dessous et laissez-nous savoir si vous avez trouvé cet article utile. Assurez-vous également de partager toutes les autres ressources utiles que vous utilisez pour les dispositions CSS de base!