templates/templates/docs/layout.html.twig line 1

Open in your IDE?
  1. {% extends "layouts/master.html.twig" %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  6.     {{ encore_entry_link_tags('css/styleguide') }}
  7. {% endblock %}
  9. {% block bodyClass %}tpl-generic-page{% endblock %}
  11. {% block pageHeader %}
  12.     {% include 'molecules/page-header.html.twig' with {
  13.         breadcrumb: [
  14.             { path: path('index'), title: 'Libro de estilo web da USC' }
  15.         ],
  16.         title: 'Layout e retícula'
  17.     } %}
  18. {% endblock %}
  20. {% block pageContent %}
  21.     <article class="generic-page-wrapper">
  22.         <div class="generic-page-intro">
  23.             <div class="at-lead-text">
  24.                 <p>Contedores e sistema de retícula.</p>
  25.             </div>
  26.         </div>
  27.         <div class="generic-page-content">
  28.             <div class="org-content-block">
  29.                 <div class="content-block-content-wrapper">
  30.                     <h2>Como funciona</h2>
  31.                     <p>O sistema de retícula usa unha serie de contedores, filas e columnas para dispoñer e aliñar o contido de forma responsiva.</p>
  32.                     <p>A retícula componse de 12 columnas que se poden usar mediante clases específicas para facilitar a composición da calquera layout non contemplado nos modelos.</p>
  34.                     {%
  35.                         set code = '<div class="container">
  36.     <div class="row">
  37.         <div class="col-sm">
  38.             Columna 1 de 3
  39.         </div>
  40.         <div class="col-sm">
  41.             Columna 2 de 3
  42.         </div>
  43.         <div class="col-sm">
  44.             Columna 3 de 3
  45.         </div>
  46.     </div>
  47. </div>'
  48.                     %}
  50.                     <div class="org-example">
  51.                         <div class="example-display">
  52.                             {{ code|raw }}
  53.                         </div>
  55.                         <pre class="example-code"><code>{{ code }}</code></pre>
  56.                     </div>
  58.                     <h2>Bootstrap</h2>
  60.                     <p>Está basado no de Bootstrap 4.3 e funciona do mesmo xeito. Para máis información consultar a <a href="https://getbootstrap.com/docs/4.3/layout/grid/" target="_blank">documentación de Bootstrap</a>.</p>
  61.                 </div>
  62.             </div>
  63.         </div>
  64.     </article>
  65. {% endblock %}