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

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 - как указано в другом сообщении stackru

Источник

6 ответов

Решение

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

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

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

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

Источник

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

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

А также

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

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

ОБНОВИТЬ

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

<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.

Источник

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

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

Источник

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

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

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

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

Источник

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

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

Источник

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

Источник
Другие вопросы по тегам