Адаптивный дизайн: CSS, Sass, Bootstrap, подробнее о Git

Содержание

5 (100%) 6 vote[s]

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

Скачать примеры и исходные коды этой статьи

Адаптивный дизайн

Один из способов адаптации контента к размеру экрана — использовать медиазапрос:
```
  <style>
      @media print {
          .screen-only {
              display: none;
          }
      }
  </style>
  <body>
      <p class="screen-only">This will not appear when printed</p>
  </body>
```
- @media является медиа-запросом, что означает, что следующий CSS будет применяться только в определенных ситуациях, а именно, когда веб-страница печатается. .screen-only - это селектор класса, который определяет, какой контент предназначен для печати:
```
  @media (min-width: 500px) {
  body {
      background-color: red;
  }
  }
  @media (max-width: 499px) {
  body {
      background-color: yellow;
  }
  }
```
- Если ширина экрана body менее 500 пикселей, цвет фона будет красным, а если он меньше 499 пикселей, цвет фона body будет желтым.
- Для взаимодействия с размером экрана необходимо включить в head следующее:<meta name="viewport" content="width=device-width, initial-scale=1.0">
  - viewport является видимой областью, на которой отображается экран. content относится ко всей веб-странице, width для которой устанавливается device-width.
Еще один инструмент, который использует адаптивный дизайн — «flexbox». Flexbox позволяет реорганизовать контент в зависимости от размера области просмотра.
```
  .container {
      display: flex;
      flex-wrap: wrap;
  }
```
- При установке display: flex и flex-wrap: wrap, при необходимости, содержимое будет перенесено вертикально, поэтому оно не будет потеряно при уменьшении ширины экрана.
Сетка контента может быть достигнута аналогичным образом:
```
  .grid {
      display: grid;
      grid-column-gap: 20px;
      grid-row-gap: 10px;
      grid-template-columns: 200px 200px auto;
  }
```
- При настройке display: grid все различные характеристики макета сетки могут использоваться для форматирования содержимого. В частности, при определении grid-template-colummns, последний столбец может быть установлен на auto, заполняя как можно больше места на экране. Если для нескольких столбцов установлено значение auto, они будут в равной степени разделять оставшееся пространство.

Подробнее о CSS

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

Некоторые общие CSS-селекторы:

Выберите h1 и h2:

  h1, h2 {
      color: red;
  }

Выберите все li потомки ol (не обязательно прямые потомки):
```
  ol li {
      color: red;
  }
```
Выберите все li, которые являются непосредственными детьми ol:
```
  ol > li {
      color: red;
  }
```

Выберите все поля input с атрибутом type=text:

  input[type=text] {
      background-color: red;
  }

Выберите все button с псевдоклассом hover:
```
  button:hover {
      background-color: orange;
  }
```
- «Псевдокласс» — это особое состояние элемента HTML. В этом примере указывается, находится ли курсор над кнопкой.
Выбрать все before псевдоэлементы элемента a:
```
  a::before {
      content: "\21d2 Click here: ";
      font-weight: bold;
  }
```
- «Псевдоэлемент» — это способ воздействия на определенные части HTML-элемента. В этом примере к селектору before применяется content с указанным стилем перед содержимым всех a элементов.
- \21d2 является шестнадцатеричным значением для значка Unicode, который может представлять символы, такие как эмодзи.

Выбрать все selection псевдоэлементы элемента p:

  p::selection {
      color: red;
      background-color: yellow;
  }

Bootstrap

Bootstrap — это библиотека CSS, созданная для создания чистых, адаптивных и привлекательных веб-сайтов без необходимости запоминать мельчайшие подробности о флексбоксах или сетках каждый раз, когда необходимо настроить макет.
Единственное , что нужно для того, чтобы использовать Bootstrap, это добавить одну строку , которая связывает сайт с Bootstrap CSS стилями: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">.
CSS от Bootstrap заставит все выглядеть немного чище и современнее, но его реальная сила — в системе макетов. Bootstrap использует модель на основе столбцов, где каждая строка на веб-сайте разделена на 12 отдельных столбцов, и различным элементам может быть выделено разное количество столбцов для заполнения.
В примерах Columns (см. ниже) Bootstrap столбцы и строки ссылаются в HTML с class="row" и class="col-3" атрибуты, где число после col-это число столбцов, которые элемент должен использовать.
- Элементы могут занимать различное количество столбцов в зависимости от размера экрана с такими атрибутами, как class="col-lg-3 col-sm-6. На маленьком экране будут использоваться 6 столбцов, но на большом экране будут использоваться 3 столбца. Если нужно добавить еще одну строку, Bootstrap сделает это автоматически. Это гораздо более простая альтернатива чему-то вроде flexbox (Bootstrap делает это за кулисами).
Bootstrap имеет целый ряд других симпатичных компонентов, которые можно легко применить, просто добавив соответствующий class атрибут к элементу. Смотрите документацию Bootstrap для обширного изучения.

См подключение Bootstrap к отдельной странице WordPress.

Sass

Sass — это совершенно новый язык, построенный поверх CSS, который дает ему намного больше возможностей и гибкости при разработке таблиц стилей CSS и позволяет генерировать таблицы стилей программным способом. В конечном счете, Sass просто облегчает написание CSS и упрощает адаптивный дизайн.
Чтобы использовать Sass, он должен быть сначала установлен . После установки, мы можем выполнить sass style.scss style.css для компиляции файла наших Sass style.scss в sass.css, которые на самом деле могут быть связаны и интерпретирован HTML — файл.
- Если перекомпиляция становится утомительной для разработчика, sass --watch style.scss:style.css автоматически перекомпилировать, style.scss как style.css при style.scss изменении. Кроме того, многие системы развертывания веб-сайтов, такие как GitHub Pages, имеют встроенную поддержку Sass. Например, если .scss файл помещен в GitHub, GitHub Pages скомпилирует его автоматически.
Одной из особенностей является Sass переменные, которые определяются как так: $color: red;. Anywhere $color передается как значение для свойства CSS, например color: $color, redбудет использоваться.
Другая особенность — вложение, которое является более кратким способом стилизовать элементы, которые определенным образом связаны с другими элементами.
```
  div {
      font-size: 18px;
      p {
          color: blue;
      }
      ul {
          color: green;
      }
  }
```
- В этом примере все p внутри div будут иметь color: blue, но также font-size: 18px, в то время как ul внутри div будут иметь color: green, но все же также font-size: 18px.
Еще одна полезная особенность — наследование, которое похоже на объектно-ориентированную концепцию. Наследование Sass позволяет немного изменить общий стиль для различных компонентов.
```
  %message {
      font-family: sans-serif;
      font-size: 18px;
      font-weight: bold;
  }

  .specificMessage {
      @extend %message;
      background-color: green;
  }
```
- %message определяет общий шаблон, который может быть унаследован в других определениях стиля с использованием синтаксиса @extend %message. Кроме того, могут быть добавлены другие свойства стиля.

Подробнее о Git

«Ветвление» (Branching) — это функция Git, которая позволяет проекту перемещаться в нескольких разных направлениях одновременно. Существует одна master ветвь, которую всегда можно использовать, но можно создать любое количество новых веток для разработки новых функций. Когда все готово, эти ветви могут быть объединены обратно в master.
При работе в Git-хранилище HEAD ссылается на текущую ветвь, над которой работает. Когда другая ветвь «извлечена», изменения HEAD указывают новую рабочую ветвь.
При слиянии ветви обратно в master могут возникнуть конфликты слияния.
Некоторые команды Git, связанные с ветвлением:
- git branch : список всех веток, находящихся в данный момент в хранилище;
- git branch <name> : создать новую ветку под названием name;
- git checkout <name> : переключить текущую рабочую ветвь на name;
- git merge <name>: объединить ветку name с текущей рабочей веткой (обычно master).
Любая версия репозитория, которая не хранится локально на устройстве, называется «удаленной». «Origin» используется для обозначения удаленного узла, с которого локальный репозиторий был первоначально загружен.
Некоторые команды Git, связанные с пультами:
- git fetch : загрузить все последние коммиты с удаленного на локальное устройство
- git merge origin/master: слияние с origin/master, которая является удаленной версией репозитория, обычно загружаемой с git fetch, в локальную master ветвь с предварительным доступом;
  - Обратите внимание, что git pull эквивалентно запуску git fetch, а затем git merge origin/master
«Вилка» (fork) репозитория — это совершенно отдельный репозиторий, который является копией исходного репозитория. Разветвленный репозиторий может управляться и изменяться, как и любой другой, и все это не влияет на оригинальную копию.
Проекты с открытым исходным кодом часто разрабатываются с использованием вилок. Будет одна центральная версия программного обеспечения, которую участники будут расширять и улучшать, и когда они хотят, чтобы эти изменения были объединены в центральном репозитории, они отправляют «запрос на извлечение» (pull request).
Запрос на извлечение может быть сделан для объединения ветки репозитория с другой ветвью того же репозитория или даже с другим репозиторием. Запросы на извлечение — это хороший способ получить отзывы об изменениях от соавторов в том же проекте.
Обратите внимание, что форки и пул-запросы являются специфическими функциями GitHub.

Адаптивный дизайн: некоторые примеры

columns (адаптивный дизайн с bootstrap)

Пример 1

See the Pen
columns by Alla (@AllaJan)
on CodePen.

Пример 2

See the Pen
columns1 by Alla (@AllaJan)
on CodePen.

Пример 3

See the Pen
columns2 by Alla (@AllaJan)
on CodePen.

Адаптивный дизайн с flexbox

My Web Page!

A. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.

B. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.

C. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.

D. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.

E. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.

F. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.

G. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.

H. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.

I. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.

J. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.

K. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.

L. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.

Смотреть код:

```
<!DOCTYPE html>
```
```
<html>
```
```
    <head>
```
```
        <title>My Web Page!</title>
```

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

```
        <style>
```
```
            .container {
```
```
                display: flex;
```
```
                flex-wrap: wrap;
```
```
            }
```
```
 
```
```
            .container > div {
```

                background-color: springgreen;

```
                font-size: 20px;
```
```
                margin: 20px;
```
```
                padding: 20px;
```
```
                width: 200px;
```
```
            }
```
```
        </style>
```
```
    </head>
```
```
    <body>
```
```
        <div class="container">
```

            <div>A. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.</div>

            <div>B. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.</div>

            <div>C. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.</div>

            <div>D. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.</div>

            <div>E. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.</div>

            <div>F. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.</div>

            <div>G. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.</div>

            <div>H. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.</div>

            <div>I. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.</div>

            <div>J. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.</div>

            <div>K. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.</div>

            <div>L. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id fermentum elit. Aenean ornare porta sagittis.</div>

```
        </div>
```
```
    </body>
```
```
</html>
```

child (ol > li)

My Web Page!

list item one
list item two

sublist item one
sublist item two

list item three

Смотреть код:

```
<!DOCTYPE html>
```
```
<html>
```
```
    <head>
```
```
        <title>My Web Page!</title>
```
```
        <style>
```
```
            ol > li {
```
```
                color: red;
```
```
            }
```
```
        </style>
```
```
    </head>
```
```
    <body>
```
```
        <ol>
```
```
            <li>list item one</li>
```
```
            <li>list item two</li>
```
```
            <ul>
```

                <li>sublist item one</li>

                <li>sublist item two</li>

```
            </ul>
```
```
            <li>list item three</li>
```
```
        </ol>
```
```
    </body>
```
```
</html>
```

descendant (непрямые потомки ol li)

My Web Page!

list item one
list item two

sublist item one
sublist item two

list item three

Смотреть код:

```
<!DOCTYPE html>
```
```
<html>
```
```
    <head>
```
```
        <title>My Web Page!</title>
```
```
        <style>
```
```
            ol li {
```
```
                color: red;
```
```
            }
```
```
        </style>
```
```
    </head>
```
```
    <body>
```
```
        <ol>
```
```
            <li>list item one</li>
```
```
            <li>list item two</li>
```
```
            <ul>
```

                <li>sublist item one</li>

                <li>sublist item two</li>

```
            </ul>
```
```
            <li>list item three</li>
```
```
        </ol>
```
```
    </body>
```
```
</html>
```

before

See the Pen
before by Alla (@AllaJan)
on CodePen.

grid (сетка)

My Web Page!

Смотреть код:

```
<!DOCTYPE html>
```
```
<html>
```
```
    <head>
```
```
        <title>My Web Page!</title>
```

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

```
        <style>
```
```
            .grid {
```

                background-color: green;

```
                display: grid;
```
```
                padding: 20px;
```
```
                grid-column-gap: 20px;
```
```
                grid-row-gap: 10px;
```

                grid-template-columns: 200px 200px auto;

```
            }
```
```
 
```
```
            .grid-item {
```

                background-color: white;

```
                font-size: 20px;
```
```
                padding: 20px;
```
```
                text-align: center;
```
```
            }
```
```
        </style>
```
```
    </head>
```
```
    <body>
```
```
        <div class="grid">
```

            <div class="grid-item">1</div>

            <div class="grid-item">2</div>

            <div class="grid-item">3</div>

            <div class="grid-item">4</div>

            <div class="grid-item">5</div>

            <div class="grid-item">6</div>

            <div class="grid-item">7</div>

            <div class="grid-item">8</div>

            <div class="grid-item">9</div>

            <div class="grid-item">10</div>

            <div class="grid-item">11</div>

            <div class="grid-item">12</div>

```
        </div>
```
```
    </body>
```
```
</html>
```

Предыдущая статья «Git и GitHub, HTML, CSS: основные понятия, примеры«

Следующая статья «Flask, WSGI, Werkzeug, Jinja2, Django«

Читайте больше по теме:

Средний фон изображения на JavaScript

Полезные JavaScript-хаки для веб-разработки

Как работает нулевой оператор объединения в JavaScript

Цикл событий, обратных вызовов, промисов и Async/Await в JavaScript

Таблица с сортировкой столбцов на js

LiqPay для пожертвований, Fondy для магазина