Рубрика «html-верстка» - 3

В процессе работы над очередным Web-проектом озадачился вопросом, зачем мне нужна, большая, неповоротливая библиотека jQwery UI, с кучей мусора в виде классов и виртуальных элементов в DOM. Многие мои товарищи по оружию, fontent-разработчики и html-верстальщики часто в своей практике используют различного рода фреймворки с разной степенью загромождения документа, например, ненавистный мне bootstrap. Да, они ускоряют процесс создания проекта, но так же генерируют массу избыточного кода, много не нужных классов и конструкций вида:

 <div class=”name_1  name_2 name_3 … name_n”>

По моему скромному мнению выглядят не элегантно, я бы сказал, захламленными.
Опять же, чем легче документ с подключенными библиотеками и стилями, тем быстрее он грузится, а как следствие, выше позиция в поисковике. Мы же хотим быть в топе? Конечно хотим!
Читать полностью »

Для прогрессивной визуальной разработки нельзя просто внедрить пару тройку фишек. Нужно радикально изменить сознание и фундаментально поменять подход. Я не буду разбивать процесс на избитые заезженные этапы. Опишу более свежо. Две основных составляющих агрессивно нового подхода: «Дизайн в Браузере» и «Автоматизация фронт-энда».

Начнем с первого — «дизайна». Тут проблема в отношении к дизайну как к статической .psd. По ощущению это должно было потерять свою актуальность в тот момент, когда появился адаптив, добавилась динамика и доработка на живую макета стала привычным делом. Теоретически смерть статичных .psd-шек наступила вместе с отходом табличной верстки. Зачем пытаться оживить то, что отслужило?! Тогда это было актуально, так как фактически в таблицу запахивалась картинка макета, только в нарезанном виде. Сейчас же макет выполняет роль ориентира. В большинстве случаев мы не вырезаем ни пикселя. А просто держим макет открытым в соседнем окошке. Для того, чтобы написать всю эту «красоту» кодом.
Читать полностью »

Введение

Уважаемый читатель, данная статья является по сути своей продолжением статьи «Как сверстать веб-страницу. Часть 2 — Bootstrap» и здесь мы отойдём от собственно вёрстки, занявшись интеграцией HTML шаблона в CMS 1С-Битрикс.

В предыдущей части читатель Mirantus сверстал шаблон Corporate Blue от студии Pcklaboratory с помощью Bootstrap 3.

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

Создание приложений для LG Smart TV: советы начинающему разработчику
Привет! В этой статье я хочу поделиться своим опытом разработки приложений для платформы LG Smart TV. Лично я свой путь Smart TV разработчика начинал именно с этой платформы и хотел бы порекомендовать ее всем заинтересованным в данном направлении приложений. В первую очередь это связано с тем, что по качеству документации и предоставляемых разработчику возможностям LG не уступает своим основным конкурентам из Samsung. В то же время, специалисты санкт-петербургской лаборатории LG R&D достаточно открыты и всегда готовы предоставить актуальную информацию, тогда как от их коллег из московского центра разработок Samsung я уже несколько месяцев пытаюсь получить контакт хоть кого-то, кто может внятно отвечать на технические вопросы. Про других участников рынка Smart TV я лучше не буду упоминать: то, как они подходят к вопросам взаимодействия с теми, кто, по идее, должен наполнять их магазины приложений, вызывает большие сомнения в том, что они вообще заинтересованы в том, чтобы для них что-то разрабатывалось.
Читать полностью »

Задача

Получить возможность стилизовать чекбоксы с полным функционалом стандартных, с возможностью оставить стандартные при выключенном javascript-е, и вооружить различными колбеками и кастомными событиями.

Нестандартные чекбоксы

Посмотреть пример на jsfiddle
Читать полностью »

Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.

Часть 1. Верстка стандартными средствами

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

Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.
Читать полностью »

Налетай! На днях у нас вышла книга «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств». Для наших преданных поклонников с Хабры мы предлагаем скидку 25% на бумажную и цифровую версию книги. Акция действует до конца сентября! Чтобы получить скидку, при оформлении заказа введите промо-код f1f30831b892c163f476c.

Скидка на книгу «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств»
Читать полностью »

В процессе работы над одним из проектов передо мной встала задача создания сворачиваемого дерева папок на основе сведений о нем в базе данных. Для уточнения, это выглядит примерно так:

image

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

Всем привет

Каждому верстальщику хотя бы раз приходилось сталкиваться с задачей размещения текста внутри лини.
Например вот так:

image

Никогда не возникает проблем, если фон однотонный. Но что делать, если фоном является картинка как в данном примере?
Я предлагаю выношу на Ваш суд следующее решение. Возможно кто-то предложит дополнения или сделает замечания, я только ЗА.

Пример: ссылка

Суть решения в следующем:
Читать полностью »

css3logo
Доброе время суток. Я хочу рассказать вам о тенденции появления функций в css 3 и о том, как это можно и даже порой нужно использовать в проектах.

Чтобы не тратить ваше время я распишу свойства, о которых я хотел бы вам рассказать:

  • функция counter
  • функция calc
  • функция attr
  • функция toggle
  • единица измерения — rem
  • единица измерения — vw
  • единица измерения — vh

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


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