Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Настройки верстальщику
@veremey

This comment has been minimized.

Copy link
Owner Author

veremey commented Feb 21, 2017

Photoshop

https://habrahabr.ru/post/67831/ - настройки цвета
Настройка единиц измерения:
для Windows выбрать
Edit > Preferences > Units & Rulers выставить для Rulers и Type > Pixels

для Mac OS выбрать
Photoshop > Preferences > Units & Rulers выставить для Rulers и Type > Pixels

Шрифты

Конвертация шрифтов
Конвертировать шрифты необходимо на сайте
http://www.fontsquirrel.com/tools/webfont-generator,
на странице необходимо переключится в режим «EXPERT», в настройках:
в блоке Rendering, галочкой должен быть отмечен параметр Fix Vertical Metrics
(необходим для того, чтобы в разных операционных системах у шрифта корректно работало
выравнивание по-вертикали относительно других объектов)
.
в блоке Subsetting: необходимо выбрать No Subsetting
(необходимо для того чтобы в шрифте сохранились все кириллические символы.)
Custom SubsettingНЕ использовать, при данной настройке удаляются кириллические символы,
такие как знак номера № и т.п.)
в блоке CSS отметить Base64 Encode

Конвертация шрифтов также возможна через программа TransType
http://www.fontlab.com/font-converter/transtype/

В правиле @font-face подключать шрифт только в форматах:

  • WOFF в base64
  • EOT

Символы

Символы которые нужно указывать кодом:
Копирайт: © – ©
Градусы: ° – °
Неразрывный пробел:  

Проблемы

При CSS-анимации с помощью animation и transform в Chrome блоки содержащие текст в конце анимации может некорректно отображаться
жирность текста, для исправления бага необходимо в @Keyframes для начальной точки указать -webkit-font-smoothing: antialiased;

Оптимизация изображений
После того, как изображения были сохранены, необходимо их оптимизировать с помощью:

Адаптив

Ключевые точки для которых можно (но необязательно) прописывать стили: 360 - 480 - 720 - 840 - 960 - 1024 - 1280

Вёрстка шаблона для рассылок
Не использовать в стилях margin.
Теги не должны быть пустыми, как минимум содержать неразрывный пробел  
Чтобы изображения в письме всегда отображались, если даже в почтовом сервисе они отключены,
их необходимо подключать через атрибут (не стиль) background="/”, пример: <table background="/”>

Карты

Нужно использовать Google Карты, так как они корректно работают на моб. устройствах, не мешают пролистывать страницу,
при прикосновении одним пальцем они блокируются.
Карты Яндекс нужно использовать при расхождении с Google картой, когда достоверно известно,
что Яндекс актуальнее (для России такое встречается);
На карте всегда должны быть кнопки для приближения/отдаления карты;
Чтобы кастомный маркер (значок отметки местоположения) не склеивался с картой и на нём в Safari при приближении не появлялись
белые линии разреза кусков карты необходимо прописать для маркера optimized: false: Пример кода:
var marker = new google.maps.Marker({ position: location, map: map, icon: markerImage1, optimized: false // <-- this fixes the artifacts });
(Ссылка на материал с решением проблемы > http://stackoverflow.com/questions/34031678/google-maps-strange-vertical-and-horizontal-lines-at-certain-zoom-levels-in-sa)


Полезные инструменты для вёрстки

  • CanIUse - показывает, какие браузеры (в т.ч. мобильные) поддерживают данное свойство HTML5, CSS3 - http://caniuse.com
  • Генератор CSS3 градиентов (можно генерировать и из картинок) http://www.colorzilla.com/gradient-editor/
  • Prepros - отличный инструмент для компилирования scss, less, stylus файлов и javascript с автоматической перезагрузкой окна браузера. Кроме того, автоматически ставит префиксы для еще не полностью поддерживаемых браузером CSS свойств, умеет минифицировать код. Удобный интерфейс - не нужны всякие bat’ники и т.п. Фактически бесплатный - https://prepros.io/
  • Codekit - аналог Prepros, но только для Mac OS (Prepros работает и на Windows и на Mac OS) - https://codekitapp.com/
  • Zeplin - инструмент для помощи в написании CSS кода из макетов (Photoshop, Sketch App). Позволяет экономить время, создавать переменные, измерять дистанцию между элементами и много чего ещё. Сайт - https://zeplin.io/ , краткое видео по экспорту из Photoshop - https://www.youtube.com/watch?v=0cVbzq-Q43M Можно использовать бесплатно для ограниченного числа проектов
  • Avocode - тоже самое что и Zeplin, только строго для вёрстки. Здесь экспортировать ничего не надо - в программу загружается сам PSD-макет. Но платный - даётся 14 дней trial. Сайт - https://avocode.com/
  • Генератор треугольников через border (можно использовать вместо изображений со стрелками) - http://apps.eky.hk/css-triangle-generator/
  • Оптимизация размера SVG-файлов - https://jakearchibald.github.io/svgomg/
  • Онлайн-инструмент, который визуально показывает как работает nth-child http://nth-test.com/
  • Файл с 26 миксинами на SASS, который намного облегчают работу с nth-child http://lukyvj.github.io/family.scss/
  • Генератор шрифтов из иконок и SVG - https://icomoon.io/app/#/select
  • Генератор спрайтовых изображений - http://spritegen.website-performance.org/
  • Линейка для измерения расстояния в Google Chrome - полезно для вёрстки - https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=en
  • Плагин для наложения макета поверх вёрстки в Google Chrome (чтобы более менее соответствовало макету) - https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en
  • Инструменты-песочницы для теста кода (HTML, CSS/SASS/LESS/STYLUS, JAVASCRIPT). Codepen - http://codepen.io/ , jsFiddle - https://jsfiddle.net/
  • Таблица с поддержкой свойств email-клиентами. Удобно при вёрстке email-писем. Позволяет понять какие CSS свойства можно использовать для своего круга задач - https://www.campaignmonitor.com/css/
  • Мини-гайд по вёрстке email-рассылок. Не всё там актуально, но всё равно полезно - https://habrahabr.ru/post/252279/
  • Инструмент для тестирования и отладки регулярных выражений - https://regex101.com/
@veremey

This comment has been minimized.

Copy link
Owner Author

veremey commented Feb 21, 2017

Вдохновение

Анимация кнопок:

Анимация прелоадеров:

Библиотеки (скрипты и стили)

Анимация появления элементов при пролистывании страницы > http://michalsnik.github.io/aos/
Нормализация > https://necolas.github.io/normalize.css/
Слайдер > http://kenwheeler.github.io/slick/
Параллакс > https://github.com/wagerfield/parallax
Скролл с поддержкой свайп > http://darsa.in/sly/
Слайдер поддерживающий свайп > http://idangero.us/swiper/
Попап галерея с поддержкой свайпа Fancybox 3 > http://fancyapps.com/fancybox/3/
Попап галерея с поддержкой свайпа > http://photoswipe.com/
Попап галерея с поддержкой свайпа > https://sachinchoolur.github.io/lightGallery/
Определение направления прокрутки > https://dollarshaveclub.github.io/scrolldir/

Apple TV эффект:

https://micku7zu.github.io/vanilla-tilt.js/

@veremey

This comment has been minimized.

Copy link
Owner Author

veremey commented Jun 1, 2017

Программа пипетка для windows:

  1. http://instant-eyedropper.com/
  2. http://plastiliq.com/pixel-picker

Программа быстрого запуска:
1, http://www.getwox.com/

@veremey

This comment has been minimized.

Copy link
Owner Author

veremey commented Jun 10, 2017

Если центрируем блок с текстом и текст методом:
`.parent {position: relative};

.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translateZ(0) scale(1.0, 1.0);
-webkit-font-smoothing: subpixel-antialiased;
}`

Не забываем ставить ребенку

-webkit-font-smoothing: subpixel-antialiased; -webkit-transform: translateZ(0) scale(1.0, 1.0);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.