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

Чем объясняется подобная распространенность таких иконок и что они из себя представляют вообще? Само название шрифтовые - говорит о многом.

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

Объяснения объяснениями, но лучше на практике раз попробовать с ними столкнуться или поработать. Чтобы не забираться в дебри, скажу сразу - каждый из нас сталкивался хоть раз в жизни с такими шрифтами.

Для этого откройте Microsoft Word, выберите в нем любой из наборов шрифтов - “Wingdings”, “Wingdings 2”, “Wingdings 3” - и попробуйте попечатать в пустом документе. Вместо “букав” будут печататься всякие разные символы:

Шрифтовые иконки Wingdings в Word

Это происходит как раз потому, что вместо букв художником в этих шрифтах были созданы такие символы (иконки). Но давайте немного углубимся вдаль, в веб-дизайн.

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

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

Упоминание одного из таких сервисов (кстати, очень популярного) я встретил недавно, просматривая видеокурс “TutsPlus - PSD to WordPress minimal portfolio”. В одном из уроков автор Adi Purdila говорит о том, что сервис IcoMoon очень легко и просто использовать для целей применения шрифтовых иконок на сайте.

Раз сервис IcoMoon легко и просто использовать - тогда это как раз для нас! Давайте попробуем выбрать с его помощью несколько нужных нам символов и “прикрутим” их к нашему проекту.

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

Набор иконок для выбора необходимой иконки из таблицы

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

Редактирование выбранной иконки в IcoMoon

Когда нужный набор иконок выбран, переходим вниз страницы и нажимаем кнопку Font. Откроется промежуточное окно, в котором представлен список всех выбранных для скачивания иконок и их характеристики:

Окно предварительного редактирования набора иконок

Здесь также можно отредактировать необходимые иконки - название, код и так далее. Если все устраивает, нажимаем кнопку Download, чтобы скачать выбранный набор в виде архива:

Готовый архив с иконками сервиса IcoMoon

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

1
fonts
и файл
1
style.css
.

Директорию со всем ее содержимым просто перекидываем в проект “как есть”, а файл

1
style.css
открываем в HTML-редакторе.

Нам потребуется его содержимое, которое также можно перенести в css-файл проекта почти без изменений. Но рассмотрим содержание

1
style.css
более подробно:

@font-face {
  font-family: 'icomoon';
  src:url('../fonts/icomoon.eot');
  src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon.woff') format('woff'),
    url('../fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

… эти строчки кода “обычные” - здесь происходит подключение скачанных шрифтов. Только нужно немного исправить путь к файлам:

[class*="icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

… эти строчки - CSS-стили для скачанных шрифтовых иконок. Точнее - здесь приводиться к общему знаменателю отображение этих шрифтов:

.icon-bubble:before {
  content: "\e600";
}
.icon-bubbles:before {
  content: "\e601";
}
.icon-bubbles2:before {
  content: "\e602";
}

Классы для скачанных шрифтовых иконок и пример их применения в HTML-странице. В данном случае - через псевдоэлемент

1
:before
.

Как видно из кода, иконки можно очень легко редактировать черед правила CSS. Давайте немного пофантазируем и преобразуем вышеприведенный код:

@import "compass/css3";
.icon-bubble:before {
  content: "\e600";
}
.icon-bubbles:before {
  content: "\e601";
  margin-right: 5px;
  color: #ff0000;
}
.icon-bubbles2:before {
  content: "\e602";
  margin-right: 10px;
  color: #0000ff;
  font-size: 26px;
  line-height: 26px;
  cursor: pointer;
  @include transition-property(color);
  @include transition-duration(.5s);
  @include transition-timing-function(ease-in);
}
.icon-bubbles2:hover:before{
  color: darken(#0000ff, 20%);
}

Вот мы и познакомились со шрифтовыми иконками. Все оказалось просто и приятно в работе.


Интересный вопрос создания поля поиска с кнопкой внутри.

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

Пример поля поиска с кнопкой внутри на макете

Дизайн нарисован таким образом, что видим следующее. Поле ввода текста с текстом-заглушкой

1
placeholder
, справа внутри поля находиться кнопка отправки запроса в виде текста “Send”.

Все вроде так и в чем же проблема? Трудность заключается в том, что на сегодняшний день возможности CSS не позволяют поместить кнопку внутри элемента

1
input
. Поэтому в данном случае выход один - разместить рядом два элемента:
1
input
и кнопку (
1
button type="submit"
или
1
input type="submit"
).

Оба эти элемента обернуть в родительский элемент

1
form
(благо он является блочным) которому придать внешние свойства поля ввода - фоновую заливку, границу, внутренние отступы
1
padding
. А у настоящих элементов
1
input
или
1
button
убрать все визуальные признаки их присутствия внутри
1
form
.

На авторитетном для меня сайте htmlbook есть статья, посвященная подобному вопросу. Но в ней описывается способ, когда внутрь элемента форм вставляется дополнительный блок

1
div
. Которому назначаются все внешние атрибуты поля ввода.

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

1
form
.

Мне более нравиться способ, представленный на сайте Speckyboy.com автором Catalin Rosu, в котором как раз и используются только три элемента:

1
form
,
1
input type="text"
,
1
button type="submit"
. В самом конце статьи я приведу код этого примера также, ибо он мне понравился.

Приступаем к первому примеру и начнем создавать поле поиска с кнопкой, как на картинке. Для начала придадим элементу

1
form
внешние признаки поля ввода: зададим границу с радиусом скругления, фоновую заливку и внутренние поля отступа
1
padding
.

Помимо этого, явно установим ширину и высоту нашего будущего “поля” ввода и немного приукрасим ее, анимировав цвет границы при наведении

1
hover
:

form{
  border: 1px solid #ad9d80;
  padding: 4px 20px 4px 24px;
  width: 254px;
  margin: 0 0 25px 0;
  height: 30px;
  background-color: #e4d9c5;
  border-radius: 9px;
  
  &:hover{
    border-color: darken(#ad9d80, 10%);
  }

Теперь уберем все, что делает

1
input
таковым в нашем случае - обнулим границу, переопределим
1
padding
и установим в ноль
1
margin
.

Это основные свойства элемента

1
input
, назначаемые ему по умолчанию браузером. Затем немного поборемся с браузерами на WebKit (Chrome\Safari), которые создаются эффект свечения вокруг поля ввода при получении фокуса
1
outline
и рисуют тонкую линию-границу
1
-webkit-appearance: none
несмотря на то, что мы убрали ее, обнулив
1
border
.

Фоновый цвет сделаем одинаковым с элементом

1
form
, чтобы создавалась иллюзия однородности. Все остальные свойства можно не упоминать - они очевидны (кегль, цвет текста, высота
1
input
и так далее).

Практически также поступим для элемента

1
button
, за исключением характерных нюансов типа
1
text-transform: uppercase
или
1
color: #4f432e
.

Кстати, у Catalin Rosu я перенял “фишку”, когда он применяет

1
button type="submit"
вместо
1
input type="submit"
. Это делается для дополнительной функциональности кнопки, так как
1
button
может перехватывать событие Enter (нажатие этой клавиши на клавиатуре) + событие мыши. А вот
1
input type="submit"
- только нажатие мыши на самом себе:

input[type="text"]{
  border: none;
  margin: 0;
  outline: none;
  -webkit-appearance: none;
  height: 30px;
  vertical-align: top;
  background-color: #e4d9c5;
  color: #beb19a;
  font-size: 18px;
  font-style: italic;
  padding: 0 8px 0 0;
  width: 192px;
}
button[type="submit"]{
  border: none;
  margin: 0;
  padding: 0;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 30px;
  color: #4f432e;
  background-color: #e4d9c5;
  cursor: pointer;
  transition: color .2s;
  
  &:hover{
    color: lighten(#4f432e, 10%);
  }

Ну и в конце приукрасим текст-заглушку

1
placeholder
. Здесь придется использовать браузерные префиксы, так как данное свойство не поддерживается в полной мере браузерами на сегодня:

input::-webkit-input-placeholder {
  color: #beb19a;
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
}
input:-moz-input-placeholder {
  color: #beb19a;
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
}
input:-ms-input-placeholder {
  color: #beb19a;
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
}

Совсем забыл привести HTML-код, на основе которого создавались все вышеприведенные стили:

<form action="#" method="#">
  <input type="text" name="email" id="email" placeholder="enter your email address...">
  <button type="submit">send</button>
</form>

Результат создания поля поиска показан ниже:

Созданное в коде поле ввода с кнопкой внутри

Все хорошо.

Поле ввода и кнопка со стрелкой (псевдо-элемент) внутри.

На закуску привожу полный код (почти без объяснений - чего там объяснять) от Catalin Rosu, как и обещал.

Здесь есть интересный атрибут

1
required
, который делает значение в поле ввода обязательным. Если оно будет пустым и нажать кнопку отправки, то появиться сообщение о необходимости сначала ввести данные.

Также автором статьи намеренно используется элемент

1
input type="text"
вместо нового элемента
1
input type="search"
, который еще не до конца поддерживается всеми браузерами:

<form class="catalin">
    <input type="text" placeholder="Search here ..." required>
    <button type="submit">Send</button>
  </form>

Довольно объемный, но это связано с теми эффектами, которые применены к данной форме:

form.catalin{
  width: 390px;
  margin: 50px auto;
  overflow: hidden;
  padding: 10px;
  background-color: #ccc;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,.3) inset;
}
  form.catalin input{
    float: left;
    border: none;
    padding: 2px 10px 2px 4px;
    font: 16px Arial, Helvetica, sans-serif;
    height: 26px;
    width: 306px;
    margin: 0;
    -webkit-appearance: none;
    outline: none;
    box-shadow: 0 0 1px rgba(0,0,0,.5);
    border-radius: 3px 0 0 3px;
  }
  form.catalin button{
    float: left;
    border: none;
    background-color: #778899;
    padding: 0;
    margin: 0;
    width: 70px;
    height: 30px;
    font: bold 12px/30px Arial, Helvetica, sans-serif;
    position: relative;
    cursor: pointer;
    text-shadow: 1px 1px 1px rgba(255,255,255,.5);
    border-radius: 0 3px 3px 0;
    text-transform: uppercase;
    text-align: center;
  }
    form.catalin button:hover{
      background-color: #667788;
    }
  form.catalin button:before{
    content: '';
    position: absolute;
    top: 10px;
    left: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #778899;
  }
    form.catalin button:hover:before{
      border-right-color: #667788;
      text-shadow: 1px 1px 1px rgba(255,255,255,.6);
    }

/* Placeholder
-----------------------------------------------------*/
  form.catalin input::-webkit-input-placeholder {
     color: #999;
     font-weight: normal;
     font-style: italic;
  }
   
  form.catalin input:-moz-placeholder {
      color: #999;
      font-weight: normal;
      font-style: italic;
  }
   
  form.catalin input:-ms-input-placeholder {
      color: #999;
      font-weight: normal;
      font-style: italic;
  }

И результат этого кода - красивое поле ввода с не менее красивой кнопкой отправки данных на сервер:

Поле ввода с кнопкой внутри

На этом все.


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

А точнее - задает вопрос - почему при создании треугольников на CSS с помощью псевдоэлементов

1
:before
и
1
:after
получаются именно треугольники? Методика создания таких треугольников хорошо расписана в Интернете, повторять не буду. Кому интересно, легко ее найдет. Вопрос как раз в том, почему в итоге получаются треугольники, а не прямоугольники, к примеру?

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

Как раньше представлял:

Ошибочное представление границ блока

Как есть на самом деле:

Правильное представление границ блока

То есть, браузер отрисовывает границы под углом в 45 градусов. Точно также, как делают оконные рамы, если “на пальцах”.

Ну хорошо, с этим разобрались. Пусть будет так, но причем здесь угол в границах и треугольник? Для этого продолжим наше небольшое исследование. Оставим подопытный прямоугольник и начнем его понемногу “урезать”.

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

Блок без ширины и высоты

Теперь уберем нижнюю границу у этого блока и получим такое:

Блок без нижней границы

Ну а теперь осталось дело за малым - сделаем левую и правую границы без цвета, на языке CSS - transparent.

Вуаля:

Блок с прозрачными боковыми границами

Вот и получился треугольник на CSS. Оказалось - все просто и логично.

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

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

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

На этом все.


Настала очередь изучить, что такое псевдо-класс

1
:target
.

Вопрос достаточно интересный как с точки зрения теории, так еще больше - с точки зрения практики.

Начнем издалека и вспомним (если кто читал) одну из глав книги Энди Бадда “Мастерская CSS”. Глава называется “Изменение стиля элемента при наведении указателя на отдаленный элемент” и речь в ней идет о том, как сделать так, чтобы управлять одним элементом с помощью другого.

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

Визуально создается впечатление, что они никак не связаны между собой. Но на самом деле они находятся внутри одного элемента - ссылки (ниже приведен кусок кода из этой главы в качестве примера):

<a title="Richard Rutter" href="http://www.clagnut.com/">
  <span class="link">» Richard Rutter</span>
</a>

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

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

1
:target
. Другое дело, что поддержка в браузерах этого CSS-свойства не полностью реализована и здесь можно смело показать пальцем в сторону браузера IE, в нем оно поддерживается, начиная с 9-ой версии.

Псевдо-класс target

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

Приведу в качестве примера кусок кода, демонстрирующий такой подход:

  <p>Lorem ipsum dolor sit amet, sed do eiusmod tempor</p>
  <p>Lorem ipsum dolor <a href="#example">Example</a> et dolore magna aliqua.</p>
  <p id="example">Lorem ipsum dolor sit amet, ut enim ad minim veniam</p>
  <p>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut</p>
  <p>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut</p>

Видим ссылку, помещенную в середине документа, обрамленную элементами

1
p
. У ссылки атрибут
1
href
имеет значение
1
#example
, который очень похож на ссылку на якорь. На самом деле это и есть ссылка на якорь, который назначен для одного из параграфов с идентификатором
1
id="example"
.

Вид ссылки может быть не обязательно таким, но и более длинным -

1
http://localhost:7788/third/#example
. Все, что располагается в ней после знака диез
1
#
, называется
1
хэштег
.

Псевдо-класс

1
:target
как раз и служит для стилизации элемента с якорем, на который указывает такая ссылка. Давайте приступим к стилизации, чтобы воочию увидеть, как работает этот псевдо-элемент.

Для одного из параграфов мы уже назначили идентификатор, который является якорем. Пропишем для него немного правил:

#example{
  font: 12px Georgia, serif;
  color: #778899;
  -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
       -o-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}

Мы изменили семейство шрифтов, кегль и цвет. Эти правила устанавливаются “как обычно”, то есть - как прописали, так они и отображаются в браузере. Теперь создадим немного стилей, которые первоначально себя никак не проявляют, а только по происшествии какого-то события.

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

#example:target{
  color: #bbddff;
  font-weight: bold;
  outline: 1px solid #ff0000;
  padding: 20px;
  text-shadow: 1px 1px 1px #667788;
}

Откроем созданную нами страницу в браузере - и почти ничего не увидим. Точнее - только те правила, которые явно прописаны в первом куске кода. Но если кликнуть мышью на ссылке с текстом

1
Example
, то увидим достаточно занимательную трансформацию параграфа. Это псевдо-класс
1
:target
в действии!

Он применил прописанные для него правила только при совершении некоего события. И применены они были к обособленному участку HTML-кода (помеченному идентификатором

1
#example
), который почти никак не связан со ссылкой.

Можно немного усложнить пример и связать несколько параграфов между собой, то есть таким образом:

#example:target + p{
  font-variant: small-caps;
  font-weight: bold;
  color: #0000ff;
  text-indent: 3em;
}

Откроем вновь страницу в браузере и посмотрим результат. Все ОК.

Псевдо-класс

1
:target
может принимать любые CSS-свойства, в том числе скрытие\показ элементов с помощью правила
1
display
. Последнее довольно часто применяется при верстке различных блоков.

На странице сайта MDN приведен пример создания одного из таких блоков - CSS LightBox. Другим ярким примером использования этого элемента являются вкладки на чистом CSS, где необходима смена цвета вкладок и их содержимого при переключении.

Ниже привожу, как всегда, полный текст кода.

  <p>Lorem ipsum dolor sit amet, sed do eiusmod tempor</p>
  <p>Lorem ipsum dolor <a href="#example">Example</a> et dolore magna aliqua.</p>
  <p id="example">Lorem ipsum dolor sit amet, ut enim ad minim veniam</p>
  <p>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut</p>
  <p>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut</p>
#example{
  font: 12px Georgia, serif;
  color: #778899;
  -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
       -o-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}

#example:target{
  color: #bbddff;
  font-weight: bold;
  outline: 1px solid #ff0000;
  padding: 20px;
  text-shadow: 1px 1px 1px #667788;
}

#example:target + p{
  font-variant: small-caps;
  font-weight: bold;
  color: #0000ff;
  text-indent: 3em;
}

В принципе, это и все, что можно сказать о псевдо-классе

1
:target
.


Для меня, как новичка в изучении фреймворков данная тема интересна.

В этой статье приводится краткое сравнение двух популярных продуктов - Boilerplate и Bootstrap. Далее - вольный перевод статьи, написанной автором Ivaylo Gerchev для известного среди веб-дизайнеров сайта SitePoint.com.

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

Boilerplate и Bootstrap - оба являются очень полезными инструментами для создания проектов. Но вопрос заключается в том: какой из них выбрать и какой лучше подойдет для меня и моего проекта? Вы не первый, кто задается таким вопросом (если вообще задаетесь). Именно для цели прояснить ситуацию и принять правильное решение и была написана данная статья.

Самый очевидный вопрос из всех - какой продукт лучше всего использовать? Ответ на него является слишком общим и расплывчатым, поэтому нам потребуется более детальное сравнение и объяснение каждого из них. В действительности, решений на данный вопрос не два, а четыре: можно использовать Boilerplate, можно использовать Bootstrap, можно использовать оба этих продукта совместно или не использовать никакой из них. Для того, чтобы решить, какой этих пунктов является лучшим, позвольте мне погрузиться в детали и рассказать о преимуществах и недостатках каждого из двух претендентов.

Использование Boilerplate

Boilerplate является шаблоном для быстрого старта при разработке fron-end’а, который содержит в себе наилучшие готовые образцы, взятые из практики веб-разработки. Данный шаблон предлагает готовую общую структуру папок и файлов будущего проекта, готовый HTML5-шаблон и основные конфигурации для взаимодействия с сервером. Он похож на план постройки для вашего дома, но у него отсутствуют строительные блоки. Другими словами, у вас есть общее представление, как построить дом и вы сделали все необходимые предварительные шаги для его постройки, но у вас нет под рукой необходимых строительных материалов, чтобы приступить к строительству. Но вы вольны добавить в Boilerplate любые “отсутствующие” HTML/CSS/Javascript-компоненты из любого места, включая и Bootstrap.

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

  • Готовый HTML5-шаблон совместно с базовой структурой файлов и папок под будущий проект;
  • Готовые к использованию, оптимизированные стили печати;
  • Кросс-браузерная совместимость;
  • Оптимизация под мобильные браузеры;
  • Прогрессивное улучшение (progressive enhancement) и постепенная деградация (graceful degradation);
  • Улучшенная конфигурация взаимодействия с сервером;
  • Правила для сжатия и оптимального кеширования;
  • Оптимизированный под Google Analytics сниппет сайта;
  • и многое другое …

Вы получаете все эти прекрасные вещи сразу, не написав ни единой строчки кода. Ниже представлено содержимое распакованного архива Boilerplate:

  • 1
    
    css
    - директория, в которой содержатся файлы
    1
    
    normalize.css
    ,
    1
    
    main.css
    с настройками Boilerplate по умолчанию, основные helpers, медиа-запросы и стили печати;
  • 1
    
    doc
    - директория с документацией по Boilerplate. Вы можете использовать эту директорию, чтобы хранить в ней документацию по своему собственному проекту;
  • 1
    
    img
    - пустая директория под изображения вашего будущего проекта;
  • 1
    
    js
    - директория, содержащая файл main.js для вашего собственного кода и файл
    1
    
    plugin.js
    , содержащий код под плагины. Также здесь располагаются библиотеки Modernizr и jQuery, каждая в своей отдельной папке;
  • Настройки по умолчанию для сервера Apache. Для остальных серверов существует репозиторий настроек Server Configs;
  • 1
    
    404.html
    - очень обобщенный шаблон страницы ошибки 404;
  • 1
    
    apple touch icons
    - набор готовых иконок для Apple TouchScreen;
  • 1
    
    crossdomain.xml
    - шаблон для работы с кросс-доменными запросами
  • 1
    
    favicon.ico
    - файл фавикона;
  • 1
    
    humans.txt
    - файл со списков разработчиков проекта (вашего проекта);
  • 1
    
    index.html
    - готовый HTML5-шаблон, основа для всех страниц вашего проекта;
  • 1
    
    robots.txt
    - файл для включения в список всех страниц, которые вы хотите исключить поиска.

Каталог Boilerplate-проекта

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

Использование Bootstrap

Bootstrap является фреймворком для front-end разработки и набором инструментов веб-дизайнера для создания современных web-сайтов. С помощью фреймворка Bootstrap вы можете создать полностью функциональный web-сайт с нуля. То есть, он предоставляет вам не только стартовую точку, но и все строительные материалы, которые могут потребоваться при создании сайта. Скачиваемый архив Bootstrap содержит в себе только файлы для CSS и JS компонентов, плюс набор шрифтовых иконок. В дополнение к этому, вы можете скачать основной шаблон для начала создания сайта. Структуры файлов и папок для будущего проекта или конфигураций для взаимодействия с серверной частью сайта - не существует.

Преимущества и основные характеристики:

  • Ориентированность в первую очередь на мобильные устройства;
  • Кросс-браузерная совместимость;
  • Легкость использования;
  • Система CSS-сетки;
  • Готовые к использованию компоненты и утилиты;
  • и многое другое …

Список компонентов и утилит фреймворка Bootstrap представлен ниже:

  • 1
    
    Grid
    - утилита для создания разметки дизайна сайта;
  • 1
    
    Icons
    - набор иконок, отсортированных по размерам;
  • 1
    
    CSS classes
    - набор основных классов стилей для разработки сайта;
  • 1
    
    CSS components
    - стилизованные HTML-компоненты;
  • 1
    
    JS widgets
    - замечательный набор интерактивных компонентов на Javascript;
  • Шаблоны и примеры для начала работы.

Каталог Bootstrap-проекта

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

Использование Boilerplate плюс Bootstrap

Как насчет совместного использования обоих продуктов? Нет проблем! Это легко настроить с помощью проекта Initializr, который автоматически интегрирует Boilerplate и Bootstrap друг с другом. Используя Initializr, можно создать настраиваемый архив, содержащий в себе все “вкусности” обоих пакетов. Вы можете воспользоваться данным ресурсом, если вам для работы необходимы лучшие части обоих миров.

Использование вашего собственного решения на базе Boilerplate

Некоторые разработчики не любят пользоваться таким продуктами, как Boilerplate или Bootstrap. Их самым главным аргументом в этом вопросе является тот факт, что подобные инструменты содержат в себе слишком много неиспользуемого в проекте кода (грубо говоря - в Bootstrap имеется 100 CSS-классов, но в текущем проекте используется только 20 из них. Остальные получаются бесплезным балластом, который только нагружает каналы связи с сервером и сам браузер). Если вы думаете точно также, то вы должны знать, что вы не ограничены рамками чьих-то сторонних разработок. Вы можете легко собрать для себя лучшие разработки в один собственный фреймворк. Такой способ поможет создать вам коллекцию только тех компонентов, которые вам необходимы.

Вердикт

Правильный выбор между этими продуктами зависит от двух вещей. Первое - вы должны знать, что вам необходимо для создания проекта и какие требования предъявляет сам проект. И второе - вы должны знать, что может предложить вам каждый из этих программных продуктов (Boilerplate & Bootstrap), их достоинства и недостатки. Понятно, что с первым вопросом я не смогу помочь вам, а вот по второму вопросу могу дать краткий совет, состоящий из нескольких пунктов:

  • с помощью Boilerplate вы не сможете создать цельный сайт - это только отправная точка;
  • с помощью Bootstrap можно создать с нуля полный сайт благодаря компонентам и утилитам этого фреймворка;
  • Boilerplate является серверно-ориентированным продуктом - хороший шаблон для старта проекта, если вы работаете с серверными технологиями, как например PHP;
  • Bootstrap - клиент-ориентированный продукт, это полный набор инструментов для создания сайтов (front-end разработка);
  • Boilerplate - это набор основного кода, в который вы можете добавить любой компонент, который необходим;
  • Bootstrap - наоборот, это полный набор готовых к использованию компонентов, которые вы можете использовать “из коробки”;
  • Вы можете объединить вместе Boilerplate и Bootstrap, чтобы получить преимущества обоих продуктов;
  • Вы можете создать и использовать свой собственный настроенный шаблон, включающий только те компоненты, которые вам необходимы.

Моим заключительным словом будет следующее. Оба продукта - и Boilerplate и Bootstrap являются прекрасными инструментами, которые вы можете использовать для своей работы. Все зависит о того, какие задачи перед вами стоят - тот инструмент вам и требуется выбрать для решения задачи.

На этом перевод закончен, ибо закончена сама статья …