Upload
nikolay-pyatayev
View
284
Download
0
Embed Size (px)
Citation preview
Вёрстка: основные форматы графики
PNG — Альфа канал, полупрозрачность, большой вес
GIF — Альфа канал, 256 цветов, анимация
JPG — компрессия, для фотоизображений
SVG — Текстовый векторный формат
Вёрстка: Трюки с градиентами
➔ http://enjoycss.com/gallery/gradient_patterns➔ http://bennettfeely.com/gradients/➔ http://lea.verou.me/css3patterns/
Вёрстка: «Принцип Цикады»
Эта текстура построена по принципу цикады и до повтора своего цикла имеет длину в 56 869 px
➔ http://habrahabr.ru/post/117160/
Вёрстка: Типографика
Шрифты;
Выравнивание;
Цвет;
Начертания;
Интервалы и расстояния;
Размеры: относительные и абсолютные.
➔ http://habrahabr.ru/post/117160/
Вёрстка: Адаптивность
Брейкпоинты — это значения ширины или высоты экрана в пикселях, при переходе которых переключаются наборы стилей.
➔ http://mediaqueri.es/
Основные координаты брейкпоинтов:
Large: от 1920х1080px
Small: 1366x768px (эта странная цифра на данный момент самое популярное разрешение — лэптоп)
Tablet: 1024x768px
Mobile: всё что меньше 768px
Вёрстка: Тестирование
Тестирование в браузерах
Тестирование на различных разрешениях
Тестирование на различных ОС
Тестирование на различных устройствах
Браузеры: Веб-Шрифты
➔ http://www.fontsquirrel.com/tools/webfont-generator
Генератор Веб-Шрифтов
➔ https://www.google.com/fonts
Наборы Веб-Шрифтов
UI/CSS frameworks: Модули, Плюсы и Минусы
Основные модули:
● Сетка● Типографика● Таблицы ● Формы ● Изображения ● Адаптивность ● UI-kit
Плюсы:● Стандартизация● Скорость
разработки● Исключение
ошибок
Минусы:● Объём кода● Возможные
конфликты с оригинальным дизайном
UI/CSS frameworks: Примеры
● Yahoo Inc.
● Компоненты: Все основные
●
● http://purecss.io/
● Google Inc.
● Компоненты: Сетка, Формы, Таблицы, UI-kit.
● Ориентирован на стилизацию интерфейса
● http://www.getmdl.io/
● Twitter Inc.
● Компоненты: Все основные
● и много чего ещё :)
● http://getbootstrap.com/
Список других фреймворков со сравнением можно посмотреть тут: http://usablica.github.io/front-end-frameworks/compare.html