dimayakovlev.ru


Tachyons и контейнер в полную ширину страницы внутри родителя с фиксированной шириной

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

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

Пример использования Tachyons и создание контейнера в полную ширину страницы внутри родителя с фиксированной шириной

Пример HTML разметки приведённого примера страницы с использованием Tachyons и декларированием класса .full-width.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Tachyons Template</title>
    <meta name="author" content="Dmitry Yakovlev">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.7.0/css/tachyons.min.css"/>
    <style>
      .full-width {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
      }
    </style>
  </head>
  <body class="sans-serif bg-white near-black overflow-x-hidden">

    <article class="center ph3" style="max-width: 30em;">
      <header class="pt4 bb">
        <h1 class="tc ttu normal mt0">Full Width Block</h1>
        <h2 class="tc gray ttl normal tracked mt0">Made With Tachyons</h2>
      </header>
      <p>Consequat sint ullamco voluptate ipsum. Cillum id nulla Lorem sunt pariatur aliqua dolore dolore. Aliqua do aute commodo esse veniam laborum culpa duis. Anim nisi aute in commodo veniam. Ad ipsum Lorem minim est laborum laboris nulla.</p>   
      <div class="full-width">
        <img class="w-100 h-auto" src="img/photo.jpg">
      </div>
      <p>Consequat sint ullamco voluptate ipsum. Cillum id nulla Lorem sunt pariatur aliqua dolore dolore. Aliqua do aute commodo esse veniam laborum culpa duis. Anim nisi aute in commodo veniam. Ad ipsum Lorem minim est laborum laboris nulla.</p>
      <p>Consequat sint ullamco voluptate ipsum. Cillum id nulla Lorem sunt pariatur aliqua dolore dolore. Aliqua do aute commodo esse veniam laborum culpa duis. Anim nisi aute in commodo veniam. Ad ipsum Lorem minim est laborum laboris nulla.</p>
    </article>

  </body>
</html>

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

/* Full Width Containers in Limited Width Parents */
/* https://css-tricks.com/full-width-containers-limited-width-parents/ */
.full-width {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (--breakpoint-not-small){
  .full-width-ns {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

@media (--breakpoint-medium){
  .full-width-m {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

@media (--breakpoint-large){
  .full-width-l {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}