La boîte à outils et ressources du système de grille 960
Le système de grille 960 a été créé par Nathan Smith pour rationaliser le flux de travail de développement Web en fournissant des dimensions couramment utilisées, basées sur une largeur de 960 pixels.
Le 960.gs (ou tout autre framework CSS) a été principalement développé pour le prototypage rapide, réduisant les tâches répétitives et fastidieuses, mais est également plus que approprié pour être utilisé pour tout projet de conception de sites Web.
Il donnera à votre site une base structurée et solide pour vous permettre de concevoir et d’adapter votre conception.
Dans cet article, vous trouverez des didacticiels, une vitrine de sites conçus à l'aide du 960.gs, des spin offs, des thèmes WP de base construits sur le 960.gs et des structures alternatives possibles, si pour une raison quelconque vous n'aimez pas la grille 960 système.
Dans le package de téléchargement, vous trouverez des feuilles de croquis imprimables, des dispositions de conception et un fichier CSS ayant des mesures identiques.
Vous avez deux modèles, une grille de 12 colonnes divisée en portions de 60px et une grille de 16 colonnes divisée en 40px. Chaque colonne a 10 pixels de marges à gauche et à droite, ce qui crée des gouttières de 20 pixels de large entre les colonnes.
Page d'accueil: 960.gs Page d'accueil .
Télécharger : Télécharger le 960.gs .
Démo: Voir la page de démonstration 960.gs .
960.gs Tutoriels
960 CSS Framework - Apprenez les bases
Ceci est un excellent tutoriel de base pour vous aider à démarrer, écrit par Stefan Vervoort de divitodesign. Vous êtes initié aux bases du chargement du framework, vous pouvez donc commencer à développer rapidement avec 960.gs.
Travailler avec 960.gs
Un autre tutoriel qui vous aidera à comprendre les bases de l'installation du 960.gs, particulièrement utile pour les CSS.
Un aperçu détaillé du cadre CSS 960
Une fois que vous en aurez profité pour passer du temps avec 960.gs, vous serez étonné de voir combien de temps peut être économisé lors du développement de vos projets Web.
Prototypage avec le framework CSS Grid 960
Cet article couvre tout le processus de prototypage, explique les bases de la grille 960, planifie la grille pour une conception et codifie le prototype. Aussi vite que ça.
Construire un thème de journal avec WP_Query et le framework CSS 960
Ce didacticiel vous apprendra à utiliser WP_Query pour créer un thème de journal à trois colonnes contenant tous les articles de votre blog principal dans la colonne principale, ainsi qu'un ensemble d'articles provenant d'une catégorie sélectionnée. En utilisant le framework CSS 960 pour la mise en page et le reste du thème, on vous montre comment cela va grandement accélérer votre productivité.
Concevoir un nouveau thème de blog sur la grille 960
Ce didacticiel vous apprend à créer un thème de blog dans Photoshop conçu pour être utilisé dans le cadre 960. Ce tutoriel a été conçu plus pour la théorie de la conception Web que pour la technique Photoshop, mais il consacre beaucoup plus de temps à la théorie et à l’application.
960 Spin Offs
Typogridphy - Un cadre CSS de mise en page typographique et de grille
Typogridphy est un framework CSS conçu pour permettre aux concepteurs Web et aux développeurs frontaux de coder rapidement des mises en page de grille agréables par typographie. Il vous permet de créer des dispositions de grille polyvalentes et attrayantes, il valide les règles xHTML et CSS strictes. Il utilise également une méthode typographique appelée «création de rythme vertical» , selon laquelle toutes les lignes adjacentes de texte sont alignées horizontalement, indépendamment des sauts de ligne et des nouveaux paragraphes.
Démo: Typogridphy Demo
Ouverture - Système de grille Fluid 960 1.0
Développé par Stephen Bau de Design7 , il a créé une bibliothèque d'éléments HTML couramment utilisés, en les combinant avec CSS pour la typographie et la mise en page, et en ajoutant des effets de base à partir de bibliothèques JavaScript populaires (principalement MooTools). Au téléchargement, vous avez le choix entre trois modèles: 960 px de largeur fixe, largeur de fluide 12 colonnes ou largeur de fluide 16 colonnes . Ces modèles sont incroyables, il faut voir les détails pour le croire.
Démo: Démonstration d'ouverture .
Vitrine
Tous les beaux sites ci-dessous ont été construits avec le système de grille 960:
Thèmes WordPress
Tout comme le 960.gs actuel, ces thèmes WP sont virtuellement sans style et avec des fonctionnalités très basiques, mais ils ont été construits en utilisant le 960.gs. Très utile pour tout développeur WP.
5 ans de thème WordPress
Un thème WP de base construit à l'aide du 960.gs.
Thème WordPress 960bc
Le thème 960bc est essentiellement un canevas vierge avec un style minimal et aucune image basée sur le système de grille 960 (12 colonnes uniquement) pour les développeurs WordPress qui souhaitent travailler dans une configuration traditionnelle basée sur une grille.
Alternatives possibles
Choisir un framework CSS peut être difficile, si le 960.gs ne vous convient pas, vous pourriez peut-être essayer certains des frameworks ci-dessous.
Blueprint: Un cadre CSS
Blueprint est un framework CSS, qui vise à réduire votre temps de développement CSS. Il vous offre une base CSS solide pour construire votre projet, avec une grille facile à utiliser, une typographie judicieuse et même une feuille de style pour l'impression. Il est beaucoup moins lourd que le framework YUI, et est peut-être comparable à la 960.gs en termes de facilité d'utilisation.
CSS-Boilerplate
De l'un des auteurs de Blueprint. Il a créé un cadre simplifié qui fournit l'essentiel pour commencer tout projet. Ce cadre est léger et s’efforce de ne pas suggérer des conventions de dénomination non sémantiques.
Elements - Un cadre CSS terre à terre
Il a été conçu pour aider les concepteurs à écrire des CSS plus rapidement et plus efficacement. Elements va au-delà du simple cadre, c'est son propre workflow de projet. Il a tout ce dont vous avez besoin pour compléter votre projet.
WYMstyle - Framework CSS - Présentation
Le but de ce projet est de fournir un ensemble de fichiers CSS modulaires bien testés, pouvant être utilisés pour concevoir rapidement des sites Web.
Encore une autre mise en page multicolonne | YAML
"Yet Another Multicolumn Layout" (YAML) est un framework (X) HTML / CSS permettant de créer des mises en page flottantes modernes et flexibles. La structure est extrêmement polyvalente dans sa programmation et absolument accessible pour les utilisateurs finaux.
CleverCSS
CleverCSS est un petit langage de balisage pour CSS inspiré de Python qui peut être utilisé pour créer une feuille de style de manière propre et structurée. À bien des égards, il est plus propre et puissant que CSS2.
sparkl CSS Framework
Sparkl combine le balisage POSH, le CSS Bulletproof et le JavaScript non intrusif dans un cadre de développement Web facile à utiliser, qui facilite la création de sites Web à l'épreuve des balles conformes aux normes Web. Il utilise un cadre modulaire vous permettant d'utiliser ce dont vous avez besoin et de ne pas utiliser ce que vous n'avez pas.
Le framework CSS de l'interface utilisateur jQuery
Query UI inclut un framework CSS robuste conçu pour créer des widgets jQuery personnalisés. Le framework comprend des classes qui couvrent un large éventail de besoins communs en matière d’interface utilisateur et peuvent être manipulées à l’aide de jQuery UI ThemeRoller. En construisant vos composants d'interface utilisateur à l'aide de l'infrastructure CSS de l'interface utilisateur jQuery, vous adopterez des conventions de marquage partagées et faciliterez l'intégration du code dans l'ensemble de la communauté de plug-ins.
Écrit exclusivement pour WDD par Paul Andrew de Speckyboy.com
Utilisez-vous les 960gs pour vos sites Web? Quels sont les principaux avantages? Nous aimerions recevoir de vos nouvelles…