YUI grids.css est-il vraiment si flexible?

StackOverflow https://stackoverflow.com/questions/478825

  •  20-08-2019
  •  | 
  •  

Question

Le projet YUI de Yahoo contient des composants vraiment géniaux et bien testés que je commence tout juste à intégrer à mon site (à largeur fixe). En fait, je suis très enthousiaste. Je suis depuis quelque temps loin de la création de sites orientée vers le consommateur et je m'amuse beaucoup à voir ce qui a évolué au cours des dernières années.

J'aime tellement les composants YUI et reset.css - j’ai supposé que j’utilisais les grilles Yahoo YUI. CSS était une évidence. En fait, ils disent le vendre plutôt bien eux-mêmes:

  

& "; Combinaison des largeurs de page, modèle   Les préréglages et les grilles de nidification, presque   nombre infini de pages complexes   les dispositions sont possibles & ";
  

(à partir du lien grids.css ci-dessus)

Cependant, j'essaie de faire des mises en page très simples en 3 colonnes et je ne peux pas sembler faire certaines choses de base - ni trouver de bonnes explications dans la documentation pour savoir comment les faire.

Par exemple:

  • Puis-je changer de gouttière entre les colonnes?
  • Il est très facile d'imbriquer les mises en page de type 1/2, 2/3, 1/4 l'une avec l'autre, mais puis-je imbriquer les yui-t1 modèles?
    • (J'ai eu un nombre limité de sélections imbriquées <=> mais j'ai fini par avoir plusieurs divs ayant le même identifiant, ce qui m'a amené à croire que je faisais quelque chose de mal.

Mon site est beaucoup plus "axé sur le design" - c’est-à-dire un balisage Photoshop qui doit être transformé en une page.

Mon impression jusqu'ici est que YUI Grid est adapté à davantage de sites "axés sur le contenu" où le contenu, tel que les actualités, ne doit pas nécessairement s'intégrer dans un design précis. Est-ce une déclaration juste - ou me manque-t-il un tour de magie pour utiliser grids.css?

Suis-je mieux adapté en utilisant une grille alternative à positionnement fixe?

Alternatives à YUI  - comme prévu dans une autre publication stackoverflow

Était-ce utile?

La solution

Vous pouvez modifier la gouttière en remplaçant l'attribut de marge. Vous pouvez le faire dans tous les domaines en remplaçant un sélecteur tel que .yui-gb {}, etc. ou toute autre disposition que vous utilisez. Si vous voulez juste faire un ensemble de colonnes spécifique, vous pouvez ajouter une autre classe et l'utiliser, assurez-vous simplement d'avoir plus de spécificité que les règles YUI (ou faites la même chose et votre règle est plus basse dans les fichiers CSS).

Je ne pense pas que les modèles puissent être imbriqués car ils ont été conçus pour être une solution rapide pour faire une page entière.

La façon dont les grilles ont été créées était spécifiquement conçue pour les tailles de page que nous obtenons et qui sont définies par nos propres directives UED et nos formats d’annonce. Rien ne vous empêche d’utiliser le cadre comme base et de remplacer les largeurs / gouttières exactes, etc.

Avertissement: je travaille pour Y!

Autres conseils

Cette réponse a été fournie par Nate Koechley à l'adresse forum YUI - Ingénieur principal YUI, équipe YUI

  

Je recommande de ne pas toucher directement les nœuds qui constituent le squelette de la grille. Vous êtes le bienvenu, bien sûr, , mais comme vous l'avez remarqué, cela peut avoir une incidence sur leur stabilité et leur comportement .

Et

  

Je pense qu'il est préférable de laisser les nœuds de Grids comme squelette intact et de placer le balisage de contenu dans cette structure . C’est un peu de balisage supplémentaire, oui, mais j’envisage l’encapsulation car votre contenu peut alors se déplacer librement et en toute sécurité indépendamment de la grille .

J'espère que cela pourra être utile à quelqu'un qui souhaite utiliser la grille YUI

MISE À JOUR

Supposons qu'il y ait du balisage de grille yui 

<div class="yui-g">
    <div class="yui-u first"></div>
    <div class="yui-u"></div>
</div>

Et vous souhaitez ajouter une marge supplémentaire. Comme l'a dit Nate, ajoutez du balisage supplémentaire 

<div class="yui-g">
    <div class="yui-u first">
        <div class="specialCss">
            your content goes here
        </div>
    </div>
    <div class="yui-u">

    </div>
</div>

Et définir sa marge, son rembourrage, etc. ... 

.specialCss {
    margin:10px;
}

Ainsi, vous n’impacterez pas la stabilité et le comportement de la grille CSS YUI

Il semble que vous deviez effectuer de nombreuses personnalisations aux paramètres par défaut pour les grilles YUI, ce qui pour moi, déçoit en quelque sorte le point de l'utiliser - ou plutôt, le rend moins flexible et donc moins efficace.

Avez-vous déjà regardé la conférence donnée par Nate Koechley? De mémoire, je pense qu’il mentionne qu’il est possible de changer de gouttière entre les colonnes et explique comment procéder aux personnalisations.

http://developer.yahoo.com/yui/grids/

En gros, vous pouvez fouiller dans les fichiers CSS pour les grilles et identifier l’emplacement de la gouttière entre les colonnes et l’ajuster dans votre propre fichier CSS.

Je voulais juste mentionner que dans les nouvelles grilles YUI 3, il existe un exemple spécifique expliquant comment spécifier l'espacement des grilles.

http://developer.yahoo.com/yui /3/examples/cssgrids/cssgrids-units.html

Si vous recherchez des alternatives à YUI, consultez le générateur de CSS Blueprint ( http://kematzy.com / blueprint-generator / ). C'est un bon moyen rapide de personnaliser votre grille CSS (à l'aide du Blueprint CSS ).

Malheureusement, je ne sais pas s'il existe un outil similaire pour YUI ou non.

Les les grilles YUI 3 sont puissantes. Flexibe, stable et simple . Jetez un coup d'oeil.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top