Верстка сайта


БЭМ для CSS

В этой статье я расскажу как я использую методологию БЭМ (#b_). О методологии подробнее здесь. Возможно вы подскажите мне как улучшить или пересмотреть свои методы.

Чем хорош БЭМ

Что важно для меня:

  • поддержка кода;
  • рефакторинг;
  • переиспользование;
  • самодокументированный код;

Эти пункты помогают без боли возвращаться к проектам, переключатся между ними без кровавых глаз и поддерживать код годами.

CSS структура на Ruby on Rails

Сейчас я расскажу какую структуру для css можно использовать, если вы разрабатывает на Ruby on Rails.

Пару фактов при которых всё это придумывалось и создавалось:

  1. Бэкенд на рельсах, используем все возможности которые есть, например, assets pipeline
  2. Используем идею бэм методологии

CSS gradients

Если вы вдруг решили изучить что такое css gradient и с чем его едят, то я для вас собрал ссылки на полезный материал как на русском, так и на английском языках.
Если есть что-то полезное у вас пишите в комментариях или на почту.

Stylus PX to REM Mixin

Rem очень крутая штука и вместо того, чтобы пересказывать документацию, почитайте о самом rem в статье Джонатана «Размер шрифта с помощью rem» (англ.), где он объясняет размеры шрифтов с px, em и как rem вступают в нашу игру.

The Stylus CSS

Метод по использованию в stylus rem, включает в себя 2 миксина: один определяет базовый размер шрифта, второй – ремификацию (надеюсь это так звучит, от англ. rem-ify) пикселей:

set-font-size(value) {
    font-size: value; /* добавляем PX как подстраховку */

    if (value is inherit) {
        /* делаем если нет значения для шрифта */
    } else {
        font-size: remify(value);
    }
}

remify(value) {
    u = unit(value);

    if (u is 'px') {
        return unit(value/16, 'rem');
    } else {
        return unit(value, u);
    }
}

16 – это базовый шрифт, из которого рассчитывается ремифицированный пиксель. (по-умолчанию, в современных браузерах используется размер шрифта 16px). Использование миксина будет выглядеть так:

.smaller {
	set-font-size(13px);
}

/*
	на выходе:

	.smaller {
		font-size: 13px;
		font-size: .8125rem;
	}

*/

Кстати, не забудьте установить базовый размер шрифта на html элементе, как правило это 100%. Также помните, что миксин использует миксин использует пиксели в качестве запасного размера для шрифта, поэтому если вас не устраивают пиксели, то данное решение вам не подойдет.

Другие интересные миксины для stylus можно найти тут

оригинал David Walsh: Stylus PX to REM Mixin

с/у Талга УтБ

Необходимые умения для фронтедщика

У Louis Lazaris, автора сайта impressivewebs.com , есть интересная статья Skills for Front-End Developers.

Хоть статья и 2011 года, но актуальность не потеряла (периодически обновляется список). Вот собственно и сам список умений (навыков) для фронтедщика.

Css препроцессоры часть 1

что такое css препроцессоры

Итак, давайте будем расти как верстальщики. Для качественной верстки и удобства (особенно для больших проектов) было придуманы css препроцессоры. Далее поговорим немного о них.

Давайте начнем с того, что обычный css нас многим не устраивает. А если вы считает, что все круто, то тогда не читайте дальше, а идите спать. Поэтому некоторые вещи мы делаем на javascript либо что-нибудь эдакое придумываем.

8 полезностей в Photoshop для быстрой верстки сайта

Сегодня мы поговорим о программе фотошоп, о том, как использовать его при верстке плюс маленькие хитрости, будем уменьшать время работы с данной программой. Ранее я писал в Урок 3. Верстка сайта: быстро вырезаем картинки в фотошопе, как делаю это я.

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

Не будет тянуть кота за хвост, и начнем, пожалуй :neutral:

Горячие клавиши Фотошопа.

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

Если Вам этого мало, то наберите в google горячие клавиши фотошопе и запоминайте их.

Необходимый набор.

У многих блогов, например как у моего, есть превьюшки для статей. И они все как один на лицо по размерам. И Вам нет необходимости постоянно в фотошопе создавать набор из нужных размеров.

Откройте фотошоп, создайте новый документ (ctrl + N), выберите размеры вашей превью картинки (у меня 200 на 200 пикселей), нажмите «Сохранить набор параметров…».

Фотошоп. Верстка сайта

Теперь придумываем название: «200 пикс х 200 пикс», либо «Превью блога» и т.д. и жмите ok.

Теперь чтобы создать документ (ctrl + N) размеров 200 на 200 пикселей, мне достаточно выбрать соответствующий набор.

Фотошоп. Создание набора для превью картинки

Расстояние и размеры элементов в фотошопе.

Есть несколько способов определения расстояния между блоками и блоков. Рассмотрим наиболее оптимальные.

Первый способ. Выбираем инструмент «Прямоугольная область» (М) и выделяем необходимый блок.  Смотрим во вкладку «Инфо» в Photoshop.Фотошоп. Размеры блоков

Таким же способом определяем расстояние между блоками.

Второй способ. Также расстояние можно измерить с помощью инструмента «Линейка». Не забывайте зажимать Shift для прямой линии линейки. Минус данного способа: необходимо определять ширину и высоту по отдельности.

Верстка сайта: опредилить размеры блоков

Другие способы: Также можно выделить элемент, скопировать и при создании нового документа записать размеры. Узнать размер текущего документа можно в левом нижнем углу.

Цвет в фотошопе.

Узнать цвет очень просто.

Первый способ. Выбираете инструмент «Пипетка» и кликайте на необходимый элемент. В блоке «Инструменты»  появится выбранный цвет. Кликайте по квадрату с цветом.

Фотошоп. Блок инструменты

И копируйте цвет в нужном формате.Верстка сайта фотошоп: определить цвет текста

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

Для текста. Можно использовать вышеописанные способы, но лучше активировать текст: выберите инструмент «Горизонтальный текст» (Т) и нажмите на текст, в блоке «Параметры» вы увидите цвет текста, а также другие параметры шрифт, размеры, жирность и т.д.

Фотошопе: как определить цвет текста

Рабочая среда в фотошопе.

При написании разметки сайта, когда уже фотошоп нужен лишь чтобы смотреть размеры и как должен выглядить сайт, многие блоки в фотошопе нам, в принципе, не нужны. Можно и нужно их убрать. Для этого давайте создадим новую рабочую среду в photoshop’e.

Закройте все ненужные окна: нажмите на крестике соответствуюшего блока, либо Окно  ->Уберите галочку.

Фотошоп: Новая рабочая среда

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

Новая рабочая среда в фотошопе

Прозрачность слоев.

Иногда при сохранении слоя конечная картинка отличается от оригинала своей прозрачностью, поэтому всегда обращаем внимание на непрозрачность и заливку слоя.

верстка сайта: фотошоп - прозрачность слоев

При сохранении непрозрачности слоя, я обычно создаю новый пустой слой и объединяю (ctrl +E) с необходимым. При этом сохраняются необходимые настройки слоя и растет КПД )).

Выбор необходимого слоя.

Для автоматического выбора слоя/элемента по которому вы кликаете необходимо сделать следующие действия в программе:

Верстка сайта.Фотошоп.Автовыбор слоя

Установить галочку на «Автовыбор», и из выпадающего селекта «Группа слоев». Теперь по клику элемента в блоке «Слои» будет выделяться нужный вам слой.

Оптимизированное сохранение изображения

Именно так я решил назвать этот пункт, так как необходимо не просто сохранить файл, но и оптимизировать его.

Запомните волшебную комбинацию: ctrl + shift +alt +s. Как бы длинно это не смотрелось, нажимается очень просто и легко. Конечно, вы можете переназначить данную функцию «Сохранить для Web и устройств».

Фотошоп: Сохранить как для Web и устройств
Предварительный просмотр картинки у меня стоит на 4 вариантах. Одна область для исходного изображения, остальные можно поменять для gif, jpeg и png форматов. Посмотреть какой весить легче и при этом качество не теряется (для этого сравниваем с исходным изображением). Если в общем то png и gif для мелких и прозрачных элементов, для простых картинок можно jpeg в высоком или среднем качестве. Понажимайте и выберите, что получше.Если вас не устраивают размер, то вы тут же можете их поменять (справа внизу). При изменении непропорционально нажмите на значок справа от размеров.

Нажимайте «Сохранить» и пользуйтесь оптимизированными картинками для вашего сайта.

А какие фишками вы поделитесь? Отписывайтесь в комментариях и делитесь с друзьями через социальные кнопки. :???:

с/у УтБ

***

Думаете над созданием собственного бизнеса? Магазин готовых бизнес планов предлагает свои услуги по разработке и знакомству с бизнес планами разных сфер.

На десерт сегодня девушка читает rap ;)

Урок 2.2 Блочная верстка: встроенные элементы, встроенный блок

Сегодня давайте уже разберемся с азами блочной верстки окончательно. Надеюсь, Вы читали, что такое блочные элементы. В данной статье Вы узнаете, что такое встроенные элементы и встроенный блок. Конечно, вы могли слышать и другие названия: инлайновые, линейные и т.д. В английском варианте это  inline  и  inline-block  соответственно.

Порой у вас бывало такое, что меняешь стили, меняешь, а ничего не происходит с элементом. Выстраиваются друг за другом в линию, на отступы не откликается и в таком веселом духе. Знакомо? Отлично, давайте разбираться.

            «Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. К встроенным элементам относятся теги <span>, <a>, <q>, <code> и др. В основном они используются для изменения вида текста или его логического выделения» htmlbook.ru

Давайте рассмотрим основные свойства встроенных элементов.

  1. Встроенные элементы это все те элементы, которые не относятся к блочным, т.е это a, br, img, em, small, span, strong и т. д.
  2. Встроенные элементы могут содержать:
    1. Только другие встроенные элементы (!) Нельзя вложить во встроенный элемент блочный (!)
    2. Разные данные (текст)
    3. Быть пустыми
  3. Встроенные элементы выстраиваются друг за другом в одну линию (т.е. не переносятся на новую строку)
  4. Можно использовать вертикальное выравнивание элементов (vertical-align)
  5. Занимают ширину по их содержанию. (как узнать ширину блока мы говорили в уроке 2.1)

По умолчанию встроенные элементы имеют свойство display:inline; (его не нужно писАть в css), но ведь вам никто не запрещает сделать следующее:

span {display:block;}

Встроенный элемент после таких манипуляций будет вести себя как блочный и примет все новые свойства. (при этом старые уже не действуют)

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

Встроенный блок.

Сразу же рассмотрим его свойства.

  1. В чистом виде не встречается, поэтому задается через стили свойством display:inline-block; (ie7 и ниже работает для встроенных элементов)
  2. Внутрь встроенного блока можно помещать данные (например, текст), строчные и блочные элементы. (советую следовать логике использования вложений)
  3. Можно выравнивать элементы по вертикали (vertical-align)
  4. Имеют ширину по содержимому + границы и отступы. (как у блочных), высота рассчитывается исходя из содержимого.
  5. Выстраиваются друг за другом в одну линию.
  6. Можно задать ширину и высоту.

Что дают нам данные свойства? Во-первых, они фактически универсальны, во-вторых, нет необходимости использовать обтекание (float).

Рассмотрим пример, Интернет-магазин. Вывод товаров друг за дружкой блоками в один ряд. Если каждый товар с описанием выводить как блок (списком), то они не будут стоять в ряд. Посмотрим:

</pre>
<ul>
	<li><img src="images/1.jpg" alt="" /><a href="#">Товар</a></li>
	<li><img src="images/2.jpg" alt="" /><a href="#">Товар</a></li>
	<li><img src="images/3.jpg" alt="" /><a href="#">Товар</a></li>
</ul>
<pre>

Теперь добавим стиль display:inline-block; для ul li – для выравнивания списка. Посмотрите, что получилось. Вуаля, немного волшебства с css и товары будут выглядеть отлично.

В internet explorer 7 и ниже для блочных элементов display:inline-block; отображается не корректно. Поэтому добавим zoom:1; и выставим display:inline; для данных браузеров через условные комментарии:

<!--[if lte IE 7]>
<style type="text/css">
ul li {
display: inline;
zoom: 1;
}
</style>
<![endif]-->

Надеюсь, теперь вы понимаете разницу между основными блоками. Теперь вы знаете, как себя они будут вести, и как заставить их вести себя.

с/у УтБ

***

В озвучке значимый голос диктора может повлиять на ваше восприятие записи. Выбирайте лучшие голоса!

***

Не знаю как вам, но такие флешмобы очень даже интересно смотреть :)

Урок 2.1 Блочные элементы

Блочная верстка – сегодня однозначно популярней табличной, о чем мы уже с Вами говорили в Уроке 2 Блочная верстка. Но как обычно есть всегда свои спецификации, которые должен знать и учитывать каждый начинающий html верстальщик в своем нелегком деле. :)

Давайте сегодня поговорим об особенностях блочных элементов.

Для начала выделим для себя три большие группы блоков (не учитывая блочную таблицу и ее производные):

Думаю, Вы уже встречали такие значения в сss под свойством display. Вот сегодня поговорим об одно из них.

Блочные элементы – block.

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

Важно запомнить основные свойства для блочных элементов:

В принципе, это основные свойства данных элементов, которые необходимо запомнить. Рассмотрим подробнее.

Вложенность

В блочные элементы можно вложить как блочные, так и строчные элементы:

Пример:

</pre>
<div>
<h1><a href="”#”"><span>Ссылка</span></a></h1>
</div>
<pre>

Т.е. в блочные элементы можно вложить бесконечное количество других элементов как блочных, так и строчных. Изменение стилей для других элементов (типа display:block;) не должно нарушать последовательность вложенности.

Нарушение вложенности типа <a href=”http://site.kz”><h2>ссылка</h2></a> приводит к невалидному коду и ошибке типа:

Типичные ошибки вложенности блочных элементов

Пространство блочных элементов

Что значит все доступное пространство? Давайте рассмотрим пример:

</pre>
<div>
Текст</div>
<pre>

Если не задавать параметры для блоков, то они занимают всю ширину в браузере, и Вы не увидели зеленый фон у элемента div. Почему? Вспомните, что мы говорили о ширине блочных элементов:

«Ширина блочного элемента есть все доступное пространство»

Объясняю: элемент абзаца (р) занял все пространство элемента div. Отсюда мы и не видим зеленый фон. По мере добавления текста блоки будут увеличиваться, а это есть одно из свойств элементов – высота рассчитывается исходя из содержимого блока.

Вот еще один пример для разбора:

</pre>
<div>
<h1>Текст</h1>
</div>
<pre>

Отступы у элемента абзаца (p) добавляются по умолчанию в браузере, для их удаления используйте сброс стилей css.

Ширина для блочных элементов

Как говорилось выше, ширина для блоков есть width + margin + padding + border;

На картинке все показано, что есть что.

ширина блочных элементов

Давайте посмотрим на исходный код примера:

</pre>
<div>
<div>Отступы у элемента абзаца (p) добавляются по умолчанию в браузере, для их удаления используйте сброс стилей css.</div>
</div>
<pre>

Давайте посчитаем ширину блока div. qwe:

width: 300px + border:5px; (граница проходит слева и справа! = 10px) + margin:10px 50px 10px 50px; (для ширины необходимы отступ слева и справа) + padding:5px 5px 5px 5px; = 420px;

Получается фактическая ширина блока div.qwe равна 420 px, что необходимо учитывать. Особенно когда делаете макет сайта.

C новой строки.

Каждый блочный элемент по умолчанию начинается с новой строки. Все просто, смотрим пример:

</pre>
<div>текст</div>
<h1>Текст</h1>
<pre>
текст

В не зависимости от ширины, блоки выстраиваются друг под другом вертикально вниз.


Теперь Вам необходимо сесть и разобраться еще раз во всем, написать похожие примеры, используя firebug посмотреть исходный код.

Надеюсь, статья была интересной и полезной. Теперь вы будете делать меньше ошибок, и будете предвидеть поведение блочных элементов.

Если Вы ждете новых статей по верстке, то советую подписаться на обновления блога ;)

На десерт сегодня матч 2010 года 11 человек против 200(!), в такой команде опасно забивать гол :)