Возможные способы установки Foundation

Есть много способов установить Foundation, но если вы только начинаете, у нас есть несколько предложений.

Основное

Foundation доступен на npm, Bower, Meteor и Composer. Пакет включает в себя все исходные файлы Sass и JavaScript, а также скомпилированные CSS и JavaScript в несжатом и сжатом виде. Не поклонник GUIs? Node-powered Foundation CLI может установить для вас те же шаблонные проекты. После того, как вы выбрали "Foundation for sites", Foundation CLI спросит вас, какой шаблон вы хотите использовать.

Базовый шаблон

Рекомендуется для начинающих:

  • Foundation для сайтов предварительно настроен.
  • Sass компиляция
  • Инструмент для преобразования ваших файлов SASS/SCSS в CSS.
  • Стартовый HTML-файл
  • Базовый файл, который поможет вам использовать базовый компонент Foundation (включая новую сетку XY !)

Шаблон ZURB

Рекомендуется для опытных (или любознательных) пользователей, включающий Foundation и процесс сборки с помощью:

  • Работа с HTML шаблоном от Панини.
  • Sass компиляции и добавления.
  • Модуль JavaScript в комплекте с webpack.
  • Встроенная синхронизация браузера.
  • Производственная сборка с использованием CSS, Javascript и сжатия изображений.
Если вам не нравится Sass, у нас есть стартовый шаблон с компилированными CSS и JavaScript, а также начальный index.html - файл для вас, чтобы совершенствовать его.
Начиная с Foundation 6.4, flex включен по умолчанию, и доступна только новая сетка XY. Однако другие версии CSS доступны для обратной совместимости и наиболее распространенных случаев использования.

Стартовый шаблон HTML

Начните с HTML - шаблона и адаптируйте его к вашим потребностям. Обязательно включите класс .no-js в html - тег вашего шаблона. Добавление этого класса предотвращает вспышку нестайлированного содержимого для ряда базовых компонентов.

На курсе рассматриваем базовый XY с Joomla - как этот

Другие интерграции

Сообщество Foundation помогло интегрировать фреймворк в Rails, WordPress, Django и многое другое. Перейдите на страницу документации, чтобы найти еще больше способов использования Foundation.

https://get.foundation/sites/docs/

Благодаря легкому для понимания синтаксису и последовательной структуре вы быстро освоите свой путь с Foundation!

  • Начало Старта
  • Почему Foundation

Что охватывает этот курс?

Узнаете, как создавать гибкие и сложные адаптивные макеты с помощью совершенно новой удивительной сетки XY.

  • Полный обзор сетки XY
    Полный обзор сетки XY

    Быстро создавайте интерактивные прототипы, чтобы вы могли перейти от идеи к веб-сайту за меньшее время, чем когда-либо. Добавьте огромное количество интерактивности, чтобы ваши веб-сайты ожили без написания пользовательского кода.

  • А что если? И, конечно, сделаем сайт.
    Большинство CSS-сеток

    Большинство CSS-сеток - включая Foundation - организуют макет в строки, которые, в свою очередь, делятся на ячейки или столбцы. Но что делать, если вы хотите, чтобы столбец простирался на две строки?

Тренер по Foundation
Александр

Тренер дистанционного обучения

Инвестируйте в себя!

Начните с идеи

Начните с простого: напишите одно или два предложения, которые определяют, чему люди должны научиться или какие действия они должны предпринять. Например:

“Я покажу людям, как завязывать галстук.”

"Люди будут покупать галстук в моем интернет-магазине.”

Когда у вас есть цель, создайте сайт, который даст все знания, которые вы хотите сообщить, без излишеств.

Пройдя обучение, сможете

Самостоятельно делать сайт на Joomla + Foundation

Применять все возможности фпеймворка на практике. Вы поймете и попробуете инструменты для работы. Дальше только ваша фантазия.