Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Какой CSS Grid Framework нужно использовать для веб-дизайна?

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Dima (you can also view the original English article)

Вы когда-нибудь задумывались, как создавались все эти приятные "журнальные" темы для WordPress и других платформ? Многие, если не все, были разработаны с использованием CSS Grid Framework. То есть вы можете использовать существующий CSS фреймворк или создать свой собственный с нуля. Хотя можно создавать сложные макеты веб-страниц без фреймворка, это, скорее, акт мазохизма. В этой статье вы получите обзор текущей партии Frameworks, которую вы будете использовать.

Что такое CSS Grid Framework?

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

Эта же концепция была адаптирована для дизайна веб-страниц по той же причине, с использованием кода CSS (Cascading StyleSheets) для позиционирования элементов HTML. На самом деле, многие редакционные сайты, управляемые крупными издателями печатных СМИ, применяют сетки, чтобы добиться того, чтобы их веб-сайты выглядели аналогично их печатному контенту.
Обратите внимание, что вертикальная ось не так хорошо поддерживается в системах CSS Grid, поскольку высота веб-страницы не так важна, как для печатной страницы. (Тем не менее, это незначительная проблема в дизайне веб-страниц, если только вы не ожидаете тех же функций, что и в Desktop Publishing - так называемых DTP-системах, которые трудно поддерживать без языка, похожего на PostScript, для браузеров, которые можно реализовать и поддерживать.)


960 CSS Grid System - один из лучших дизайнов для фреймворка :-)

Зачем использовать CSS Grid Framework?

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

Конечно, если вы используете сетки, вам придется добавить необходимую разметку HTML-тега к своему контенту, что увеличит размеры файла подкачки. Кроме того, это означает, что разметка и стиль действительно не разделены - принцип, которого многие веб-дизайнеры хотели бы придерживаться. (Некоторые люди считают, правильно или неправильно, что скептики CSS-фреймворков - это дизайнеры, которые обеспокоены тем, что потребность в их услугах уменьшится. Хотя с этой логикой у кодеров тоже есть проблемы, особенно с увеличением количества кросс-браузерных библиотек кода, таких как jQuery.)

Дело в том, что использование CSS grid framework означает, что ваш браузер загружает CSS-файлы только один раз и сохраняет их в кэше "на стороне клиента". Кроме того, дополнительная разметка HTML, необходимая для применения "невидимой" среды CSS, редко бывает настолько значительным, чтоб проблемы с пропускной способностью для читателей должны вызывать беспокойство. (Интересно, что большинство скептиков говорят о Yahoo UI Grids, а не о Blueprint.)

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

Дизайн и эстетические преимущества

Независимо от того, используете ли вы CSS-сетки для создания прототипов или производственных систем, есть много эстетических и дизайнерских преимуществ:

  1. Визуальный дизайн сплоченности между элементами страницы.
  2. Равномерность и согласованность размещения элементов HTML снижает количество ошибок в кодировании CSS.
  3. Проще применить "правило трети" и "золотое сечение" к дизайну, что приводит к визуально привлекательной компоновке для большинства человеческих глаз.
  4. В основном устраняет необходимость использования вложенных таблиц HTML.
  5. Вложенные подсетки для очень сложных конструкций, которые относительно просты в изготовлении.
  6. Проще применять изображения и текстовые выноски для создания асимметричных макетов для визуальной текстуры.
  7. Кросс-браузерная поддержка, так меньше криков и выдергивания волос, при тестировании для этой проклятия дизайнеров, IE. (Билл Гейтс, как ребенок, чувствовал себя настолько нелюбимым, что он создал столько программного обеспечения, которое делает то, что он хочет, вопреки стандартам, которые поддерживает MSFT.)
  8. Сокращает усилия по созданию более удобных макетов веб-страниц по сравнению с кодированием необходимого CSS с нуля.
  9. Сокращает усилия в будущем, если вам нужно переместить элементы или изменить характеристики рендеринга (типография, поля и т. д.) Для связанных элементов в целом.
  10. Используется со статическими страницами и платформами CMS/блогов.
  11. Позволяет широко использовать создание журнальных и премиальных тем для платформ блогов. (WordPress, похоже, является платформой, с которой чаще всего используются фреймворки CSS, хотя любая другая платформа, которая позволяет ссылаться на исходный файл JavaScript, должна работать отлично.)

YAML - "Еще один многоколонный макет" ("Yet Another Multicolumn Layout")

CSS рамки и инструменты

Вот краткий список некоторых наиболее популярных фреймворков:

  1. Blueprint CSS Grid Framework.
    Надежный, несмотря на то, что он только в V0.7 (на момент написания статьи), с большой поддержкой дизайнеров и многочисленными инструментами для генерации кода CSS (помимо стандартной 24-колоночной структуры по умолчанию с 950 px). Поддерживает использование Blueprint "плагинов".
  2. Yahoo! YUI Grids CSS, Grid Builder.
    Этот каркас, предшествующий Blueprint, поставляется с шестью предустановленными шаблонами и четырьмя предустановленными шаблонами ширины, а макеты соответствуют рекомендациям рекламного блока IAB. YUI Grids CSS интегрирован с остальной частью Yahoo! UI (User Interface) Library.
  3. YAMLYAML Builder.
    YAML (еще одна многоколоночная схема) имеет достаточную зрелость, построена на веб-стандартах и ​​предположительно проста в использовании. Хотя в сообществе WordPress это не так уж и полезно. Фактически, из многих сотен тем WP, которые я просматривал в течение последних трех лет, я не помню, чтобы когда-то его использовали. Это может быть связано с тем, что вам нужна лицензия для использования с некоторыми CMS (Content Management Systems).
  4. Grid Designer.
    Это веб-инструмент для создания пользовательских CSS-сеток. Он использует свои собственные классы CSS, так что его можно назвать каркасом, хотя он не так хорошо поддерживается сообществом дизайнеров, как некоторые другие.
  5. 960 CSS Grid System. Эта система основана на ширине страницы 960 пикселей, которая является числом, которое делится на многие другие числа, что делает ее "очень гибким базовым числом для работы". Однако 960 Grid работает только с 12 или 16 столбцами.
  6. CSS Boilerplate. Произведено в виде урезанного фреймворка одним из оригинальных авторов Blueprint.
  7. Sparkl. Документация говорит, что вы можете создавать страницы с 1, 2 или 3 столбцами, но примеры показывают, что вы обладаете большей гибкостью.

Существуют и другие CSS Grid-фреймворки, которые вы можете найти в списке в Google Code, но из трех или четырех, которые я рассмотрел, большинство были неполными с точки зрения документации или даже файлов проекта, поэтому я оставил их. Если вы знаете о фреймворке, которого нет в списке, сообщите нам об этом в комментариях!

Сравнение

Позвольте мне отметить, что это не всестороннее сравнение CSS-фреймворков. На самом деле я не использовал ничего, кроме Blueprint, хотя я отсканировал документы для всех перечисленных выше платформ и немного поиграл с YAML и Grid Designer. Blueprint, YUI Grids и YAML, возможно, являются "большой тройкой" в плоскости фреймворков CSS, и 960, похоже, является твердым четвертым выбором.

При выборе фреймворка я учел, что я не обученный дизайнер - помимо того, что я изучал самостоятельно годами. Я занимаюсь дизайном, когда это необходимо, хотя и в очень минималистской форме. Фактически, из-за того, что я потратил довольно много лет либо на издание своего собственного печатного журнала, либо на работу над другими, я довольно много (очень плохого) макета страницы использовал принципы построения сетки, работая с Adobe PageMaker. Поэтому я нахожу очень естественным работать с сетками CSS для веб-дизайна. Похоже, что учитывая количество тем WordPress - см. Список в конце этой статьи - которые основаны на сетке (в основном Blueprint), дизайнеры тоже чувствуют себя достаточно комфортно с сетками.

Тем не менее, со временем, всегда ограниченным, мне нужно что-то простое в освоении и использовании, но надежное. Я обнаружил, что Blueprint CSS Grid соответствует моим потребностям. Он прекрасно интегрируется с различными библиотеками JavaScript, включая jQuery, что может привести к чертовски привлекательным веб-интерфейсам. Он хорошо рендерится (хотя и не на 100% идеально) в большинстве браузеров - хотя вам нужно проверить это большое занятие в сторонах веб-дизайнеров, браузер IE.

Основываясь на моем свободном исследовании CSS Grids в прошлом году, Blueprint представляется наиболее надежной средой, наименее ограничивающей, наиболее поддерживаемой - с точки зрения того, насколько широко ее использование - наименьшего размера и среды с наибольшим количеством инструментов. На самом деле, прелесть Blueprint в том, что вы можете очень быстро создать код CSS для пользовательской среды, используя такие инструменты, как Kematzy's Blueprint Grid CSS Generator. Хотя вы можете сделать это с помощью Grid Designer, быстрое сравнение показало бы, что он не такой надежный, как Blueprint.

С другой стороны, сканирование и просмотр документации для Yahoo! Инфраструктура CSS пользовательского интерфейса заставляет меня поверить, что если вы просто хотите сделать простой макет веб-страницы и хотите использовать несколько пресетов, возможно, вы захотите рассмотреть эту опцию. Тем не менее, я чувствую, что это слишком ограничительно на мой вкус. (Вы можете прочитать Blueprint CSS Framework от Foo Hack против YUI Grids.)

В конечном счете, когда дело доходит до изучения чего-то нового в Интернете - такого как язык программирования и библиотека/фреймворк кода - я всегда применяю "правило плеча гигантов". Сначала я выбираю варианты, которые кажутся подходящими для того, что мне нужно, а затем выбираю, основываясь на том, сколько было написано. Может показаться несправедливым по отношению к новым вариантам, но этот процесс не намного более произвольный, чем то, как многие люди выбирают веб-приложения для использования. Там слишком много всего, чтобы отслеживать, и существующее поддерживающее сообщество имеет большее значение.


Blueprint - мой выбор

Почему я выбрал Blueprint CSS

Blueprint CSS Grid Framework - это то, что я буду использовать во всех моих уроках в NETTUTS (когда это актуально). Вместо того, чтобы копировать список функций из документации в Google Code, позвольте мне сосредоточиться на том, почему я лично выбрал его. Некоторые из этих пунктов совпадают с тем, что я сказал выше:

  1. Относительно небольшие размеры файлов. Имеет сжатые версии для производственного использования, для дальнейшего уменьшения размера.
  2. Печать + таблицы стилей экрана.
  3. Простой в интеграции и использовании. (Хотя браузеры IE проблематичны, в зависимости от того, какая версия Blueprint используется.)
  4. Легко запомнить CSS классы и идентификаторы, которые вряд ли будут конфликтовать с теми, которые вы уже используете.
  5. Много вспомогательных инструментов, особенно для создания пользовательских сеток.
  6. Много статей/учебных пособий о Blueprint, с большим количеством позитивной атмосферы.
  7. Частое использование Blueprint дизайнерами тем WordPress.

Как уже упоминалось выше, я сталкиваюсь с проблемами IE - но не все ли? Некоторые WP-темы, использующие Blueprint, решили проблемы с браузером IE, поэтому я экстраполирую их, полагая, что в основном их можно решить.
Blueprint, на момент написания этой статьи, не поддерживает жидкие макеты - в чем я не большой поклонник. Тем не менее, такая поддержка, очевидно, прийдет, если вы опираетесь на этот метод.

Образец процесса проектирования на основе сетки

Ну, это вопрос выбора, не так ли? Некоторые CSS-сетки поставляются с файлом grid.png или даже файлом .psd, который можно использовать в прозрачном режиме в Photoshop, Fireworks, GIMP и т. д., Пока вы закладываете элементы дизайна. Я немного старше и всегда разрабатываю макеты, начиная с бумаги:

  1. Заблокируйте ограничивающий прямоугольник, представляющий всю веб-страницу. (Делайте это для каждой разрабатываемой страницы.)
  2. Разбейте прямоугольник на меньшие прямоугольники, представляющие основные области: верхний колонтитул, нижний колонтитул, боковую панель, область содержимого и т. д.
  3. Далее разделите основные области карандашем в элементе дизайна (сайт, логотип, кнопка rss, последние сообщения, последние комментарии, окно поиска, примеры сообщений, миниатюры сообщений и т. д.)
  4. Переведите этот окончательный эскиз в скелет HTML, используя реальный текст или lorem ipsum text. HTML-разметка будет включать в себя необходимый class CSS Grid и значения id для поддержки нужного мне макета.
  5. Создание баннеров/кнопок в графическом программном обеспечении.
  6. Протестируйте макет HTML в максимально возможном количестве браузеров и версий. (Возможно, вам придется нанять нескольких друзей, если у вас только один компьютер.)
  7. Преобразование текста в код CMS/платформы. (Например, преобразовать текстовые блоки в необходимые вызовы функций WP и код PHP.)

Вы заметите, что нигде в этом процессе не используется графическое программное обеспечение для макета. Это потому, что я не дизайнер и использую очень минималистский подход к тому, что я проектирую (только для себя). Но если вы планируете использовать, скажем, Fireworks для макета, вы должны сделать это между шагами #3 и #4.

Резюме

Я пытался найти исчерпывающие сведения в поиске CSS Grid Frameworks, просматривая более 120 статей на предмет потенциальных клиентов. Однако, возможно, я пропустил некоторые варианты, поэтому не стесняйтесь предлагать другие.
Какой бы CSS-фреймворк вы ни решили использовать, делайте это, потому что он лучше всего соответствует вашим общим потребностям. Если на ваших страницах/шаблонах будет реклама, подумайте, о типе рекламы. Вначале, когда я выбирал темы для своих сайтов, я выбирал объявления AdSense (которые соответствуют IAB). Совсем недавно я выбирал/проектировал блоки для рекламы размером 125x125, что я предпочел бы больше, чем большинство блоков AdSense.
Если вам интересно, есть проект спецификации W3C под названием "CSS Grid Positioning Module Level 3" (написанный двумя сотрудниками Microsoft), в котором обсуждается интеграция основанного на сетке макета в CSS. Функции, обсуждаемые в этом проекте, могут быть в IE 8.

Ссылки

Связанные инструменты

  1. Blueprint CSS AIR Grid Tool.
  2. Blueprint CSS Quick Reference (PDF, 1 страница).
  3. CSS Grid калькулятор.
  4. Diagnostic CSS.
  5. Reset CSS.

Некоторые статьи или сайты о CSS Grid Frameworks

Здесь приведены ссылки на несколько замечательных статей о CSS-сетках.

  1. 456 Berea Street - Grids, Tables, CSS.
  2. A List Apart - Thinking Outside the GridSetting Type on the Web to a Baseline Grid.
  3. Olav Bjørkøy - Launch: Blueprint, a CSS Framework.
  4. Mark Boulton's 5-part series, Five Simple Steps to Designing Grid Systems.
  5. Jeff Croft - What's Not to Love About CSS Frameworks?
  6. CSS Demos - Hands on With Blueprint, a CSS Framework.
  7. CSS Tricks - GridControl.
  8. Design by Grid.
  9. Cameron Moll - Gridding the 960.
  10. Smashing Magazine - Design With Grid-Based ApproachSix Creative Column Techniques.
  11. Stone Mind - First Impressions of the Blueprint CSS Framework.
  12. Subtraction - Oh Yeeaahh! (or How to Use Grid in a Layout)
  13. Tutorial Blog.
  14. Vandelay Design - 65 Resources for Grid-Based Design.
  15. W3 - CSS and Grid Layout.
  16. Web Designer Wall - Grid and Column Designs.

Revolution - The Premium Theme

46 бесплатных или платных специализированных тем

Если вы чувствуете, что еще не готовы заняться сетками и дизайном тем, но нуждаетесь в теме об этом, возможно, вот один из самых полных списков, которые вы найдете. (На самом деле их больше 46, если вы включаете варианты.) Он включает в себя журнал, галерею, специальность и различные премиальные темы, которые используют explicit или implicit CSS-сетки. (Возможно, один или два не используют сетки, хотя это на первый взгляд.)
Некоторые из этих тем бесплатны или имеют бесплатную версию. Большинство из них для платформы WordPress. Этот список включает в себя только темы, доступные для широкой публики, не обязательно настраиваемые сетки, используемые различными блоггерами. (См. Избранные ссылки в предыдущем списке, в том числе Web Designer Wall и Smashing Magazine, чтобы получить снимки таких сайтов. Также см. Вычитание Khoi Vinh's как пример визуально эффективного сайта на основе сетки.)
Предупреждение: некоторые из этих тем могут не работать в WP 2.5x+

  1. Artfull Magazine. (Убедитесь, что вы используете переключатель темы на этой странице - нижний правый угол.)
  2. Block Magazine.
  3. BranfordMagazine.
  4. Chimera Pro.
  5. Content Press.
  6. Cornerstone.
  7. CSS Gallery.
  8. Deadwood, Deadwood Lite.
  9. Fjords09.
  10. Forte. (Примечание. В настоящее время отображается приостановленная страница.)
  11. Fresh News.
  12. Futurosity.
  13. Grid Focus.
  14. Gridline - Lite, News, Magazine.
  15. Gridlock.
  16. IndoMagz.
  17. Jello Wala Mello.
  18. Live Wire series.
  19. Magazine News.
  20. Massive News.
  21. MimboMimbo Pro.
  22. Monochrome - Gallery, Author, Pro, Lite.
  23. Nautica.
  24. News - Quommunication.
  25. NewsPixel.
  26. NewsPress.
  27. Options.
  28. Overstand.
  29. Premium News Theme - The Gazette Edition.
  30. Rebel Magazine.
  31. Revolution and several variations.
  32. Showcase Gallery.
  33. Simplicity.
  34. Structure.
  35. Tauren Pro.
  36. TMA - The Morning After.
  37. Trevilian Way.
  38. Victoria.
  39. Visionary.
  40. Visualization.
  41. WordPress Magazine (Gabfire).
  42. WP-Magazine Theme.
  43. WP-Polaroid.
  44. Ygo CMS.
  45. Your Revolution.
  46. Zeke.

Приведенный выше список тем журнала составлен из следующих ссылок, а также из поиска Google.com.

  1. Bootstrapper.
  2. Clever Sage.
  3. Graph Paper Press.
  4. Michael Doig.
  5. The Blog Entrepreneur.
  6. Theme Playground.
  7. Vandelay Design.
  8. Vandelay Design.
  9. Web Hosting Show.
  10. Squidoo Magazine Themes lens.
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.