Каждый раз, когда приходится создавать какой-то элемент, возникает небольшая проблема с придумыванием имени класса элемента, потому что мы хотим назвать его понятным именем, отражающим смысл и назначение этого элемента. Также, должны учесть то, что имя css-селектора не должно пересекаться с другими стилями.
Читать полностью »
Рубрика «html-верстка» - 2
Изоляция css стилей с помощью компонентного подхода
2017-08-13 в 7:00, admin, рубрики: components, css, gulp-plugin, html, html-верстка, javascript, Разработка веб-сайтовОсобенности –webkit-box или как «подружить» flexbox со старыми Safari
2017-06-07 в 8:53, admin, рубрики: css, css3, html, html-верстка, safari, Разработка веб-сайтовУверен, многие Front End Developer-ы постоянно сталкиваются с проблемой поддержки flexbox в старых версиях популярных браузеров. Среди них выделяются два явных фаворита – Internet Explorer (IE) и Safari. С IE всё проще, т.к. flex поддерживается в версиях 10.0+. Версии ниже уже не актуальны, поэтому их часто игнорируют. В Safari же ситуация иная, поскольку поддержка современной спецификации flexbox (по мнению Caniuse.com) начинается с версии IOS Safari 9.2+.
Инструментарий для front-end разработки под Linux
2016-10-13 в 7:08, admin, рубрики: css, Firefox, front-end, front-end разработка, html, html-верстка, html5, javascript, sublime text, Разработка веб-сайтовДоброго времени суток, господа девелоперы! В этой статье я расскажу, как сделать разработку под Linux действительно комфортной и удобной, чтобы она приносила только боль удовольствие.
Чего мы добиваемся:
Просматриваем страницу в браузере и правим в текстовом редакторе HTML и CSS/SASS. Код извлекаем напрямую из PSD, попутно корректируя до PixelPerfect прямо в браузере. При сохранении SASS автоматически преобразуется в CSS и загружается на сервер. Необходимые картинки из PSD шаблона вырезаем в два клика, после чего они так-же автоматически загружаются на сервер. Как этого добиться менее чем за пол часа? Я расскажу вам!
Сразу хочу предупредить вас, если ваш опыт работы более нескольких лет и вы являетесь достаточно опытным front-end'ером, то ничего нового вы в этой статье не найдете. Она предназначена для людей, которые относительно недавно присоединились к GNU/Linux сообществу или только решили к нему примкнуть.
Краткое содержание
Масштабирование текста в блоке с помощью Jquery
2016-09-10 в 21:58, admin, рубрики: html-верстка, javascript, jqueryНедавно получил заказ, где между всего прочего нужно было сделать блок, в котором текст должен масштабироваться внутри блока. Т.е не зависит, сколько текста в блоке – весь текст должен быть видимым! Сначала думал считать символы, строки… Сверстал блок в котором должен находиться контент и при вводе текста заметил, что блок растягивается в зависимости от наполнения. Родилась идея сделать функцию, которая будет подбирать размер шрифта, сравнивая исходную высоту блока и настоящую. Так родилась вот эта функция:
Intermediate CSS3 Hover Effects. Пошаговый туториал. Часть 3
2015-12-25 в 6:42, admin, рубрики: css, css3, CSS3 animation, css3 transform, css3 transition, hover effects, hover-эффект, html, html-верстка, веб-дизайн, Веб-разработкаЭта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.
Из-за большого размера статья разбита на три части. Первая часть. Вторая часть
Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.
Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.
Intermediate CSS3 Hover Effects. Пошаговый туториал. Часть 2
2015-12-25 в 6:42, admin, рубрики: css, css3, CSS3 animation, css3 transform, css3 transition, hover effects, hover-эффект, html, html-верстка, веб-дизайн, Веб-разработкаЭта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.
Из-за большого размера статья разбита на три части. Первая часть. Третья часть.
Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.
Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.
Toast-уведомления, теперь и в браузере
2015-03-11 в 8:14, admin, рубрики: html, html-верстка, java script, javascript, toast, Веб-разработка 
Каждый, кто хоть раз пользовался мобильным приложением, думаю, знаком с Toast-уведомлениями. Да, это именно неожиданно всплывающие сообщения, которые привлекают ваше внимание, когда вы увлечены в телефоне какой-то задачей.
В сети вы найдете тысячи готовых решений о том, как сделать Toast уведомления в Аndroid. А вот готового, простого решения из коробки для веб-браузеров, увы, не нашлось. Первой мыслью было взять какой-нибудь BOX-плагин и адаптировать его. Однако подобные плагины явно не способны смоделировать поведение Toast-уведомления.
Учитывая это, была создана небольшая JS-библиотека, эмитирующаю Toast-уведомления в браузере. Надеюсь, кому-то она будет полезной.
Читать полностью »
Универсальный виджет на 17 строк JS
2014-11-12 в 8:33, admin, рубрики: css, html, html-верстка, jquery, виджетыВ процессе работы над очередным Web-проектом озадачился вопросом, зачем мне нужна, большая, неповоротливая библиотека jQwery UI, с кучей мусора в виде классов и виртуальных элементов в DOM. Многие мои товарищи по оружию, fontent-разработчики и html-верстальщики часто в своей практике используют различного рода фреймворки с разной степенью загромождения документа, например, ненавистный мне bootstrap. Да, они ускоряют процесс создания проекта, но так же генерируют массу избыточного кода, много не нужных классов и конструкций вида:
<div class=”name_1 name_2 name_3 … name_n”>
По моему скромному мнению выглядят не элегантно, я бы сказал, захламленными.
Опять же, чем легче документ с подключенными библиотеками и стилями, тем быстрее он грузится, а как следствие, выше позиция в поисковике. Мы же хотим быть в топе? Конечно хотим!
Читать полностью »
Дизайн в браузере
2014-09-29 в 7:45, admin, рубрики: css, html, html-верстка, веб-дизайн, управление проектамиДля прогрессивной визуальной разработки нельзя просто внедрить пару тройку фишек. Нужно радикально изменить сознание и фундаментально поменять подход. Я не буду разбивать процесс на избитые заезженные этапы. Опишу более свежо. Две основных составляющих агрессивно нового подхода: «Дизайн в Браузере» и «Автоматизация фронт-энда».
Начнем с первого — «дизайна». Тут проблема в отношении к дизайну как к статической .psd. По ощущению это должно было потерять свою актуальность в тот момент, когда появился адаптив, добавилась динамика и доработка на живую макета стала привычным делом. Теоретически смерть статичных .psd-шек наступила вместе с отходом табличной верстки. Зачем пытаться оживить то, что отслужило?! Тогда это было актуально, так как фактически в таблицу запахивалась картинка макета, только в нарезанном виде. Сейчас же макет выполняет роль ориентира. В большинстве случаев мы не вырезаем ни пикселя. А просто держим макет открытым в соседнем окошке. Для того, чтобы написать всю эту «красоту» кодом.
Читать полностью »
Создаём шаблон 1С-Битрикс на базе Bootstrap вёрстки
2014-02-17 в 5:14, admin, рубрики: 1С-Битрикс, Bootstrap, css, html-верстка, tutorial, Веб-разработка, метки: 1С-Битрикс, bootstrap, css, html-верстка, tutorialВведение
Уважаемый читатель, данная статья является по сути своей продолжением статьи «Как сверстать веб-страницу. Часть 2 — Bootstrap» и здесь мы отойдём от собственно вёрстки, занявшись интеграцией HTML шаблона в CMS 1С-Битрикс.
В предыдущей части читатель Mirantus сверстал шаблон Corporate Blue от студии Pcklaboratory с помощью Bootstrap 3.