Foundation фреймворк что это
June 28, 2014
Сайт проекта Foundation
Если бегло пробежаться по документации, то можно увидеть множество “плюшек” у данного фреймворка:
Естественно, Foundation заявляется как полностью адаптивный фреймворк, нацеленный прежде всего на создание мобильных версий сайтов (Mobile First).
Способы установки Foundation
Как говориться на странице документации, существует три способа установки фреймворка на локальном компьютере:
В дальнейшей статье приступим в установке Foundation вторым способом, так как мы уже хорошо знаем и умеем пользоваться препроцессором Sass и его библиотекой Compass.
Установка Foundation c поддержкой Sass
Для установки фреймворка на локальный компьютер с поддержкой Sass/Compass потребуется предварительное начилие на нем таких программных продуктов, как:
Foundation версии 5 использует для установки своих компонентов, а также для обновления себя самого в целом менеджер пакетов Bower, поэтому его наличие также жизненно необходимо в системе. Помимо этого, фреймворк может работать совместно с менеджером задач Grunt для конкатенации файлов; но наличие Grunt не является обязательным.
Установка Bower и Grunt, если они еще не были инсталлированы в системе, производится простой командой:
Устанавливаем утилиту foundation:
Сама утилитка foundation очень проста. Вызову команду help и все станет понятно без слов:
Разворачивание Foundation c поддержкой Compass
C помощью утилиты foundation можно развернуть на локальной машине фреймворк c поддержкой:
Я воспользуюсь вторым вариантом и запущу установку Foundation c поддержкой Compass. Для этого нужно выполнить команду:
Немного подредактирую файл config.rb и запускаю Compass на мониторинг изменений в текущем проекте:
Что такое CSS Framework?
Разработка сайта или приложения может потребовать много времени и усилий. CSS-фреймворки обычно используются разработчиками и веб-дизайнерами как инструмент для ускорения рабочего процесса.
CSS-фреймворк состоит из следующих компонентов :
Преимущества и недостатки использования фреймворков
Вот несколько других преимуществ :
Но использование фреймворка Bootstrap 3 на русском может быть сопряжено с рядом недостатков :
Bootstrap
Он основан на сетчатой системе 1,170 пикселей, которая представляет собой адаптивный макет. В пакете фреймворка Bootstrap 3 ( в настоящее время доступна версия 4.0.0-alpha.3 ) вы найдете следующие папки и файлы, в которых сгруппированы JS и CSS вместе с минимизированными версиями:
Foundation
В загрузочном пакете Foundation ( в настоящее время Foundation 6 ) вы найдете следующие папки и файлы, в которых сгруппированы JS и CSS вместе с минимизированными версиями.
Foundation поддерживает последние стабильные версии всех основных браузеров и платформ.
Bootstrap vs Foundation
Ниже приведено несколько примеров различий синтаксиса.
Фреймворк Foundation для создания адаптивных сайтов на WordPress
Foundation – это мощный CSS-фреймворк, который продолжительное время пребывал в тени Twitter Bootstrap, и только в последнее время пробивший себе дорогу в мир WordPress-тем. «Необычно усовершенствованный», как про него написано на сайте, обладающий поддержкой любых размеров сетки, начиная с мобильных телефонов и заканчивая телевизорами, этот фреймворк больше не может быть упущен из рассмотрения. Сегодня мы посмотрим на Foundation – издающийся по лицензии MIT фронтэнд-фреймворк, созданный компанией ZURB, Inc.
Обладая некоторыми успешными примерами использования, Foundation быстро завоевал популярность, в частности, для создания широкопрофильных сайтов, таких как Pixar или National Geographic. Этот многофункциональный, адаптивный фреймворк несет в себе ряд преимуществ, которых некоторым разработчикам не хватает в Twitter Bootstrap. Давайте сравним функциональность этих двух фреймворков, и укажем на опции, которые делают Foundation предпочтительным выбором.
Мощный CSS-фреймворк с йети в главной роли
Foundation содержит в себе все компоненты, необходимые для быстрого прототипирования, которое является основной целью использования CSS-фреймворка. Возможность быстрого создания сайтов выступает наивысшим приоритетом для фронт-энд разработчиков, ограниченных жесткими сроками сдачи проектов. Foundation был разработан для того, чтобы позволить вам быстро собирать прототипы и формировать код для современных сайтов и приложений, которые будут прекрасно смотреться на любых устройствах. Взгляните на различные темы от ZURB, чтобы получить немного вдохновения.
Быстрое создание сайтов с помощью обновленных фронт-энд инструментов
Если вы когда-либо создавали выпадающие меню или формы с нуля, то, скорее всего, у вас уже был печальный опыт, когда вам хотелось выколоть себе глаза. Именно такой опыт и подтолкнул меня к использованию CSS-фреймворков. Foundation особенно хорош, когда дело доходит до создания комплексных элементов пользовательского интерфейса. Также Foundation включает в себя некоторые инновационные пользовательские jQuery-плагины, которых вы не найдете в других фреймворках.
Вот быстрый обзор самых примечательных особенностей Foundation:
Как сравнить Foundation с Twitter Bootstrap?
Нельзя сказать, что это война двух фреймворков, да и рассматривать их как конкурентов невозможно, учитывая, что они свободно распространяются: Bootstrap под лицензией Apache, а Foundation под лицензией MIT.
Однако чем популярнее становится фреймворк, тем более широко он используется, то есть поднимается уровень его дистрибуции. В этой сфере Bootstrap побеждает благодаря своей более широкой экосистеме, которая трансформируется в большее число инструментов, доступных разработчикам WordPress. Если звездочки на github можно рассматривать как индикатор текущего использования двух фреймворков, то мы получим следующее сравнение:
Даже учитывая то, что у Bootstrap имеется намного более развитая экосистема, остаются некоторые весомые причины для предпочтения именно Foundation.
Быстрое сравнение:
Таблица показывает некоторые наиболее примечательные различия двух фреймворков:
Семантические классы
Оба фреймворка содержат в себе внушительное количество компонентов пользовательского интерфейса и javascript-дополнений. Однако если семантические классы являются важной находкой для вас, то в таком случае Foundation будет являться предпочтительным выбором.
Вот простой пример различия в классах, используемых для того, чтобы установить ширину столбцов:
Несмотря на то, что оба фреймворка используют репрезентативные классы, Foundation в данном случае несколько обходит Bootstrap в плане семантики.
Классы видимости для мобильных устройств
Foundation также предлагает заметно больше гибкости и управления благодаря своим классам видимости, созданным на базе используемых функций и возможностей. Эти классы позволяют реализовать детально продуманное мобильное представление сайта, обладающее тонкими настройками для размера экрана, его ориентации и сенсорных опций.
К примеру, вот адаптивные классы, которые имеются в Bootstrap:
Foundation включает в себя примерно в три раза больше различных классов видимости:
Основанные на размере экрана:
Основанные на ориентации:
Основанные на сенсорных возможностях:
Основанные на возможности печати:
LESS против Sass
Сравнение LESS с SASS хватило бы для полноценной статьи. Ваши предпочтения в препроцессорах во многом зависят от существующих предпочтений. Sass имеет Compass, CSS-фреймворк с открытым исходным кодом, который помогает писать чистый код, область, в которой Bootstrap несколько проигрывает. Фронт-энд разработчики, обладающие навыками работы с Ruby, не столкнутся с проблемами при работе с Sass и Foundation, хотя всестороннее знание Ruby и не требуется.
Варианты использования Foundation в WordPress
Этот забытый аспект начинает набирать обороты в сообществе разработчиков тем. На самом деле, есть довольно много различных тем WordPress, основанных на Foundation, однако три следующих темы являются безусловными победителями:
Required+
Required+ – родительская тема для WordPress, построенная на базе Foundation. Тема очень хорошо сделана, имеет комментарии, обладает обширной документацией и примерами кода, которые позволят вам создать что-либо интересное и уникальное.
Reverie
Reverie – это универсальный адаптивный WordPress фреймворк, поддерживающий HTML5 и основанный на базе Foundation. Этот фреймворк хранит все файлы Foundation отдельно от других, таким образом, вы можете обновлять их в любое время без каких-либо проблем. Reverie использует структуру шаблонов, навеянную Roots – с циклами, отделенными от шаблонов. Также эта тема поддерживает популярные плагины, такие как bbPress и BuddyPress.
WP-Foundation
Простая стартовая тема, которая включает в себя список базовых возможностей, таких как:
Как вы можете видеть, Foundation – это прекрасный многообещающий CSS-фреймворк. Поскольку Foundation предлагает разработчикам инструменты для быстрого создания веб-сайтов, его экосистема, возможно, будет расти точно так же, как и экосистема Bootstrap. Масштабная база пользователей чаще всего влияет на прирост тем и плагинов, что открывает многочисленные варианты использования Foundation и WordPress.
Благодаря своим функциям и заложенному потенциалу, Foundation быстро станет лидирующим игроком в мире фронт-энд фреймворков. В то же время, если вы считаете, что большинство сайтов Bootstrap выглядит однообразно, скачайте себе одну из бесплатных тем, выполненных на базе Foundation, и поработайте с ней. Свой ответ опишите в комментариях.
Why Foundation
What’s Foundation?
Foundation is the first and most advanced responsive front-end framework in the world. It lets you quickly prototype and create sites and apps that work on any device (smartphones up through desktops and TV displays) with a library of tested components.
Foundation doesn’t require any particular back end. In fact, Foundation has been used with dozens of back-end and CMS technologies, and Foundation is used by hundreds of thousands of sites every day to deliver rock-solid responsive sites.
What are Front-end Frameworks?
Just like there are frameworks for building native app interfaces (like Xcode for iOS), Foundation is a framework to build the front-end, or client-facing part, of a website or web application. Foundation runs entirely in the browser, so it’s easy for a Design or UX specialist to get into and work on locally without involving IT.
Foundation is Mobile First
Mobile First is two parts technology and two parts philosophy. Foundation is built in such a way that it encourages a mobile-first approach, designing your site or app for the small device first, then expanding that to include larger displays and more full-featured devices. While it’s not required, building this way in Foundation is relatively simple and introduces really useful constraints in product design. We’ve found it to be a big win in designing effective, ubiquitously available products.
What technology is used in Foundation?
Foundation is built with HTML, CSS and Javascript, the core components of the Web. While Foundation is fairly cutting-edge, we use bulletproof technology like jQuery, HTML5 Boilerplate and Normalizr as our baseline. We then layer on top components and plugins designed to work well in all of our supported browsers and devices.
Why use Foundation?
Foundation, amongst all of the responsive front-end frameworks out there, is the only framework professionally supported by an organization (ZURB), which also uses the framework every day for clients ranging from small startups to huge enterprises. Foundation has been tried and tested for years. It’s gone through five major iterations and many point releases to ensure it works everywhere, and we’ll keep improving it.
Having trouble convincing your team?
From huge brands to scrappy startups, millions of designers and developers have used Foundation and created amazing websites and apps! Foundation is the right solution for your next project. Check out our slides from the All Things Open Conference 2016.
Обзор библиотеки Foundation для разработки сайтов с адаптивным дизайном
Для использования библиотеки, необходимо подключить ее css и js файлы, а потом вызвать функцию «$(document).foundation();», например:
Изучение работы с foundation, безусловно, следует начинать с типовых шаблонов страниц. Как создавать основные элементы современных веб-страниц при помощи фреймворка, вы можете узнать на этой странице (инспектор элементов в браузере вам в помощь), об остальном расскажет справка.
Получение кода foundation
Вы всегда можете скачать готовый css/js код foundation отсюда, и даже задать при этом некоторые параметры его сборки. Однако, к сожалению, перечень этих параметров сильно ограничен, и по настоящему серьезные возможности кастомизации открываются только при самостоятельной сборке css кода из sass. Но если вы осилите установку всех необходимых библиотек, то получите в свое распоряжение серьезный набор инструментов для кастомизации foundation.
Сборка foundation c кастомизированными параметрами
Здесь я опишу метод сборки, рекомендованный разработчиками foundation. Теоретически, это не единственный способ сборки scss кода, однако лично мне не удалось другим способом собрать css, полностью идентичный тому, что получается при помощи рекомендованного метода, и я говорю не о разметке кода, а о внешних проявлениях, например, при сборке с помощью php библиотек, у меня разъезжалось меню и менялся фон некоторых элементов. Если у вас получалось эффективно использовать другие методы сборки, пожалуйста, отпишитесь в комментариях.
Создание нового проекта foundation
В силу некоторых особенностей, эту команду нельзя выполнять из под root, или через sudo:
После выполнения команды, папка foundation должна принять примерно следующий вид:
После создания нового проекта, перейдите в его папку:
После успешного выполнения этой команды, будет создан или обновлен файл css/app.css в папке проекта и будет выдано примерно такое сообщение:
Кастомизация параметров
Теперь мы подошли к самому интересному, собственно ради чего, в основном, стоило устанавливать инструменты командной строки. Большой список переменных sass доступен в файле scss/_settings.scss. Достаточно раскоментировать нужные строки и изменить значения по умолчанию, на нужные вам, после чего произвести сборку проекта при помощи уже известной нам команды «grunt build».
Чтобы, например, уменьшить размеры заголовков, которые на мой вкус уж слишком большие, раскоментируйте и измените следующие строки файла _settings.scss:
Вот список некоторых установок, которые можно менять при помощи _settings.scss:
Чтобы обновить библиотеку из командной строки, перейдите в папку проекта foundation и введите следующую команду:
При успешном выполнении команды вы увидите список обновленных компонентов: