Метка «верстка» - 4

Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.
Создание простых всплывающих подсказок на HTML5, CSS и jQuery

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

Читать полностью »

Рассмотрим задачу парсинга HTML на клиенте (Javascript) с последующим оформлением полученных данных стилями и вёрсткой и выводом их в нужные места страницы просмотра. Применение такой подгрузчик страниц и блоков нашёл в юзерскриптах — когда разработчики подгрузчика никак не связаны с разработчиками сайта. Но есть основания использовать подход и для обычных сайтов для полного отделения View от Model.

Статья получилась теоретической, потому что из-за её объёма я не стал перегружать её практическими результатами. Да и трудно пока представить некие шаги, по которым каждый мог бы подхватить идеи и начать строить подобное. Вначале надо посеять идеи, но пока попытки посева (здесь, на Хабре) не давали всходов, хотя я и не особо старался в этом направлении. Подход развивался последние полгода и был даже анонсирован на Хабре примерно в апреле-мае. В статье рассказано, «как это сделать», и перечислены преимущества подхода. Он требует глубокого и специфического программирования на JS. По результатам работы, скорее всего, имеет смысл выделить библиотеку для аналогичных задач.
Читать полностью »

Сухой cпособ верстки многостраничных сайтов

Я бы хотел, чтобы статья была интересна, а главное, понятна всем, кто занимается версткой. Однако, моя проблема заключается в том, что она лежит на рубеже знаний серверных и клиентских разработчиков. И если первые хоть изредка, но верстают, то вторые, как правило, «на сервер» не заглядывают вообще — в кавычках, потому-что речь не о железе или ОС — нам понадобится кое-какой серверный софт. В общем, я постараюсь подойти к сути вопроса постепенно, чтобы не повторить комикс с рисованием совы. Особо нетерпеливым я просто скажу здесь: я верстаю с помощью Flask. Тех же, кого интересуют детали — прошу под кат.
Читать полностью »

Контентный ресурс: фиксированная вёрстка лучше

Это будет очень короткий мой пост, в котором, в продолжение давнего цикла «правила контентных проектов» (раз и два), в котором я хочу зафиксировать одну простую мысль: вёрстка контентных ресурсов должна быть жёстко привязана к ширине текстовых колонок.
Читать полностью »

Привет, меня зовут Игорь (iamo0), я старший фронт-энд разработчик в Островке. Я занимаюсь нашим основным продуктом: сайтом Ostrovok.ru. С помощью нашего сайта ежедневно бронируют отели тысячи человек, поэтому для нас очень важно, чтобы качество нашего продукта было на высоте. А для этого нужно не отвлекаться на разного рода мелочи и уметь эффективно решать поставленные задачи.

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

Не претендую на то, что мой рассказ сорвет покровы или станет настоящим откровением. Хочу поделиться с вами опытом работы с большими приложениями, накопленным разработчиками Островка.
Читать полностью »

Про верстальщиков и дизайнеров
— Если ехать все время на запад, то солнце никогда не взойдет
— Быстро ехать?

Без прелюдий

На мой взгляд, дизайнер должен пройти по следующему пути развития:
1 стадия. Дизайнер может сделать простой концепт, на котором разместить лого заказчика, расположить меню сайта и оформить текст компании. Совет для начинающих дизайнеров: вставляйте реальный текст о компании. Если у вас нет текста о компании, то просите его у заказчика, если не дает, то пишите сами. Многие заказчики видят не только композицию, которую вы пытаетесь показать, но так же еще и любят почитать с «картинки».
2 стадия. Дизайнер, который умеет проектировать интерфейс. Помимо концепта страницы дизайнер может спроектировать интерфейс проекта.
3 стадия. Дизайнер может создать концепт для сайта, спроектировать интерфейс и все это дело самостоятельно сверстать. Да, именно самостоятельно сверстать, без помощи верстальщика.
4.…
Читать полностью »

Помощник для Демо-контента

Многие веб студии, занимающиеся разработкой сайтов испытывают трудности во время демонстрационного показа продукта, а именно, когда необходимо показать готовый сайт содержащий демо-контент. Тут приходится всячески крутится и выискивать множество изображений, подгонять их под нужные размеры, а в некоторых случаях и придерживаться одной цветовой гаммой.
Тут на помощь выходит online сервис Cambelt (в переводе на русский — ремень ГРМ), который для Вашего проекта на лету сгененрирует необходимые вам картинки.

image

Нужно лишь указать в качестве источника изоюражения адрес URL (например, cambelt.co/468x60) с указанием нужного размера. Также можно использовать текст для формирования надписи и разные цвета.
Читать полностью »

После тщательного анализа HTML и CSS кода, который постоянно переделывается, можно сделать выводы, которые должны помочь читателю в этом нелегком деле.
В этой статье  не будем привязываться к конкретным реализациям и готовым рецептам, дабы избежать основной проблемы любой CSS документации — за время написания статьи выйдет пара-тройка браузерных обновлений. И советы будут попросту бесполезны.

Читать полностью »

Я начал писать этот плагин в феврале этого года просто для себя, потому что на тот момент я не нашел ничего похожего. Сейчас уже читательу известно про такие инструменты, как PixelPerfect и X-Precise, однако у каждого из них есть свои плюсы и минусы, как и у моего.

Итак, что же особенного в pixLayout?
Читать полностью »

Существует множество способов тестировать верстку. Большинство из них были описаны в статьях или комментариях хабра. Упоминаний данного способа я не нашел.

XPrecise

Отличный плагин для проверки верстки

Утилита разработана командой xhtmlized.
Совместима со всеми браузерами, потому как подключается в виде плагина jQuery.

Установка и настройка

Для тестирования верстки вам нужно подключить jQuery, а за ним XPrecise

	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="_xprecise/xprecise.min.js"></script>

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js