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

Введение

В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.
Читать полностью »

Подборка полезных CSS рецептов, или чем мы занимаемся на голых пятницах

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

Итак, представляем вашему вниманию сборку интересных и (надеемся) малоизвестных HTML и CSS-рецептов. Будем рады, если каждый из вас узнает что-то новое!
Читать полностью »

Добрый день!
Решил поделиться опытом перехода с Middleman (Ruby) на Express.js (Node.js) в качестве инструмента front-end разработчика.
Сам я занимаюсь back-end, так что статья может выйти не слишком актуальной, но, надеюсь, полезной хотя бы кому-нибудь.

Итак, задача: сделать приложение на Node.js с поддержкой компиляции Sass(Compass), CoffeeScript и Haml «на лету» при редактировании соответствующих файлов. Для этого будем использовать Express и Grunt для запуска веб-сервера и выполнения задач компиляции соответственно.
Читать полностью »

Доброго дня.

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

И так письмо:

Адаптивные письма? Пожалуйста!

Футер нас не особо интересует, ибо там все ок. Читать полностью »

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

Несколько полезных приемов для любителей LaTeX'а, желающих сверстать бланк какого-нибудь заявления. Будем для примера верстать форму претензии к Почте России (её «официальный» вариант можно, если повезёт, скачать с сайта Почты России). Всю верстку от первой и до последней буквы объяснять не будем, предполагая, что читатель с основами ЛаТеХа знаком. Рассмотрим специфические рецепты верстки «линеек» где нужно вписать пропущенные слова, чекбоксов с метками, подписей мелким шрифтом снизу текста и линий разной толщины и прерывистости.

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

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

Приветствую, уважаемое сообщество.

В предыдущей статье мы, используя только верстку, сделали кнопку “включить/выключить”, и вот что у нас тогда получилось:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="6dp"
    android:background="#dddddd" >

    <ToggleButton
       android:id="@+id/act_main_btn_telephony"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@drawable/button_background"
       android:drawableLeft="@drawable/icon_phone"
       android:drawableRight="@drawable/icon_on_off"
       android:gravity="left|center_vertical"
       android:textOn="Телефония"
       android:textOff="Телефония"
       android:textSize="24sp"
       android:textStyle="bold|italic"
       android:textColor="@color/text_color"
       android:onClick="onToggleButtonClick" />

</RelativeLayout>

XML-код получился довольно увесистый. В этой статье я покажу, как сделать его по-настоящему красивым. Мы сократим код вдвое, убрав все, что может затруднить сопровождение нашего приложения или вызвать недовольство тим-лида. В этой статье мы будем использовать строковые ресурсы (strings.xml), ресурсы размерностей (dimens.xml), стили и темы (styles.xml).Читать полностью »

Приветствую, уважаемое сообщество.

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

Первая часть предназначена для начинающих разработчиков. Я покажу, как сделать достаточно сложную кнопку исключительно версткой, не применяя Java-кода, ни тем более собственных компонентов. Знание этих приемов верстки пригодится и при работе с другими компонентами Android. По ходу статьи я буду подробно пояснять, что означают те или иные константы, атрибуты, команды и тому подобное. Но я также буду давать ссылки на официальную документацию Google, где вы можете подробно изучить каждую тему. Данная статья обзорная, я не ставлю цели привести здесь всю документацию, переведенную на русский язык. Поэтому я рекомендую изучать официальные источники, в частности те статьи, ссылки на которые я привожу здесь.

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

Задача

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

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

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

Вроде закончилась неделя 30 строк кода и взамен ей видимо пришла неделя "БЭМ". Причем прослеживается достаточно забавная очередность топиков:

И самое интересное, как всегда, в комментариях — чистой воды холивар. Но из-за чего? Почему одни свято верят в методологию БЭМ'а, другие презирают её как узурпатора семантичности? Я попробую изложить свою точку зрения на суть всего холивара и прояснить в первую очередь для себя положение БЭМ'а в собственном мироздании.Читать полностью »


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