UI фреймворки — AppTractor
UI фреймворк обеспечивает отображение пользовательского интерфейса.
- Bootstrap
Twitter Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения.
- Dojo
Dojo — свободная модульная библиотека JavaScript. Разработана с целью упростить ускоренную разработку основанных на JavaScript или AJAX приложений и сайтов. Разработка библиотеки была начата Алексом Русселом в 2004 году. Библиотека находится под двойной лицензией: BSD License и Academic Free License. Dojo Foundation — некоммерческая организация, созданная для продвижения Dojo. Dojo используется в Zend Framework, начиная …
- Enyo
Enyo — JavaScript framework. Разрабатывался для замены Mojo (еще один JS framework) в недрах Palm и HP. Первые версии входили в состав WebOS, а позднее выделился в отдельный проект.
- Foundation
Foundation is the first and most advanced responsive, front-end framework in the world.
- Framework7
Framework7- HTML-фреймворк для разработки гибридных приложений для iOS7. Главная цель Framework7 – дать вам возможность создавать приложения для iOS 7 на основе HTML, CSS и JavaScript.
- Jo
For iOS, Android, Windows 8, BlackBerry 10, Tizen, Chrome OS & anything else with HTML5. Widgets, lists and scrolling goodness using JavaScript & CSS3. Make native mobile apps or web apps with the same code. Works great with PhoneGap.
- jqTouch
A Zepto/jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.
- jQuery Mobile
jQuery Mobile — сенсорно-ориентированный веб фреймворк (так же известен как мобильный фреймворк), разрабатывается командой jQuery, создателей jQuery. Разработка сфокусирована на кросс-браузерности с уклоном в сторону смартфонов и планшетов. JQuery Mobile совместим с прочими мобильными фреймворками, такими как PhoneGap, Worklight и другими.
- Junior JS
A front-end framework for building HTML5 mobile apps with a native look and feel. CSS3 Transitions optimized for mobile performance. Swipable carousels using flickable.js. Integration with backbone.js views and routers. Ratchet CSS UI components. Try loading this page on a mobile phone or try our «simulator» to the right.
- Sencha [Touch]
Sencha Touch — мобильный HTML5 фреймворк с более чем 50 компонентами, темами для современных платформ и встроенной MVC системой.
- The M Project
Create cross-platform mobile web apps based on Backbone.js that look stunning native. The-M-Project is a mobile HTML5 JavaScript framework that helps you build great mobile apps, easy and fast.
- Topcoat
CSS для быстрых мобильных и веб приложений от Adobe.
- ZeptoJS
Zepto это минималистичная JavaScript библиотека для современных браузеров, совместимая с jQuery. Если вы знаете jQuery, то знаете и Zepto.
Мероприятия
JQuery UI CSS Framework API
w3big.
com
Latest web development tutorials
Предыдущий: Jquery UI ThemeRoller
Далее: JQuery UI тема дизайна
JQuery UI рамки CSS
JQuery UI включает в себя мощную структуру CSS, для создания пользовательских JQuery виджетов и дизайн. Рама содержит необходимые классы общих пользовательского интерфейса, и могут быть использованы обслуживание JQuery UI ThemeRoller. Создавая свои собственные компоненты пользовательского интерфейса с помощью рамки JQuery UI CSS. Вы должны использовать Sharemark конвенцию для того, чтобы подключить в интеграции кода сообщества.
Рамочные классы
Существуют следующие стили CSS класса фиксируются в соответствии с структурированная, или является ли она themable (цвета, шрифты, фоны и т.д.), определены в ui.core.css и ui.theme.css двух файлов. Эти классы предназначены для элементов пользовательского интерфейса для достижения визуальной согласованности во всей программе, с помощью JQuery UI ThemeRoller компонетами темизацией.
Помощник по макету
-
.ui-helper-hidden: элементы примененияdisplay: noneимеет . -
.ui-helper-hidden-accessible: элементы приложения для доступа к скрытой (абсолютное позиционирование на странице). -
.ui-helper-reset: обнуление Основные элементы стиля интерфейса. Сбросить элементы , такие как:padding,margin,text-decoration, список-стиль, и так далее. -
.ui-helper-clearfix: применение свойств поплавка упаковки родительского элемента. -
.ui-helper-zfix: для<iframe>элемент применить IFRAME «исправление» CSS.
Виджет контейнер
-
.ui-widget: Класс на внешней стороне контейнера , чтобы применить все виджетов. Виджет приложение для шрифта и размера шрифта, но и на тот же шрифт из формы приложения элементов и 1em размер шрифта, чтобы справиться с правопреемством браузера Windows.
-
.ui-widget-header: заголовок приложения контейнера класса. Из элемента и его детей текст, ссылки, иконки Применить заголовок контейнера стиль. -
.ui-widget-content: содержание класса контейнера приложений. Из элемента и его детей текст, ссылки, иконки содержимого приложения контейнера стиля. (Может быть применен к названию элемента родителя или братьев и сестер)
Интерактивное состояние
-
.ui-state-default: Нажмите на кнопку элемента может быть применен класс. Из элемента и его детей текст, ссылки, приложения иконки «интерактивными по умолчанию» стиль контейнера. -
.ui-state-hover: мышь приостановлено при применении в интерактивными кнопки элемента , когда на классе. Из элемента и его детей текст, ссылки, приложения иконки «кликабельны зависать» контейнер стиле. -
.ui-state-focus: Класс Application , когда фокус клавиатуры в интерактивными кнопки элемента. Из элемента и его детей текст, ссылки, приложения иконки «кликабельны зависать» контейнер стиле.
-
.ui-state-active: Класс Application , когда щелчок мыши может нажать на кнопку элемента. Из элемента и его детей текст, ссылки, иконки приложения «кликабельны активный» контейнер стиля.
Интерактивные быстрое Реплики
-
.ui-state-highlight: для выделения или выбора приложения элементов класса. Из элемента и его детей текст, ссылки, иконки приложения «изюминка» контейнер стиля. -
.ui-state-error: сообщение об ошибке элемента контейнера приложения класса. Из элемента и его детей текст, ссылки, иконки приложения «ошибка» контейнер стиля. -
.ui-state-error-text: не только против цвета фона текста класса ошибки приложения. Он может быть использован для формирования метки, чтобы быть суб-цветной значок ошибки значок приложения. -
.ui-state-disabled: отключить элементы пользовательского интерфейса применить тусклый непрозрачность. Это означает, что элементы уже определенной стиля, чтобы добавить дополнительный стиль.
-
.ui-priority-primary: Класс первых применений кнопки приоритета. Применение жирного текста. -
.ui-priority-secondary: Класс второго применения кнопки приоритета. Применение нормального веса элементов текста применяются незначительные прозрачности.
иконка
Состояние и изображения
-
.ui-icon: Базовый класс значка элемента приложения. Установить размер 16px квадратов, скрытый внутри текста «содержание» статус спрайта установить фоновое изображение. Примечание:.ui-icon, класс получит другой спрайт фоновое изображение на основе его родительского контейнера. Например,ui-state-defaultпоui-iconui-state-defaultui-state-defaultконтейнерui-iconэлемент поui-state-defaultзначок окраски цвет.
Значок Тип
В заявлении . после класса, то вы можете объявить вторую скорость типа значка класса. При нормальных обстоятельствах, класс значок следует синтаксис 
ui-icon.ui-icon-{icon type}-{icon sub description}-{direction} .
Например, значок треугольник , указывающий вправо, следующим образом : .ui-icon-triangle-1-e
JQuery UI в ThemeRoller в колонке предварительного просмотра предоставляет полный спектр рамочной CSS иконку. Наведите курсор мыши на значок, чтобы просмотреть имя класса.
Другие визуальные
помощник Радиус
-
.ui-corner-tl: верхний левый угол радиуса элемента приложения. -
.ui-corner-tr: верхний правый угол радиуса элемента приложения. -
.ui-corner-bl: левый нижний угол радиуса элемента приложения. -
.ui-corner-br: правый нижний угол радиуса элемента приложения. -
.ui-corner-top: левый верхний угол радиуса элемента приложения.
-
.ui-corner-bottom: элементы нижнего левого угла радиуса приложения. -
.ui-corner-right: диагональные элементы верхней и нижней правой части радиуса приложения. -
.ui-corner-left: диагональные элементы верхней и нижней левой части радиуса приложения. -
.ui-corner-all: все четыре угла радиуса применения элемента.
Обложка и Тени
-
.ui-widget-overlay: чтобы покрыть 100% от ширины экрана и высоту приложения и установить цвет фона / текстуру и прозрачность экрана. -
.ui-widget-shadow: Класс покрытия приложения, установите непрозрачность, смещение / Left Offset, и Тень «толщины» . Толщина всех сторон в тени должны быть установлены поля были применены (дополнение). Смещение, установив маржу (маржа) и левое поле (маржи) были применены (может быть положительным, оно может быть отрицательным).
Предыдущий: Jquery UI ThemeRoller
Далее: JQuery UI тема дизайна
w3big.
Семантический пользовательский интерфейс
1.12.2
Скачать сейчас
Semantic — это среда разработки, которая помогает создавать красивые, отзывчивые макеты с использованием удобного для человека HTML.
Семантический пользовательский интерфейс рассматривает слова и классы как взаимозаменяемые понятия.
Классы используют синтаксис естественных языков, например отношения существительное/модификатор, порядок слов и множественное число, чтобы интуитивно связывать понятия.
Получите те же преимущества, что и BEM или SMACSS, но без скуки.
Один
Два
Три
Semantic использует простые фразы, называемые поведениями, которые запускают функциональные возможности.
Любое произвольное решение в компоненте включено в качестве параметра, который разработчики могут изменить.
$(‘.gender.dropdown’) .dropdown(‘настройка’, ‘переход’, ‘вертикальный флип’) .dropdown(‘установить выбранный’, ‘женский’) .popup(‘настройка’, ‘контент’, ‘Выберите свой пол’) ;
Мужской Женский
Ведение журнала производительности позволяет отслеживать узкие места, не копаясь в трассировках стека.
У вас сейчас нет доступа к средствам разработки? Посмотрите этот короткий клип.
$(‘.sequenced.images .image’) .переход({ отладка: правда, анимация: «покачивание», продолжительность: 500, интервал : 200 }) ;
Semantic поставляется с интуитивно понятной системой наследования и переменными темы высокого уровня, которые дают вам полную свободу проектирования.
Разработайте свой пользовательский интерфейс один раз, а затем используйте один и тот же код везде.
Посмотреть
Добавить в корзину
Сохранить на потом
Rate
Единственная догма из этого фреймворка: все произвольное изменчиво .
Руководство по интеграции
Создайте весь свой сайт с помощью одного стека пользовательского интерфейса. Поделитесь своим пользовательским интерфейсом между несколькими проектами.
Интерфейс просмотра
Семантический пользовательский интерфейс на бесплатный проект
Посетите GitHub
Определения не ограничиваются только кнопками на странице. Компоненты Semantic допускают несколько различных типов определений: элементы, коллекции, представления, модули и поведения, которые охватывают всю гамму дизайна интерфейса.
Посмотреть больше примеров
Этот сайт использует файлы cookie
- Воспользуйтесь нашим справочным центром
- Проверьте наш FAQ
Знакомые
Стив Джобс — вымышленный персонаж, созданный, чтобы быть похожим на знакомого читателям человека.
Присоединился в 1998 г. 22 друга
Эллиот Фу добавила вас в друзья
Вы добавили Дженни Хесс в группу Близкие друзья
Зоя только что написала на вашей странице
23 Новый Платья
Доставка
Выберите вариант доставки
Биллинг
Введите платежную информацию
Подтвердить заказ
Проверить детали заказа
Выберите страну
Фильтр сообщений
Добавление 5 из 20 фото
Поиск
http://
Добавить теги
Мне нравится развлекаться
Получать еженедельный информационный бюллетень о пуделях
Сделать профиль моей собаки общедоступным
Инструменты сборки, регистрация производительности, поддержка пользовательских определений, многоуровневое наследование тем — мечта разработчика.
Руководство по началу работы
Лучшие библиотеки CSS для UI/UX. Некоторые из моих любимых библиотек для Интернета… | by Wesley Deklich
Photo by Pankaj Patel on UnsplashCSS — это сложно, независимо от того, являетесь ли вы лицензированным профессионалом или только начинаете. Вот составленный список моих любимых библиотек CSS, которые я считаю необходимыми для создания эффективного интерфейса UI/UX.
1) Bootstrap
Мощный и многофункциональный интерфейсный инструментарий для настройки веб-сайтов с помощью SASS. Это определенно важный веб-сайт для использования при создании UX. Темы создаются на Bootstrap как собственные расширенные фреймворки, богатые новыми компонентами и плагинами, документацией и надежными инструментами сборки.
2) Animate
Самая простая библиотека с необходимыми инструментами и интерактивным веб-дизайном — это действительно инструмент номер один для начинающих.
Отлично подходит для выделения, домашних страниц, ползунков и подсказок, привлекающих внимание.
3) Tailwind
Tailwind CSS часто используется начинающими и продвинутыми разработчиками веб-сайтов. Они упрощают согласованность выбора цвета, интервалов, типографики, теней и всего остального, что составляет хорошо спроектированную систему дизайна.
4) Semantic
Semantic — это среда разработки, которая помогает создавать красивые, отзывчивые макеты с использованием удобного для человека HTML. Semantic полностью разработан с учетом того, что em позволяет легко изменять размеры. Лично я этим не пользовался, но, по словам разработчиков, он подходит для списка.
Photo by Jackson Sophat on Unsplash5) Tacit
Tacit — примитивный CSS-фреймворк для чайников вроде меня, которые ничего не смыслят в графическом дизайне, но хотят, чтобы их веб-сервисы выглядели съедобно.
Никаких классов, никаких макетов. Просто создавайте простые и простые веб-страницы, совместимые с HTML5, и они будут выглядеть нормально. Очень простая и удобная база данных для всех уровней дизайнеров пользовательского интерфейса.
6) Миллиграмм
Мечта минималистов, специально разработанная для лучшей производительности и более высокой производительности с меньшим количеством свойств, что приводит к более чистому коду. Определенно фаворит, когда речь идет о быстром современном веб-сайте.
7) Skeleton
Легкий и отзывчивый CSS-фреймворк. Skeleton стилизует только несколько стандартных HTML-элементов и включает в себя сетку, но часто этого более чем достаточно для начала работы.
8) Bulma
Bulma — это бесплатная, очень простая в освоении платформа с открытым исходным кодом, которая предоставляет готовые к использованию внешние компоненты, которые можно легко комбинировать для создания отзывчивых веб-интерфейсов.
9) Magic
Одна из моих наиболее часто используемых библиотек с яркими логотипами, анимацией и эффектами. Определенно сильный соперник в списке.
10) Picnic
Легкая и красивая библиотека. Это действительно мелочи, которые имеют наибольшее значение в пользовательском интерфейсе.
11) Half Moon
Отличительной особенностью фреймворка является то, что он полностью построен с использованием переменных CSS (также известных как пользовательские свойства CSS). Существует около 1500 переменных CSS, а это означает, что почти все можно настроить, переопределив свойство, что упрощает настройку темы Halfmoon в соответствии с вашим брендом.
12) Fluid
Эта небольшая библиотека CSS служит для того, чтобы избежать адаптивного веба, сосредоточившись на чистой текучести, в которой система сообщает, какой размер должен быть отрендерен.
