Foundation фреймворк что это

Обновлено: 07.07.2024

Начинаем изучение фреймворка Foundation. Этот фреймворк входит в двойку самых популярных и распространенных CSS-фреймворков на момент написания статьи (еще один - Twitter Bootstrap).

Можно по разному относиться к фреймворкам - любить их или не любить. Однако, они есть и ими пользуются при создании сайтов. Данный факт говорит о том, что фреймворки - это все-таки не такое уж и Зло. Скорее всего, нужно выработать для себя такое отношение к фреймворкам, что это быстрый способ создать что-либо непритязательное - не слишком оригинальное по дизайну, со стандартизированными элементами и не слишком оптимизированным кодом (читай - с большой долей мусора). А вот если к шаблону предъявляются повышенные требования, вот тогда нужно писать весь код вручную.

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

Сайт проекта Foundation

Официальный сайт проекта находится по этому адресу - Foundation. Если внимательно присмотреться, то можно заметить, что на странице проекта и в других местах часто мелькает слово ZURB - это название дизайнерской фирмы, которая и создала фреймворк.

Если бегло пробежаться по документации, то можно увидеть множество “плюшек” у данного фреймворка:

фирменную консольную утилитку foundation для разворачивания или обновления проекта на Foundation
коллекцию сниппетов под Sublime Text для быстрого создания различных компонент HTML-страницы
тесная интерграция с препроцессором Sass

Естественно, Foundation заявляется как полностью адаптивный фреймворк, нацеленный прежде всего на создание мобильных версий сайтов (Mobile First).

Способы установки Foundation

Как говориться на странице документации, существует три способа установки фреймворка на локальном компьютере:

- самый простой и быстрый способ установки и начала работы. Нужно просто скачать и распаковать архив с готовым фреймворком - разворачивание фреймворка c поддержкой Sass/Compass. Установка на локальный компьютер производится автоматически, с помощью уже упоминавшейся консольной утилиты foundation - это что-то связано с разработкой приложений под Foundation. В общем, для front-end это не интересно

В дальнейшей статье приступим в установке Foundation вторым способом, так как мы уже хорошо знаем и умеем пользоваться препроцессором Sass и его библиотекой Compass.

Установка Foundation c поддержкой Sass

Для установки фреймворка на локальный компьютер с поддержкой Sass/Compass потребуется предварительное начилие на нем таких программных продуктов, как:

Git - нужен для работы Bower
Ruby - нужен для работы Sass/Compass
Nodejs - нужен для работы Grunt

Foundation версии 5 использует для установки своих компонентов, а также для обновления себя самого в целом менеджер пакетов Bower, поэтому его наличие также жизненно необходимо в системе. Помимо этого, фреймворк может работать совместно с менеджером задач Grunt для конкатенации файлов; но наличие Grunt не является обязательным.

Проверяю наличие трех вышеназванных пакетов в своей системе Linux Mint 17. Все три пакета были установлены мною гораздо раньше. Как выполнить установку Git, Ruby, Nodejs, Grunt и Bower под Linux Mint 17, можно почитать в этой статье - “Установка Node.js, npm и Bower под Linux Mint”:

Установка Bower и Grunt, если они еще не были инсталлированы в системе, производится простой командой:

Все готово для установки консольной утилиты foundation . Вы спросите - что это еще за утилита такая и зачем она нужна? Все просто - это фирменная утилитка от Foundation и ее задача - автоматизированное разворачивание готового проекта на локальной машине.

Устанавливаем утилиту foundation:

Сама утилитка foundation очень проста. Вызову команду help и все станет понятно без слов:

Разворачивание Foundation c поддержкой Compass

C помощью утилиты foundation можно развернуть на локальной машине фреймворк c поддержкой:

Я воспользуюсь вторым вариантом и запущу установку Foundation c поддержкой Compass. Для этого нужно выполнить команду:

В моем случае имя нового проекта было оригинальным - foundation )) Пару секунд ожидания и я получаю папку с таким содержимым:

Видим здесь файлы config.rb , bower.json , index.html ; папки bower_components , js , scss . Другими словами - это готовый проект!

Немного подредактирую файл config.rb и запускаю Compass на мониторинг изменений в текущем проекте:

Проект готов для работы! В следующем обзоре будет рассмотрен самый простой пример работы с данным фреймворком - я с вами научусь создавать кнопки на Foundation.

TypeScript - размеченные объединения

> Пользовательское объединение типов - что это и как можно использоватьПомимо объединения **примитивных** типов данных (например):

Обладая некоторыми успешными примерами использования, Foundation быстро завоевал популярность, в частности, для создания широкопрофильных сайтов, таких как Pixar или National Geographic. Этот многофункциональный, адаптивный фреймворк несет в себе ряд преимуществ, которых некоторым разработчикам не хватает в Twitter Bootstrap. Давайте сравним функциональность этих двух фреймворков, и укажем на опции, которые делают Foundation предпочтительным выбором.

Мощный CSS-фреймворк с йети в главной роли

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

Быстрое создание сайтов с помощью обновленных фронт-энд инструментов

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

Вот быстрый обзор самых примечательных особенностей Foundation:

Жидкий макет, поддерживающий вложенность, порядок источников, смещение, а также представление устройств.
Многочисленные стили навигации, включая комплексную главную панель, которая поддерживает трехуровневую выпадающую навигацию для простых панелей, сайдбаров и дополнительных участков навигации.
Элементы пользовательского интерфейса для всех важных материалов, включая уведомления, кнопки, подсказки, аккордеоны, таблицы, видео, миниатюры, формы, таблицы цен и т.д.
Произвольный плагин Clearing для вывода на экран адаптивных лайтбоксов
Reveal – произвольный плагин jQuery, позволяющий выводить простые модальные окна для всех устройств.
Joyride – кроссбраузерный плагин, позволяющий создать экскурсию по вашему сайту или плагину.

Как сравнить Foundation с Twitter Bootstrap?

Нельзя сказать, что это война двух фреймворков, да и рассматривать их как конкурентов невозможно, учитывая, что они свободно распространяются: Bootstrap под лицензией Apache, а Foundation под лицензией MIT.

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

Даже учитывая то, что у Bootstrap имеется намного более развитая экосистема, остаются некоторые весомые причины для предпочтения именно Foundation.

Быстрое сравнение:

Таблица показывает некоторые наиболее примечательные различия двух фреймворков:

Семантические классы

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

Вот простой пример различия в классах, используемых для того, чтобы установить ширину столбцов:

Несмотря на то, что оба фреймворка используют репрезентативные классы, Foundation в данном случае несколько обходит Bootstrap в плане семантики.

Классы видимости для мобильных устройств

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

К примеру, вот адаптивные классы, которые имеются в Bootstrap:

.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop

Foundation включает в себя примерно в три раза больше различных классов видимости:

Основанные на размере экрана:

.show-for-xlarge
.show-for-large
.show-for-large-up
.show-for-medium
.show-for-medium-down
.show-for-small
.hide-for-xlarge
.hide-for-large
.hide-for-large-up
.hide-for-medium
.hide-for-medium-down
.hide-for-small

Основанные на ориентации:

Основанные на сенсорных возможностях:

Основанные на возможности печати:

LESS против Sass

Сравнение LESS с SASS хватило бы для полноценной статьи. Ваши предпочтения в препроцессорах во многом зависят от существующих предпочтений. Sass имеет Compass, CSS-фреймворк с открытым исходным кодом, который помогает писать чистый код, область, в которой Bootstrap несколько проигрывает. Фронт-энд разработчики, обладающие навыками работы с Ruby, не столкнутся с проблемами при работе с Sass и Foundation, хотя всестороннее знание Ruby и не требуется.

Варианты использования Foundation в WordPress

Этот забытый аспект начинает набирать обороты в сообществе разработчиков тем. На самом деле, есть довольно много различных тем WordPress, основанных на Foundation, однако три следующих темы являются безусловными победителями:

Required+

6 произвольных шаблонов страниц
4 области виджетов
Шорткоды для столбцов, окон с предупреждениями, модальными окнами Reveal, слайдером Orbit, галереями Clearing и подсказками
Улучшенный редактор записей с выпадающим списком произвольных стилей

Reverie

Reverie – это универсальный адаптивный WordPress фреймворк, поддерживающий HTML5 и основанный на базе Foundation. Этот фреймворк хранит все файлы Foundation отдельно от других, таким образом, вы можете обновлять их в любое время без каких-либо проблем. Reverie использует структуру шаблонов, навеянную Roots – с циклами, отделенными от шаблонов. Также эта тема поддерживает популярные плагины, такие как bbPress и BuddyPress.

Чистый HTML-вывод изображений в TinyMCE, возвращается только класс и атрибут Alt.
Вывод произвольного меню для вложенной навигации ZURB
Вывод произвольных заголовков для HTML5-тегов figure и figcaption.
Две области виджетов: сайдбар и футер
Два меню: главное навигационное меню и информационное меню в футере
Несколько произвольных шаблонов страниц в пакете
Поддержка bbPress 2.0 и BuddyPress 1.5

WP-Foundation

Простая стартовая тема, которая включает в себя список базовых возможностей, таких как:

Четыре шаблона страниц
Панель Настроек темы для простой смены стилей заголовков, стилей основного текста, цветов ссылок, отключения и подключения слайдера Orbit с последними записями и т.д.
Несколько шорткодов, обладающих начальной стилизацией Foundation

Как вы можете видеть, Foundation – это прекрасный многообещающий CSS-фреймворк. Поскольку Foundation предлагает разработчикам инструменты для быстрого создания веб-сайтов, его экосистема, возможно, будет расти точно так же, как и экосистема Bootstrap. Масштабная база пользователей чаще всего влияет на прирост тем и плагинов, что открывает многочисленные варианты использования Foundation и WordPress.

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

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

Bootstrap

Bootstrap на сегодняшний день является одним из самых популярных CSS-фреймворков — с его помощью создано около 22% всех сайтов в мире. Чаще всего его используют для создания адаптивных сайтов, а также мобайл-ферст сервисов. Сейчас последней версией фреймворка является Bootstrap 5. Документацию к Bootstrap вы можете почитать здесь.

Плюсы Bootstrap

Адаптивная сетка Bootstrap

Благодаря Bootstrap разработчикам и верстальщикам не нужно тратить рабочее время на создание собственной сетки — сервис позволяет автоматически построить адаптивную сетку, основанную на Flex-модели. При этом пользователи могут как менять эту адаптивную сетку под свои нужды, так и оставить версию по умолчанию, потому что она будет самостоятельно меняться в зависимости от наполнения контейнеров контентом и особенностям сайта.

Адаптивные изображения

Bootstrap поставляется со своим кодом для автоматического изменения размера изображений в зависимости от текущего размера экрана пользователя. Для этого нужно просто добавить к изображениям класс .img-responsive — все остальное сделают стандартные правила CSS.

Компоненты Bootstrap

Bootstrap поставляется с огромным набором компонентов, которые можно легко использовать. Среди них:

Панели навигации
Выпадающие списки
Индикаторы прогресса

Мало того, что можно легко добавить эти элементы на сайт, так они еще и будут адаптироваться в зависимости от размера экрана или устройства, с которого их будут просматривать. Более полный список добавляемых функций можно найти в документации к Bootstrap.

JavaScript в Bootstrap

Тем, кому не хватает возможностей Bootstrap, сервис позволяет использовать JS. Это дает разработчикам еще больше возможностей для интерактивности.

Документация Bootstrap

Документация у Bootstrap — одна из лучших на рынке. Каждый фрагмент кода подробно описан и объяснен.

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

Настраиваемость Bootstrap

Когда дело доходит до таких фреймворков как Bootstrap, одной из главных проблем является их размер — их вес может замедлять первую загрузку страницы. Например, текущая версия CSS-файла Bootstrap весит 119 КБ, что достаточно много.

Bootstrap позволяет настраивать, какую функцию пользователи собираются встроить в свою загрузку. Можно просто отменить загрузку функций, которые не нужны для работы данного сайта — это снижает вес CSS-файла и ускоряет время загрузки страницы.

Сообщество Bootstrap

Как и во многих опенсорс-проектах, за Bootstrap стоит большое сообщество дизайнеров и разработчиков. Размещение на GitHub позволяет разработчикам легко изменять кодовую базу Bootstrap и вносить в нее свой вклад. Это позволяет core-team в Bootstrap действительно понимать, чего не хватает пользователям их продукта, и быстро реализовывать необходимые фичи.

Внешние шаблоны Bootstrap

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

Продолжайте учиться: На Хекслете есть профессия Верстальщика — в ней вы узнаете как основы HTML и CSS, так и самые современные технологии и концепции для верстки. В этой профессии изучается и Bootstrap

Минусы Bootstrap

Непонятный синтаксис Bootstrap

В самом начале знакомства с Bootstrap некоторые детали его синтаксиса могут сбивать с толку. Например, в системе сеток для того, чтобы создать столбец, занимающий треть экрана, нужно добавить к нему класс .col-md-4. При этом интуитивно сначала кажется, что вместо четверки нужно поставить тройку — ведь мы говорим о трети экрана, а не о четверти. Однако Bootstrap использует систему из 12 столбцов, а 4 — это треть из 12, поэтому такая логика имеет право на существования, хотя первоначально кажется очень неинтуитивной.

Файлы начальной загрузки очень большие

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

Tailwind

Плюсы Tailwind

Tailwind легко настраивается

У фреймворка есть файл с конфигурацией по умолчанию tailwind.config.js, в котором можно настроить цветовые палитры, стили, темы и так далее.

Tailwind имеет собственные служебные шаблоны

Это решает множество проблем, начиная с определения классов и их организацию, заканчивая неймингом классов. Такие служебные классы сильно упрощают процесс создания пользовательских компонентов — теперь не нужно прям погружаться в разработку или верстку, можно просто применить функцию theme() и все заработает.

Интеграция с PurgeCSS

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

Адаптивность

Tailwind позволяет создавать сложные адаптивные макеты, которые будут в первую очередь ориентированы на мобильные устройства. При этом аналогичная функция есть и у Bootstrap.

Коммьюнити

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

Прокачивайте свой уровень программирования: На Хекслете есть несколько десятков треков — специальных курсов для опытных программистов, позволяющие повысить уровень компетентности разработчика в разных направлениях.

Минусы Tailwind

Огромное количество классов, которые не используются

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

Практики написания кода

Tailwind приучает пользователей писать стили inline.

Material-UI

Material-UI — библиотека с открытым кодом, которая включает в себя компоненты React , реализующие Material Design от Google. Она построена с использованием Less (Leaner Style Sheets) — обратно совместимым языковым расширением для CSS. Запустившись в 2014 году — вскоре после того, как появился React, Material-UI набрал более 68 тыс. звезд на GitHub и на сегодняшний день является чуть ли не лучшей библиотекой для пользовательских интерфейсов для React.

Плюсы Material-UI

Документация

Material-UI имеет очень подробную документацию. Это сильно упрощает навигацию по фреймворку и полностью раскрывает все его возможности.

Регулярные обновления

Фреймворк Material-UI постоянно обновляется — разработчики развивают проект и активно расширяют его функционал, убирая ошибки

Хороший вкус

Все компоненты в Material-UI едины по дизайну и цветовым тонам. Такой подход позволяет разработанному приложению или сайту выглядеть очень эстетично.

Минусы Material-UI

Мутабельность

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

Проблемы с производительностью

Тоже проблема, которая касается разработчиков больших проектов со сложными алгоритмами и большим количеством различных компонентов.

Принадлежность к экосистеме Google

До конца непонятно, хорошо это или плохо — но Material-UI все-таки является библиотекой, которую активно продвигает Google. Это следует учитывать разработчикам, которые хотят создавать платформенно-независимый UX (например, приложение, которое должно хорошо работать и на iOS).

Foundation

сайт Foundation, можно увидеть надпись «Самый продвинутый в мире адаптивный интерфейсный фреймворк» — и, в общем, это является не только маркетинговым лозунгом. Foundation был разработан так, чтобы естественно сочетаться с фреймворком Rails — и поэтому он перенял несколько «буддийских» руководящих принципов Rails.

Foundation — это адаптивный интерфейсный фреймворк, который представляет собой адаптивную сетку, а также компоненты пользовательского интерфейса HTML и CSS, шаблоны и фрагменты кода. Сюда же входит вся типографика, формы, кнопки, навигация и другие элементы интерфейса, а также дополнительные функции, которые предоставляются JavaScript.

При этом Foundation — проект с открытым исходным кодом, который ранее поддерживала компания ZURB. С 2019 года этот проект поддерживают только волонтеры.

Сейчас Foundation не имеет такого же влияния на фронтенд-разработчиков, как Bootstrap или хотя бы Tailwind, однако сейчас этот фреймворк постепенно начинает набирать обороты и распространяться среди программистов и верстальщиков. Например, согласно данным BuiltWith, 11,8% из 100 тыс. лучших сайтов используют Bootstrap. И 2,3% — Foundation Framework.

Foundation имеет модульную структуру и состоит в основном из стилей Sass. По сути, фреймворк построен на основе сетки в 940 пикселей, которая является адаптивным макетом.

Плюсы Foundation

Большое количество инструментов

Технически не очень верно утверждать, что Foundation — это CSS-фреймворк. Изначально он создавался как модульный набор инструментов, предназначенных для решения практически всех видов интерфейсных задач. В Foundation есть отдельные инструменты для веб-сайтов, отдельные — для электронной почты и так далее. Также Foundation поставляется с интерфейсом командной строки — это очень порадует разработчиков, которые привыкли работать с Webpack или другими сборщиками модулей.

Гибкость

В отличие от Bootstrap, Foundation был создан для того, чтобы предоставить разработчику полный контроль над своим пользовательским интерфейсом. В результате Foundation будет казаться новичку чрезвычайно сложным. Однако причина в том, что Foundation не навязывает разработчику какой-либо язык стилей, а стремится быть тем, чем он является: отличным фреймворком CSS.

Больше, чем просто элементы интерфейса

Помимо элементов для интерфейсов, Foundation имеет большое количество дополнительных возможностей — расширенную систему адаптивных изображений, готовый компонент ценовой таблицы (да, тот, который применяют для отображения различных тарифных планов), проверку формы, адаптивные встраивания и многое другое.

Минусы Foundation

Небольшое сообщество

У Foundation достаточно небольшое сообщество, и найти разработчика, который знает Bootstrap, все же намного проще. Поэтому и найти решение сложной задачи тоже сложнее на Foundation, чем на Bootstrap.

Сложность

Если разработчик привык к Bootstrap или к ванильному CSS, Foundation будет казаться очень и очень сложным. Слои внутри слоев, компоненты с компонентами, бесконечные возможности настройки. Но это вытекает из плюсов Foundation, поэтому с этим стоит смириться.

Кошмар для перфекционистов

В Foundation есть огромное количество различных вариаций и инструментов — можно практически вечно доделывать ваш продукт, не внося никаких изменений.

UIkit

UIkit — совсем небольшой фреймворк, который специализируется на минимализме — не в функциях, а в дизайне. Если вам нравятся сверхчистые, элегантные и не лишенные пробелов дизайны, то UIkit вам поможет. Особенно UIkit помогает разработчикам для приложений.

Но UIkit — достаточно автономная система, поэтому ее нельзя расширять или изменять. При этом как и Bootstrap, UIkit работает со своим JavaScript. Это значит, что вы можете использовать jQuery для манипуляций с DOM, но использование виртуальной структуры DOM, такой как React — невозможно.

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

Поэтому мы не будем широко расписывать возможности UIkit, а просто скорее добавим, что это прекрасный фреймворк для очень простых задач, которые вам нужно быстро решить.

Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях

Особенности Foundation

Фреймворк состоит из CSS -файлов ( сгенерированных из SASS-файлов, также доступных для скачивания ) и нескольких плагинов JQuery .
Базовые загрузочные файлы не включают в себя HTML -код ( за исключением очень простой демо страницы ), вы получаете возможность написать все это сами.
В то же время каждый компонент сопровождается подробной документацией. Каждый раздел документации имеет HTML пример, который вы можете использовать и настраивать по мере необходимости.
Разметка и классы очень просты, в том числе и для настройки макета под размер экрана.
Foundation содержит в себе все компоненты, необходимые для быстрого прототипирования, которое является основной целью использования CSS-фреймворка.
Возможность быстрого создания сайтов выступает наивысшим приоритетом для фронт-энд разработчиков, ограниченных жесткими сроками сдачи проектов.
Foundation был разработан для того, чтобы позволить вам быстро собирать прототипы и формировать код для современных сайтов и приложений, которые будут прекрасно смотреться на любых устройствах.

Возможности Foundation

Создание веб-страниц с перестановкой блоков в зависимости от размера экрана пользователя и способа управления
Простая и гибкая настройка визуального представления для разных устройств
Использование графических акселераторов для быстрой анимации
Готовый современный дизайн веб-форм
Возможность использования SASS для кастомизации css кода foundation под себя

Аналоги и альтернативы для Foundation

Foundation - похожие решения и продукты

Bulma

Bulma - это бесплатный CSS-фреймворк с открытым исходным кодом, основанный на Flexbox и используемый более 200 000 разработчиков

Tailwind CSS

Tailwind CSS — это CSS-фреймворк утилит для быстрого создания пользовательских интерфейсов

Pure.css

Pure CSS представляет собой набор модулей CSS, которые можно использовать в качестве основы для любого проекта

Materialize

Materialize – это фреймворк, который использует большое количество стилей, элементов, компонентов, анимации

Bootstrap

Bootstrap — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрой вёрстки адаптивных дизайнов сайтов и веб-приложений

Читайте также: