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

Использование Foundation Framework для: -

  1. Дизайн сайта
  2. Дизайн электронной почты
  3. Дизайн приложений

ОСОБЕННОСТИ ФУНДАМЕНТА

1. Уменьшено время загрузки страницы

Команде Фонда пришлось столкнуться с конструктивной критикой, утверждавшей, что в большинстве проектов Фонда около 90% кода CSS не используется. Это было верно не только для Foundation, но и для других основных фреймворков CSS, таких как Bootstrap. В рамках своего ответа Zurb решил значительно сократить размер файла выводимого CSS, уменьшив код примерно на 40–50%.

2. Полная доступность

Вероятно, самая удивительная особенность нового Foundation 6 заключается в том, что он будет полностью доступен. Каждый компонент и фрагмент кода будут иметь соответствующие атрибуты WAI-ARIA и ориентиры. Более того, разработчикам даже будет предоставлено руководство пользователя о том, как использовать веб-стандарты 11y.

3. Явная поддержка языков RTL

Старые версии в некоторой степени поддерживали языки с письмом справа налево, такие как арабский; но они нуждались в некоторой настройке. Foundation 6 имеет встроенную поддержку.

4. Гибкая сетка

Сетка Flex — это именно то, что вы думаете: это компонент Grid, переработанный с помощью Flexbox. С одной стороны, это дает ему ряд функций и опций, с которыми не может справиться обычная сетка на основе плавающих элементов. С другой стороны, он, вероятно, не так хорошо поддерживается, особенно IE. Это компромисс.

5. Вспомогательные классы типографики

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

  • Классы выравнивания текста
  • Классы подзаголовков — применяет более светлый цвет к любому заголовку с .subheader.
  • Стили начального абзаца
  • Немаркированные списки
  • Статистика — применяет больший размер шрифта к важным числам.

6. Навигация

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

Хотите детализированную навигацию на смартфоне и горизонтальную панель на рабочем столе? Это легко сделать с помощью классов, зависящих от размера экрана. Хотите вернуть свой «Верхний бар»? Просто добавьте div-оболочку вокруг компонентов меню по умолчанию.

7. Значок

Вы знаете эти маленькие кружочки или квадратики — обычно помещаемые на какие-то значки или рядом с ними — с крошечными цифрами в них? Например, когда у вас есть уведомления Facebook? Это так называемые значки.

Ты узнаешь что-то новое каждый день. Кроме того, сейчас они есть у Фонда.

8. Липкий

Нужно, чтобы что-то оставалось на экране, пока пользователь прокручивает? Хотите остановить его в какой-то момент? Sticky — это ваш плагин! Это также то, что нужно использовать, если вы хотите, чтобы меню Magellan работало так же, как в Foundation 6.

9. Переключатель

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

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

10. Медиа объект

Что ж, название звучит так, как будто это элемент, в который можно встроить видео или объект Flash (гадость), и, я думаю, вы могли бы это сделать. На самом деле он предназначен для отображения любого мультимедийного объекта, например изображения, вместе с текстовой информацией.

ОСНОВНЫЕ ФУНКЦИИ FOUNDATION 6

  • Abide — проверка формы
  • Аккордеоны
  • Основные глобальные стили
  • навигационная цепочка
  • Кнопки
  • Выноски
  • Цветные миксины
  • Выпадающие меню
  • Эквалайзер — выравнивание столбцов
  • Гибкое видео
  • Формы
  • Обмен адаптивным контентом
  • Этикетка
  • Magellan — больше не липкий по умолчанию
  • Медиа-запросы (следует отметить, что точки останова изменились)
  • Off-canvas
  • Пагинация
  • Индикаторы выполнения
  • Раскрыть
  • Слайдеры
  • Переключатели
  • Столы
  • Вкладки
  • Сетки
  • Миниатюры
  • Подсказка
  • Стили типографики
  • Классы видимости и полезности

Вы можете обратиться к веб-сайту Фонда для получения дополнительной информации.

Если вы застряли на том, какой фреймворк выбрать для разработки интерфейса, или кто-то ищет услуги веб-дизайна, свяжитесь со мной по адресу [email protected].