Skip to content

Instantly share code, notes, and snippets.

@york-xtrem

york-xtrem/Getting started for Template Presskit.md

Last active March 5, 2018 17:02
Show Gist options
  • Save york-xtrem/93f64934afd199d7702ad6b7d1719747 to your computer and use it in GitHub Desktop.
Save york-xtrem/93f64934afd199d7702ad6b7d1719747 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Getting started for Template Presskit.md

HBO Presskit

Guía para maquetar el html de los presskit

Tempplate Presskit

Distintos bloques para una maquetación más dinámica y rápida

Bloque blockCover

blockCover

            <div class="blockCover">
              <div class="blockCover__content">
                <div class="blockCover__background show-for-small-only"
                     style='background-image: url("images/presskits/hboepk_britannia_cover-mobile.jpg")'></div>
                <div class="blockCover__background show-for-medium"
                     style='background-image: url("images/presskits/hboepk_britannia_cover-desktop.jpg")'></div>
                <div class="blockText blockText--main">
                  <div class="blockText__top">
                    <div class="blockText__content">
                      <h1 class="blockText__text blockText__text--mainTitle">BRITANNIA</h1>
                    </div>
                  </div>
                  <div class="blockText__separator blockText__separator--small">
                    <div class="line"></div>
                  </div>
                  <div class="blockText__bottom">
                    <div class="blockText__content">
                      <h2 class="blockText__text blockText__text--mainSubtitle">ENERO 2018</h2>
                    </div>
                  </div>
                </div>
              </div>
            </div>

Configurable para mostrar en móvil show-for-small-only y mostrar en escritorio show-for-medium:

<div class="blockCover__background show-for-small-only"
                     style='background-image: url("images/presskits/hboepk_britannia_cover-mobile.jpg")'></div>
<div class="blockCover__background `"
                     style='background-image: url("images/presskits/hboepk_britannia_cover-desktop.jpg")'></div>

Bloque blockQuote

blockQuote

Configurable con los distintos h3, h4, ...

        <section class="sectionPresskit">
          <div class="sectionPresskit__content">
            <div class="blockQuote">
              <h3 class="headingPresskit blockQuote__title">
                EL EJÉRCITO IMPERIAL ROMANO VUELVE PARA APLASTAR BRITANNIA
              </h3>
            </div>
          </div>
        </section>

Bloque blockImage - Image Cover Ration Responsive

blockImage

        <section class="sectionPresskit">
          <div class="sectionPresskit__content">
            <div class="blockImage">
              <div class="blockImage__content imageRatio default large-widescreen"
                   style="background-image: url(images/presskits/hboepk_britannia_image-I.jpg)">
              </div>
            </div>
          </div>
        </section>

Proporciones disponibles para dentro de un blockImage__content:

  • default: 4 by 3,
  • default-vertical: 3 by 4,
  • widescreen: 16 by 9,
  • widescreen-vertical: 9 by 16,
  • square: 1 by 1,
  • ultrawidescreen: 21 by 9,
  • ultrawidescreen-vertical: 9 by 21

Proporciones responsive

Nomenclatura [Media-query]-[Proporción]

Para que a partir de un media query salte otra proporción

Media querys disponibles:

  • small: 0,
  • medium: 640px,
  • large: 1024px,
  • xlarge: 1200px,
  • xxlarge: 1440px

Ejemplo: De 0 a 1024px sería default y de 1024px en adelante sería widescreen

              <div class="blockImage__content imageRatio default large-widescreen"
                   style="background-image: url(images/presskits/hboepk_britannia_image-I.jpg)">
              </div>

Nomenclatura [Media-query]-down-[Proporción]

En el ejemplo de abajo, de 0 a 640px se comportaría con la proporción default-vertical y de 640px hacía delante no guardaría proporción.

<div class="blockImage__content imageRatio small-down-default-vertical" style="background-image: url(images/presskits/hboepk_britannia_image-B.jpg);"></div>

Esto es usado en la secciones de sipnosis, fichas técnicas y artísticas para que en la versión móvil ocupen espacio. Se entenderá mejor cuando explique el bloque BlockColumn.

Bloque blockGridImage

blockGridImage

<div class="blockGridImage">
  <div class="` small-4">
    <div class="blockGridImage__image">
      <div class="blockImage">
        <div class="blockImage__content"
             style="background-image: url(images/presskits/hboepk_britannia_image-C.jpg);"></div>
      </div>
    </div>
  </div>
  <div class="blockGridImage__column small-8">
    <div class="blockGridImage__image">
      <div class="blockImage">
        <div class="blockImage__content"
             style="background-image: url(images/presskits/hboepk_britannia_image-D.jpg);"></div>
      </div>
    </div>
  </div>
</div>

Configurable a traves de blockGridImage__column con la nomenclatura [Media-query]-[número de columnas a ocupar] es un grid de 12 columnas.

Bloque dataSheet

Aquí hay dos tipos:

Datos en paralelo:

dataSheet

<div class="dataSheet">
  <h5 class="dataSheet__title">ESTRENO</h5>
  <p class="dataSheet__data">ENERO 2018</p>
</div>

Datos apilados:

dataSheet

Añadiendo dataSheet--stack:

<div class="dataSheet dataSheet--stack">
  <p class="dataSheet__data">David Morrissey</p>
  <p class="dataSheet__data">Kelly Reilly</p>
  <p class="dataSheet__data">Nikolaj Lie</p>
  <p class="dataSheet__data">Kaas Liana</p>
  <p class="dataSheet__data">Cornell Gershwyn</p>
  <p class="dataSheet__data">Eustache Jr</p>
  <p class="dataSheet__data">Mackenzie Crook</p>
</div>

Bloque paragraphPresskit

paragraphPresskit

<div class="paragraphPresskit__content">
  <p class="paragraphPresskit">
    Con guión del reconocido Jez Butterworth (Spectre), el elenco de BRITANNIA incluye a Kelly Reilly
    (True Detective) como la temeraria princesa celta Kerra, David Morrissey (The Walking Dead), como el
    general Aulus, cabeza del ejército romano invasor, Nikolaj Lie Kaas (The Killing) en el papel del
    astuto druida Divis, y Zoë Wanamaker (Harry Potter y la Piedra Filosofal) como la reina celta
    Antedia.
  </p>
  <p class="paragraphPresskit">
    Cuando los romanos invaden Bretaña en el 43 a.C., Kerra (Reilly), la hija del rey de los Cantii, se
    ve forzada a dejar a un lado sus diferencias con su archi enemiga, la reina Antedia (Wanamaker) para
    combatir juntas a los invasores. Los romanos, liderados por el General Aulus Plautius (Morrisey),
    llegan con la determinación de triunfar donde Julio César fracasó, y conquistar esta tierra mítica
    en los límites del Imperio Romano. Aulus es un líder fuerte, pero esconde un oscuro secreto que
    amenaza su misión. Mientras las tribus y los druidas se unen para combatir a los romanos, Kerra se
    enfrenta al mayor reto de su vida como líder de la resistencia.
  </p>
</div>

Bloque blockColumn

Este es el bloque más dinámico dentro de sus blockColumn__column se pueden insertar los demás bloques anteriores además al igual que el blockGridImage__column sigue la nomenclatura [Media-query]-[número de columnas a ocupar].
Como se ve en el ejemplo small-12 medium-7 de 0 a 640px ocupará 12 columnas y de 640px en adelante 7 columnas. Se podría añadir más clases por ejemplo xxlarge y partir de 1440px cambiaría el número de columnas.

Dentro de cada blockColumn__column puede ir uno o tantos como se quiera de blockColumn__item:

<div class="blockColumn__item">
  <h4 class="headingPresskit">
    FICHA
  </h4>
</div>

blockColumn

Modo normal

<div class="blockColumn">
  <div class="blockColumn__column small-12 medium-7">
    <div class="blockImage">
      <div class="blockImage__content imageRatio small-down-default"
           style="background-image: url(images/presskits/hboepk_britannia_image-A.jpg);"></div>
    </div>
  </div>
  <div class="blockColumn__column small-12 medium-5">
    <div class="blockColumn__item">
      <h4 class="headingPresskit">
        FICHA
      </h4>
    </div>
    <div class="blockColumn__item">
      <div class="dataSheet">
        <h5 class="dataSheet__title">ESTRENO</h5>
        <p class="dataSheet__data">ENERO 2018</p>
      </div>
    </div>
    <div class="blockColumn__item">
      <div class="dataSheet">
        <h5 class="dataSheet__title">EPISODIOS</h5>
        <p class="dataSheet__data">12</p>
      </div>
    </div>
    <div class="blockColumn__item">
      <div class="dataSheet">
        <h5 class="dataSheet__title">GÉNERO</h5>
        <p class="dataSheet__data">DRAMA / FANTASÍA</p>
      </div>
    </div>
    <div class="blockColumn__item">
      <div class="dataSheet">
        <h5 class="dataSheet__title">CALIFICACIÓN</h5>
        <p class="dataSheet__data">+18</p>
      </div>
    </div>
    <div class="blockColumn__item">
      <div class="blockGridImage">
        <div class="blockGridImage__column small-4">
          <div class="blockGridImage__image">
            <div class="blockImage">
              <div class="blockImage__content"
                   style="background-image: url(images/presskits/hboepk_britannia_image-C.jpg);"></div>
            </div>
          </div>
        </div>
        <div class="blockGridImage__column small-8">
          <div class="blockGridImage__image">
            <div class="blockImage">
              <div class="blockImage__content"
                   style="background-image: url(images/presskits/hboepk_britannia_image-D.jpg);"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Modo invertido

Hay casos que la imagen podría ir a la derecha y cuando se pone apilado en small-12 y quieres que aparezca la image arriba aunque al principio este a la derecha. Tan solo hay que usar la estructura anterior y añadir blockColumn--invert a blockColumn:

blockColumn

<div class="blockColumn blockColumn--invert">
  <div class="blockColumn__column small-12 medium-6">
    <div class="blockImage">
      <div class="blockImage__content imageRatio small-down-widescreen"
           style="background-image: url(images/presskits/hboepk_britannia_image-F.jpg);"></div>
    </div>
  </div>
  <div class="blockColumn__column small-12 medium-6">
    <div class="blockColumn__item">
      <h4 class="headingPresskit">
        CREADOR
      </h4>
    </div>
    <div class="blockColumn__item">
      <div class="dataSheet dataSheet--stack">
        <p class="dataSheet__data">Jez Butterworth</p>
        <p class="dataSheet__data">Tom Butterworth</p>
        <p class="dataSheet__data">James Richardson</p>
      </div>
    </div>
  </div>
</div>

Plantilla HTML Completa

Esto es un ejemplo de presskit jugando con los distintos bloques

        <!--===========================================================================-->
        <!---------------------------------- SECTION COVER ------------------------------>
        <!--===========================================================================-->

        <section class="sectionPresskit sectionPresskit--cover">
          <div class="sectionPresskit__content">
            <div class="blockCover">
              <div class="blockCover__content">
                <div class="blockCover__background show-for-small-only"
                     style='background-image: url("images/presskits/hboepk_britannia_cover-mobile.jpg")'></div>
                <div class="blockCover__background show-for-medium"
                     style='background-image: url("images/presskits/hboepk_britannia_cover-desktop.jpg")'></div>
                <div class="blockText blockText--main">
                  <div class="blockText__top">
                    <div class="blockText__content">
                      <h1 class="blockText__text blockText__text--mainTitle">BRITANNIA</h1>
                    </div>
                  </div>
                  <div class="blockText__separator blockText__separator--small">
                    <div class="line"></div>
                  </div>
                  <div class="blockText__bottom">
                    <div class="blockText__content">
                      <h2 class="blockText__text blockText__text--mainSubtitle">ENERO 2018</h2>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!--===========================================================================-->
        <!---------------------------------- SECTION BLOCKQUOTE ------------------------->
        <!--===========================================================================-->

        <section class="sectionPresskit">
          <div class="sectionPresskit__content">
            <div class="blockQuote">
              <h3 class="headingPresskit blockQuote__title">
                EL EJÉRCITO IMPERIAL ROMANO VUELVE PARA APLASTAR BRITANNIA
              </h3>
            </div>
          </div>
        </section>

        <!--===========================================================================-->
        <!---------------------------------- SECTION SYNOPSIS --------------------------->
        <!--===========================================================================-->

        <section class="sectionPresskit">
          <div class="sectionPresskit__content">
            <div class="blockColumn">
              <div class="blockColumn__column small-12 medium-7">
                <div class="blockImage">
                  <div class="blockImage__content imageRatio small-down-default-vertical"
                       style="background-image: url(images/presskits/hboepk_britannia_image-B.jpg);"></div>
                </div>
              </div>
              <div class="blockColumn__column small-12 medium-5">
                <div class="paragraphPresskit__content">
                  <p class="paragraphPresskit">
                    Con guión del reconocido Jez Butterworth (Spectre), el elenco de BRITANNIA incluye a Kelly Reilly
                    (True Detective) como la temeraria princesa celta Kerra, David Morrissey (The Walking Dead), como el
                    general Aulus, cabeza del ejército romano invasor, Nikolaj Lie Kaas (The Killing) en el papel del
                    astuto druida Divis, y Zoë Wanamaker (Harry Potter y la Piedra Filosofal) como la reina celta
                    Antedia.
                  </p>
                  <p class="paragraphPresskit">
                    Cuando los romanos invaden Bretaña en el 43 a.C., Kerra (Reilly), la hija del rey de los Cantii, se
                    ve forzada a dejar a un lado sus diferencias con su archi enemiga, la reina Antedia (Wanamaker) para
                    combatir juntas a los invasores. Los romanos, liderados por el General Aulus Plautius (Morrisey),
                    llegan con la determinación de triunfar donde Julio César fracasó, y conquistar esta tierra mítica
                    en los límites del Imperio Romano. Aulus es un líder fuerte, pero esconde un oscuro secreto que
                    amenaza su misión. Mientras las tribus y los druidas se unen para combatir a los romanos, Kerra se
                    enfrenta al mayor reto de su vida como líder de la resistencia.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!--===========================================================================-->
        <!---------------------------------- SECTION VIDEO ------------------------------>
        <!--===========================================================================-->

        <section class="sectionPresskit">
          <div class="sectionPresskit__content">
            <div class="blockVideo">
              <div class="blockVideo__content youtube" data-embed="oxeidL9j9N4">
                <div class="play-button"></div>
              </div>
            </div>
          </div>
        </section>

        <!--===========================================================================-->
        <!---------------------------------- SECTION BLOCKQUOTE ------------------------->
        <!--===========================================================================-->

        <section class="sectionPresskit">
          <div class="sectionPresskit__content">
            <div class="blockQuote">
              <h3 class="headingPresskit blockQuote__title">
                TRIBUS Y DRUIDAS UNIDOS CONTRA EL INVASOR
              </h3>
            </div>
          </div>
        </section>

        <!--===========================================================================-->
        <!---------------------------------- SECTION TECHNICAL DATA SHEET --------------->
        <!--===========================================================================-->

        <section class="sectionPresskit">
          <div class="sectionPresskit__content">
            <div class="blockColumn">
              <div class="blockColumn__column small-12 medium-7">
                <div class="blockImage">
                  <div class="blockImage__content imageRatio small-down-default"
                       style="background-image: url(images/presskits/hboepk_britannia_image-A.jpg);"></div>
                </div>
              </div>
              <div class="blockColumn__column small-12 medium-5">
                <div class="blockColumn__item">
                  <h4 class="headingPresskit">
                    FICHA
                  </h4>
                </div>
                <div class="blockColumn__item">
                  <div class="dataSheet">
                    <h5 class="dataSheet__title">ESTRENO</h5>
                    <p class="dataSheet__data">ENERO 2018</p>
                  </div>
                </div>
                <div class="blockColumn__item">
                  <div class="dataSheet">
                    <h5 class="dataSheet__title">EPISODIOS</h5>
                    <p class="dataSheet__data">12</p>
                  </div>
                </div>
                <div class="blockColumn__item">
                  <div class="dataSheet">
                    <h5 class="dataSheet__title">GÉNERO</h5>
                    <p class="dataSheet__data">DRAMA / FANTASÍA</p>
                  </div>
                </div>
                <div class="blockColumn__item">
                  <div class="dataSheet">
                    <h5 class="dataSheet__title">CALIFICACIÓN</h5>
                    <p class="dataSheet__data">+18</p>
                  </div>
                </div>
                <div class="blockColumn__item">
                  <div class="blockGridImage">
                    <div class="blockGridImage__column small-4">
                      <div class="blockGridImage__image">
                        <div class="blockImage">
                          <div class="blockImage__content"
                               style="background-image: url(images/presskits/hboepk_britannia_image-C.jpg);"></div>
                        </div>
                      </div>
                    </div>
                    <div class="blockGridImage__column small-8">
                      <div class="blockGridImage__image">
                        <div class="blockImage">
                          <div class="blockImage__content"
                               style="background-image: url(images/presskits/hboepk_britannia_image-D.jpg);"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!--===========================================================================-->
        <!---------------------------------- SECTION TECHNICAL DATA SHEET => INVERT ----->
        <!--===========================================================================-->

        <section class="sectionPresskit">
          <div class="sectionPresskit__content">
            <div class="blockColumn">
              <div class="blockColumn__column small-12 medium-5">
                <div class="blockColumn__item">
                  <h4 class="headingPresskit">
                    FICHA
                  </h4>
                </div>
                <div class="blockColumn__item">
                  <div class="dataSheet">
                    <h5 class="dataSheet__title">ESTRENO</h5>
                    <p class="dataSheet__data">ENERO 2018</p>
                  </div>
                </div>
                <div class="blockColumn__item">
                  <div class="dataSheet">
                    <h5 class="dataSheet__title">EPISODIOS</h5>
                    <p class="dataSheet__data">12</p>
                  </div>
                </div>
                <div class="blockColumn__item">
                  <div class="dataSheet">
                    <h5 class="dataSheet__title">GÉNERO</h5>
                    <p class="dataSheet__data">DRAMA / FANTASÍA</p>
                  </div>
                </div>
                <div class="blockColumn__item">
                  <div class="dataSheet">
                    <h5 class="dataSheet__title">CALIFICACIÓN</h5>
                    <p class="dataSheet__data">+18</p>
                  </div>
                </div>
                <div class="blockColumn__item">
                  <div class="blockGridImage">
                    <div class="blockGridImage__column small-4">
                      <div class="blockGridImage__image">
                        <div class="blockImage">
                          <div class="blockImage__content"
                               style="background-image: url(images/presskits/hboepk_britannia_image-C.jpg);"></div>
                        </div>
                      </div>
                    </div>
                    <div class="blockGridImage__column small-8">
                      <div class="blockGridImage__image">
                        <div class="blockImage">
                          <div class="blockImage__content"
                               style="background-image: url(images/presskits/hboepk_britannia_image-D.jpg);"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="blockColumn__column small-12 medium-7">
                <div class="blockImage">
                  <div class="blockImage__content imageRatio small-down-default"
                       style="background-image: url(images/presskits/hboepk_britannia_image-A.jpg);"></div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!--===========================================================================-->
        <!---------------------------------- SECTION IMAGE COVER RATIO ------------------>
        <!--===========================================================================-->

        <section class="sectionPresskit">
          <div class="sectionPresskit__content">
            <div class="blockImage">
              <div class="blockImage__content imageRatio ultrawidescreen"
                   style="background-image: url(images/presskits/hboepk_britannia_image-E.jpg);"></div>
            </div>
          </div>
        </section>

        <!--===========================================================================-->
        <!---------------------------------- SECTION ARTISTIC DATA SHEET ---------------->
        <!--===========================================================================-->

        <section class="sectionPresskit">
          <div class="sectionPresskit__content">
            <div class="blockColumn">
              <div class="blockColumn__column small-12 medium-4">
                <div class="blockColumn__item">
                  <h4 class="headingPresskit">
                    REPARTO
                  </h4>
                </div>
                <div class="blockColumn__item">
                  <div class="dataSheet dataSheet--stack">
                    <p class="dataSheet__data">David Morrissey</p>
                    <p class="dataSheet__data">Kelly Reilly</p>
                    <p class="dataSheet__data">Nikolaj Lie</p>
                    <p class="dataSheet__data">Kaas Liana</p>
                    <p class="dataSheet__data">Cornell Gershwyn</p>
                    <p class="dataSheet__data">Eustache Jr</p>
                    <p class="dataSheet__data">Mackenzie Crook</p>
                  </div>
                </div>
              </div>
              <div class="blockColumn__column small-12 medium-8">
                <div class="blockImage">
                  <div class="blockImage__content imageRatio small-down-widescreen"
                       style="background-image: url(images/presskits/hboepk_britannia_image-F.jpg);"></div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!--===========================================================================-->
        <!---------------------------------- SECTION ARTISTIC DATA SHEET => INVERT ------>
        <!--===========================================================================-->

        <section class="sectionPresskit">
          <div class="sectionPresskit__content">
            <div class="blockColumn blockColumn--invert">
              <div class="blockColumn__column small-12 medium-6">
                <div class="blockImage">
                  <div class="blockImage__content imageRatio small-down-widescreen"
                       style="background-image: url(images/presskits/hboepk_britannia_image-F.jpg);"></div>
                </div>
              </div>
              <div class="blockColumn__column small-12 medium-6">
                <div class="blockColumn__item">
                  <h4 class="headingPresskit">
                    CREADOR
                  </h4>
                </div>
                <div class="blockColumn__item">
                  <div class="dataSheet dataSheet--stack">
                    <p class="dataSheet__data">Jez Butterworth</p>
                    <p class="dataSheet__data">Tom Butterworth</p>
                    <p class="dataSheet__data">James Richardson</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!--===========================================================================-->
        <!---------------------------------- SECTION IMAGE TAG -------------------------->
        <!--===========================================================================-->

        <section class="sectionPresskit">
          <div class="sectionPresskit__content">
            <div class="blockImage">
              <div class="blockImage__content">
                <img src="images/presskits/hboepk_britannia_image-I.jpg" alt="">
              </div>
            </div>
          </div>
        </section>

        <!--===========================================================================-->
        <!---------------------------------- SECTION IMAGE COVER RATIO RESPONSIVE ------->
        <!--===========================================================================-->

        <section class="sectionPresskit">
          <div class="sectionPresskit__content">
            <div class="blockImage">
              <div class="blockImage__content imageRatio default large-widescreen"
                   style="background-image: url(images/presskits/hboepk_britannia_image-I.jpg)">
              </div>
            </div>
          </div>
        </section>

        <!--===========================================================================-->
        <!---------------------------------- SECTION HOME ------------------------------->
        <!--===========================================================================-->

        <section class="sectionPresskit">
          <div class="sectionPresskit__content">
            <div class="buttonPresskit">
              <a href="index.html">HOME</a>
            </div>
          </div>
        </section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment