Возможные способы установки 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
- файл для вас, чтобы совершенствовать его.flex
включен по умолчанию, и доступна только новая сетка XY
. Однако другие версии CSS
доступны для обратной совместимости и наиболее распространенных случаев использования.Стартовый шаблон HTML
Начните с HTML - шаблона и адаптируйте его к вашим потребностям. Обязательно включите класс .no-js
в html
- тег вашего шаблона. Добавление этого класса предотвращает вспышку нестайлированного содержимого для ряда базовых компонентов.
Другие интерграции
Сообщество Foundation помогло интегрировать фреймворк в Rails, WordPress, Django и многое другое. Перейдите на страницу документации, чтобы найти еще больше способов использования Foundation.
https://get.foundation/sites/docs/
Благодаря легкому для понимания синтаксису и последовательной структуре вы быстро освоите свой путь с Foundation!
Что охватывает этот курс?
Узнаете, как создавать гибкие и сложные адаптивные макеты с помощью совершенно новой удивительной сетки XY.
- Полный обзор сетки XY
Быстро создавайте интерактивные прототипы, чтобы вы могли перейти от идеи к веб-сайту за меньшее время, чем когда-либо. Добавьте огромное количество интерактивности, чтобы ваши веб-сайты ожили без написания пользовательского кода.
- А что если? И, конечно, сделаем сайт.
Большинство CSS-сеток - включая Foundation - организуют макет в строки, которые, в свою очередь, делятся на ячейки или столбцы. Но что делать, если вы хотите, чтобы столбец простирался на две строки?
Начните с идеи
Начните с простого: напишите одно или два предложения, которые определяют, чему люди должны научиться или какие действия они должны предпринять. Например:
“Я покажу людям, как завязывать галстук.”
"Люди будут покупать галстук в моем интернет-магазине.”
Когда у вас есть цель, создайте сайт, который даст все знания, которые вы хотите сообщить, без излишеств.
Пройдя обучение, сможете
Самостоятельно делать сайт на Joomla + Foundation
Применять все возможности фпеймворка на практике. Вы поймете и попробуете инструменты для работы. Дальше только ваша фантазия.