Архив метки: CSS

Главная / CSS
5 Постов

В этом посте мы поговорим о Bootstrap, который является CSS-фреймворком.

Это один из наиболее популярных CSS-фреймворков, его разработали инженеры из Twitter.

Что такое Bootstrap

Bootstrap это самый популярный HTML/CSS/JavaScript фреймворк для разработки отзывчивых, «mobile first» проектов в вебе.

Давайте разберем эти утверждения.

Прежде всего, самый популярный фреймворк. На Github’е у них больше 110 тысяч звезд и больше 50 тысяч форков. Так что, это самый популярный проект на всем сайте.

Bootstrap состоит по большей части из CSS. Он предопределяет множество CSS-классов для вас.

Часто Bootstrap требует иметь определенную HTML-структуру на вашей странице.

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

Он также имеет крутой JavaScript-фреймворк, основанный на jQuery API, который помогает добавлять плагины реально улучшающие ваш сайт.

Кроме того, Bootstrap называют «mobile first» фреймворком.

В общем-то, это означает, что вы имеете дело в первую очередь с мобильными девайсами.

В реальности, такой подход может иметь два варианта.

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

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

Я бы сказал, что оба эти варианта полностью валидны.

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

Также этот подход означает, что CSS-фреймворк должен подходить для мобильных.

Кстати, довольно интересно, что Bootstrap не всегда был «mobile-first». До версии 2.0 или около того, Bootstrap имел отдельный CSS-файл и отдельный набор классов для них.

Но сегодня он mobile-first.

Недостатки Bootstrap

Какие недостатки у этого фреймворка по сравнению, к примеру, с написанием собственного?

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

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

Так что, хотя Bootstrap и слегка раздут, это не очень плохо.

Далее, вы можете написать свой собственный фреймворк, который будет более направлен на ваш сайт и значительно меньше. Но это также займет у вас значительно больше времени.

Официальный сайт и документация

Официальный сайт — getbootstrap.com.

На официальном сайте можно найти документацию, примеры, темы и прочее.

Медиа-запросы позволяют группировать стили вместе и задавать их для разных девайсов на основе определенных критериев.

К примеру, вы можете определить устройство по его ширине, высоте или ориентации (горизонтальной, портретной).

Конечно, одним из самых очевидных различий между просмотром сайта на десктопе и телефоне будет их размер экрана.

Не забывайте, что CSS имеет силу создавать очень разные макеты веб-страниц на основе одного и того же HTML. Помните csszengarden.com?

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

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

Без них адаптивный дизайн, о котором мы скоро поговорим, не был бы возможным.

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


@media (max-width: 767px) {
  p {
    color: blue;
  }
}

Медиа-запрос начинается с @media, затем идет медиа-свойство и фигурные скобки.

Внутри фигурных скобок находятся стили. Это как таблица стилей внутри таблицы стилей.

Если медиа-свойство разрешается как true, стили внутри фигурных скобок применяются.

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

Основные медиа-свойства


@media (max-width: 800px) {...}


@media (min-width: 800px) {...}


@media (orientation: portrait) {...}


@media (screen) {...}


@media (print) {...}

Вы можете определять устройства по ширине, высоте, по ориентации, типу экрана и т.д.

Но наиболее частым применением является таргетирование по ширине.

Основные логические операторы медиа-запросов

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

Одним из наиболее популярных логических операторов является and.

В качестве примера, код ниже определяет диапазон ширины.


@media (min-width: 768px) and (max-width: 991px) {...}

Другим способом комбинации медиа-запросов является разделение их запятой. Это, по сути, эквивалент оператора OR.


@media (max-width: 767px) , (min-width: 992px) {...}

На практике, при создании адаптивного дизайна или адаптивного макета самым частым оператором будет and.

Структура таблицы стилей с медиа-запросами

Я хотел бы показать вам как структурировать таблицу стилей с медиа-запросами в ней.

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


p { color: blue; } /* базовые стили */

...

@media (min-width: 1200px) {
...
}

@media (min-width: 992px) and (max-width: 1199px) {
...
}

...

Базовые стили будут применяться везде, без разницы на каком устройстве вы просматриваете сайт.

Затем вы пишете стили для определенных размеров экрана, например изменяя для них некоторые базовые стили или добавляя новые.

Нужно быть очень осторожным, чтобы не перекрывать границы других медиа-запросов.

В примере выше первый медиа-запрос имеет минимальную ширину в 1200 пикселей, а во втором медиа-запросе максимальная ширина указана в 1199 px.

Если бы во втором запросе было включено 1200, то применялись бы оба из них, и скорее всего это было бы не очень хорошо.

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

Примеры

Давайте взглянем на пример.

Здесь у нас снова простая структура HTML: заголовок два параграфа.

Параграфы имеют свои id. Один из них будет большим, а другой маленьким.

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


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Медиа-запросы</title>
<style>
/********** Базовые стили **********/
h1 {
  margin-bottom: 15px;
}
p {
  border: 1px solid black;
  margin-bottom: 15px;
}
#p1 {
  background-color: #A52A2A;
  width: 300px;
  height: 300px;
}
#p2 {
  background-color: #DEB887;
  width: 50px;
  height: 50px;
}

/********** Только большие девайсы **********/

/********** Только средние девайсы **********/

</style>
</head>
<body>
<h1>Медиа-запросы</h1>

<p id="p1"></p>
<p id="p2"></p>

</body>
</html>

Давайте посмотрим на это в браузере.

При изменении ширины браузера ничего не меняется. Если мы делаем его уже, наши параграфы остаются того же размера.

А теперь давайте посмотрим что мы можем сделать с помощью медиа-запросов.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Медиа-запросы</title>
<style>
/********** Базовые стили **********/
h1 {
  margin-bottom: 15px;
}
p {
  border: 1px solid black;
  margin-bottom: 15px;
}
#p1 {
  background-color: #A52A2A;
  width: 300px;
  height: 300px;
}
#p2 {
  background-color: #DEB887;
  width: 50px;
  height: 50px;
}

/********** Только большие девайсы **********/
@media (min-width: 1200px) {
  #p1 {
    width: 80%;
  }
  #p2 {
    width: 150px;
    height: 150px;
  }
}

/********** Только средние девайсы **********/
@media (min-width: 992px) and (max-width: 1199px) {
  #p1 {
    width: 50%;
  }
  #p2 {
    width: 100px;
    height: 100px;
  }
  body {
    background-color: blue;
  }
}
</style>
</head>
<body>
<h1>Медиа-запросы</h1>

<p id="p1"></p>
<p id="p2"></p>

</body>
</html>

Откроем в браузере.

Так как мой браузер шире 1200 px, применяются стили указанные для больших девайсов. Ширина первого параграфа равняется 80% от ширины окна, а второй параграф занимает размер 150×150 пикселей.

Теперь попробуем сделать окно браузера немного уже.

Теперь в диапазоне 992‒1199 px применяются новые стили: синий фон, первый параграф шириной 50%, второй параграф 100×100 пикселей.

И, наконец, попробуем сделать его уже 992 px.

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

Кстати, чтобы узнать точную ширину браузера, вы можете открыть инструменты разработчика (Ctrl + Shift + I). Очень полезная вещь, кстати.

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

Кроме того, там есть иконка с телефоном.

Если вы кликнете на нее, вы можете просмотреть сайт с разными размерами экрана. Можно выбрать какой-то девайс типа Galaxy S5 или iPhone 6, либо выбирать любой размер самостоятельно.

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

Вкратце

Мы поговорили о базовом синтаксисе медиа-запроса:

  • @media (медиа-свойство)
  • @media (медиа-свойство) логический оператор (медиа-свойство)

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

Обычно вы предоставляете базовые стили. Затем вы меняете или добавляете к ним стили для каждого медиа-запроса.

CSS работает, ассоциируя правила с HTML-элементами. Эти правила определяют то как должно отображаться содержимое указанных элементов.

Хотя дизайн целой страницы может быть довольно сложным процессом, создание отдельного CSS-правила является довольно простым.


p {
  color: blue;
}

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

За селектором следуют открывающая и закрывающая фигурная скобка, внутри которых содержится CSS-декларация. Она состоит из двух частей: свойства и значения.

Имена свойств предварительно определяются спецификацией, и каждое свойство может иметь определенные значения.

Каждое свойство со значением разделяется двоеточием и заканчивается точкой с запятой.

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

Конечно, CSS-правило может содержать несколько деклараций:


p {
  color: blue;
  font-size: 20px;
  width: 250px;
}

В этом примере мы говорим, что наши параграфы должны быть определенного цвета, иметь определенный размер шрифта и определенную ширину.

Набор CSS-правил будет называться таблицей стилей.


p {
  color: blue;
  font-size: 20px;
  width: 250px;
}

h1 {
  color: green;
  font-size: 34px;
  text-align: center;
}

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

Но обычно у вас будет гораздо больше одного.

Далее, давайте посмотрим на CSS внутри HTML-документа.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Анатомия CSS-правила</title>
<style>
p {
  color: blue;
  font-size: 20px;
  width: 250px;
}
h1 {
  color: green;
  font-size: 34px;
  text-align: center;
}
</style>
</head>
<body>
<h1>Анатомия CSS-правила</h1>
<h2>Первый подзаголовок</h2>
<p>CSS работает, ассоциируя правила с HTML-элементами. Эти правила определяют то как должно отображаться содержимое указанных элементов.</p>
<h2>Второй подзаголовок</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet semper erat. Donec mi risus, efficitur malesuada purus at, egestas placerat libero. Vestibulum in mattis lorem.</p>
</body>
</html>

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

Мы добавляем наши стили внутри <head>, внутри тега <style>.

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

Давайте взглянем на это в браузере.

Заголовок имеет определенный размер и расположен по центру. Параграфы тоже имеют свой размер и цвет, и занимают отведенные им 250 px.

Если вы обратите внимание на подзаголовки <h2>, вы заметите что они имеют больший размер шрифта и более жирное начертание чем обычный текст. Но этого мы не указывали.

Эти неуказанные стили исходят из самого браузера.

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

Вкратце

В этом посте мы поговорили о синтаксисе CSS-правила:

  • Селектор
  • Декларация
  • Пара свойство/значение

Также мы поговорили о комбинировании CSS-правил в одну таблицу стилей.

В Интернете, контент — это король. Он весь держится на контенте, то есть содержании.

Как мы недавно обсудили, HTML определяет структуру этого контента.

Так что если вы хотите опубликовать необработанный контент, вы можете взять HTML-файлы, залить их на сервер, и всё готово.

Тем не менее, это было бы большой ошибкой.

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

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

В этом разница между домом и простым укрытием от улицы.

И когда дело доходит до сайтов, одной структуры просто недостаточно.

Недостаточно просто оставить CRUD сгенерированный фреймворком бэкенда, вы должны стилизовать контент, чтобы он понравился пользователю.

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

CSS — технология, предоставляющая эту возможность.

CSS является невероятно мощной технологией, она может изменить HTML-структуру до неузнаваемости.

Чтобы увидеть то о чем я говорю, можете посетить сайт CSS Zen Garden, он довольно-таки удивит вас.

CSS Zen Garden

Идея этого сайта проста.

Дизайнеры и веб-разработчики со всего мира могут представить свой проект. Они могут переделать дизайн этого сайта.

Но есть одна уловка. Они не могут менять HTML.

Так что единственное, что они меняют, это CSS.

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

Я покажу несколько скриншотов.

Везде меняется только лишь CSS. Неплохо, да?

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

Вкратце

Суть этого поста в том, что CSS является невероятно мощной технологией. Она не только стилизует контент, но и влияет на опыт взаимодействия пользователя.

Как модно говорить, «юзер-экспириенс» имеет значение.

В прошлом году и в начале этого года я сделал несколько переводов спецификаций от W3C.

Итак,

HTML Canvas 2D Context:

http://topolyan.com/w3c/html_canvas_2d_context_ru.html

Медиа-запросы:

http://topolyan.com/w3c/css3-mediaqueries-ru.html

Атрибуты CSS Style:

http://topolyan.com/w3c/css-style-attributes-ru.html

Selectors API Level 1:

http://topolyan.com/w3c/selectors-api-ru.html

W3C DOM4:

http://topolyan.com/w3c/w3c-dom4-ru.html

Также есть перевод «Библиотечные связанные данные», который я делал совместно с другим человеком:
http://k-topolyan.github.io/library-linked-data/