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

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

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

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

Тут уже поднималась тема об использовании такого замечательного атрибута форм как placeholder. И даже приводились примеры на js (ищем по слову placeholder).

Экономия места при создании форм налицо (особенно в всплывающих формах). Поэтому было решено не отказываться от атрибута, а просто помочь ему заявить о себе и Internet Explorer. На помощь был призван jQuery.
Читать полностью »

Шаблоны для верстки или «экономим свое время»
Верстальщики — люди ответственные, ибо верстать нужно качественно и успевать укладываться в определенные сроки, но не всегда это получается. Выход есть

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

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

Данная статья посвящена опытным верстальщикам и неопытным дизайнерам. Первым она понадобится, чтобы тыкать в неё носом вторых, вместо того, чтобы долго объяснять, что такое жизнь в черном квартале как правильно подготовить макет под верстку.

Зачастую верстальщики, громко матерясь, рвут на голове волосы, после того, как увидят присланный на верстку макет. А все потому, что дизайнеры забывают о том, что макет нужно не только дизайнить а в дальнейшем еще и верстать. В итоге на выходе получается в лучшем случае «немножко не то», в худшем — «никому не говорите, что это сделал я». Как избежать подобных инцидентов, читайте под катом.
Читать полностью »

Данная статья посвящена опытным верстальщикам и неопытным дизайнерам. Первым она понадобится, чтобы тыкать в неё носом вторых, вместо того, чтобы долго объяснять, что такое жизнь в черном квартале как правильно подготовить макет под верстку.

Зачастую верстальщики, громко матерясь, рвут на голове волосы, после того, как увидят присланный на верстку макет. А все потому, что дизайнеры забывают о том, что макет нужно не только дизайнить а в дальнейшем еще и верстать. В итоге на выходе получается в лучшем случае «немножко не то», в худшем — «никому не говорите, что это сделал я». Как избежать подобных инцидентов, читайте под катом.
Читать полностью »

Создание качественного и востребованного продукта — это, как правило, результат слаженной работы нескольких производственных цепочек. Важно уметь «подружить» эти цепочки и настроить их на совместную работу.

Сегодня хотелось бы поговорить о том, как кодер видит дизайн C этим вопросом я отправился к техническим специалистам компании TemplateMonster Russia. Им слово…

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

Создание качественного и востребованного продукта — это, как правило, результат слаженной работы нескольких производственных цепочек. Важно уметь «подружить» эти цепочки и настроить их на совместную работу.

Сегодня хотелось бы поговорить о том, как кодер видит дизайн C этим вопросом я отправился к техническим специалистам компании TemplateMonster Russia. Им слово…

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

Вчера я делал верстку для панели с номерами страниц с использованием Twitter Bootstrap и мне потребовалось добавить туда выпадающее меню (для выбора вариантов сортировки и количества элементов на странице).

Выпадающее меню в панели номеров страниц Twitter Bootstrap

Bootstrap не содержит стандартных стилей для выпадающих меню в панели номеров страниц. Я написал свои стили для выпадающих меню, возможно, кому-то они будут полезны.

Скачать файл .less (просто подключите вместе с twitter bootstrap)
Демо

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

Видимо, только второй пост на хабре с участием Padrino за 2 года ;)

Padrino для frontend разработчика

Используйте HAML для генерации HTML

Padrino для frontend разработчика

Используйте SASS для генерации CSS

Padrino для frontend разработчика

Используйте Coffee Script для генерации JS

Padrino для frontend разработчика

Скачайте шаблонное приложение, установите инструментарий и начните разработку немедленно.

10 минут и все работает даже под Windows.

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

Подготовка макета для верстальщика

Заметка будет полезна начинающим веб-дизайнерам. У себя в блоге я уже поднимал тему того, должен ли дизайнер уметь верстать (на украинском). Тогда мы все сошлись во мнении, что он, как минимум, должен понимать то, как будет сверстан макет. И соответственно разрабатывать дизайн веб-ресурса таким образом, чтобы верстальщик не городил костылей для реализации заумных эффектов.

Поскольку разработка сайта — это командная, многоэтапная работа, то для достижения качественного результата на этапе дизайн-верстка, необходимо проработать не только визуальную часть дизайна, но и продумать интерактивные элементы. То есть те, которые изменяют свое состояние от действий пользователя. Это сразу откинет много вопросов верстальщика типа: «а как эта кнопка будет подсвечиваться?». Читать полностью »


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