YUI grids.css действительно такой гибкий? - PullRequest
Новая
       20

YUI grids.css действительно такой гибкий?

7 голосов
/ 26 января 2009

YUI-проект Yahoo имеет несколько действительно хороших, хорошо протестированных компонентов, которые я только начинаю интегрировать в свой сайт (фиксированной ширины). Я на самом деле очень взволнован - я какое-то время был в стороне от создания ориентированных на потребителя сайтов, и мне очень приятно наблюдать за тем, что развивалось за последние несколько лет.

Мне очень нравится компонент YUI и reset.css - я предположил, что мое использование Yahoo YUI grids.css не представляет никакой сложности. На самом деле они говорят, что продают это довольно хорошо сами:

"Объединение ширины страницы, шаблон Пресеты и Вложенные сетки, почти бесконечное количество сложных страниц макеты возможны "

(ссылка выше на grids.css)

Однако я пытаюсь сделать несколько действительно простых 3-х колоночных макетов и, похоже, не могу сделать некоторые базовые вещи - и не могу найти в документации хорошего объяснения того, как это сделать.

Например:

  • Могу ли я изменить желоб между столбцами?
  • Вложение макетов типа 1/2, 2/3, 1/4 друг в друга очень легко, но могу ли я вложить шаблоны yui-t1?
    • (Я получил ограниченное количество вложенных селекторов yui-t1, но в итоге получилось несколько div с одинаковым идентификатором, что привело меня к мысли, что я что-то делаю не так.

Мой сайт гораздо более «ориентирован на дизайн», то есть есть разметка фотошопа, которую нужно сделать на странице.

До сих пор у меня сложилось впечатление, что YUI Grid подходит для более «контент-ориентированных» сайтов, где у вас есть контент, такой как новости, который не обязательно должен вписываться в точный дизайн. Это справедливое утверждение - или я упускаю какой-то магический трюк, чтобы использовать grids.css?

Лучше ли я использовать альтернативную сетку с фиксированным позиционированием?

Альтернативы YUI - как указано в другом сообщении stackoverflow

Ответы [ 6 ]

8 голосов
/ 21 июня 2010

Этот ответ предоставил Нейт Кочли на форуме YUI - Старший инженер YUI, команда YUI

Я рекомендую, чтобы люди не касались непосредственно узлов , которые являются каркасом сетки. Вы можете, конечно, , но, как вы заметили, это может повлиять на их стабильность и поведение .

И

Я думаю, лучше оставить узлы гридов в качестве нетронутого скелета , а поместить разметку вашего контента в эту структуру . Это немного лишняя разметка, да, но я думаю, что это инкапсуляция , потому что ваш контент может свободно и безопасно перемещаться независимо от сетки .

Надеюсь это может быть полезно кому-то , кто хочет использовать сетку YUI

UPDATE

Предположим, здесь идет некоторая разметка yui- grid 

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

И вы хотите добавить дополнительную маржу. Как сказал Нейт, добавьте дополнительную разметку 

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

    </div>
</div>

И определить его поля, отступы и т. Д. * 

.specialCss {
    margin:10px;
}

Это не повлияет на стабильность и поведение сетки YUI CSS

6 голосов
/ 26 января 2009

Вы можете изменить желоб, переопределив атрибут поля. Вы можете сделать это по всем направлениям, переопределив селектор, такой как .yui-gb {} и т. Д., Или какой бы макет вы не использовали. Если вы просто хотите сделать один конкретный набор столбцов, вы можете добавить другой класс и использовать его, просто убедитесь, что у вас больше специфичности, чем у правил YUI (или сделайте то же самое, и ваше правило будет меньше в файлах CSS).

Я не думаю, что шаблоны могут быть вложенными, так как они были разработаны для быстрого создания целой страницы.

Способ создания гридов был специально для того, чтобы соответствовать размерам страницы, которую мы получаем, что регламентируется нашими собственными рекомендациями UED и нашими форматами рекламы. Ничто не мешает вам использовать каркас в качестве базового и перекрывать точные значения ширины / желоба и т. Д.

Отказ от ответственности: я работаю на Y!

1 голос
/ 15 сентября 2010

Просто хотел упомянуть, что в новых сетках YUI 3 есть конкретный пример того, как указать интервал сетки.

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

1 голос
/ 26 января 2009

Похоже, вам нужно сделать множество настроек для настроек по умолчанию для YUI Grids, что для меня, как бы полу-побеждает смысл его использования - или, скорее, делает его менее гибким и, следовательно, менее эффективным.

Вы уже смотрели лекции Нейта Кичли? По памяти я думаю, что он упоминает, что можно изменить желоб между столбцами, и объясняет, как выполнять настройки.

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

По сути, вы можете покопаться в CSS-файлах для сеток и определить, где установлен желоб между столбцами, и настроить его в своем собственном CSS-файле.

0 голосов
/ 10 сентября 2010

YUI 3 сетки это мощный. Гибкая, стабильная и простая . Взгляни.

0 голосов
/ 26 января 2009

Если вы исследуете альтернативы YUI, обратитесь к Генератору CSS Blueprint (http://kematzy.com/blueprint-generator/).. Это хороший быстрый способ настроить сетку CSS (на основе Blueprint CSS ).

К сожалению, я не знаю, есть ли подобный инструмент для YUI или нет.

...