templates/templates/docs/overview.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: 'Introdución'
  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>O sistema de deseño da USC segue os principios do <a href="http://atomicdesign.bradfrost.com/table-of-contents/">Atomic Design</a>. Con este sistema obtemos un framework modular e reutilizable basado en compoñentes.</p>
  26.                 <br />
  28.                 <ul>
  29.                     <li><a href="#architecture">Arquitectura</a></li>
  30.                     <li><a href="#javascript">Javascript</a></li>
  31.                     <li><a href="#installation">Instalación</a></li>
  32.                     <li><a href="#requirements">Requerimentos e recomendacións no código</a></li>
  33.                     <li><a href="#drupal">Drupal</a></li>
  34.                     <li><a href="#cas">CAS</a></li>
  35.                     <li><a href="#versions">Todas as versións</a></li>
  36.                 </ul>
  37.             </div>
  38.         </div>
  39.         <div class="generic-page-content">
  40.             <div class="org-content-block" id="architecture">
  41.                 <div class="content-block-content-wrapper">
  42.                     <h2>Arquitectura</h2>
  43.                     <p>Cada compoñente da web, segundo a súa tipoloxía e envergadura, clasifícase como átomo, molécula, organismo ou plantilla. Para a súa identificación, empregamos un sistema de clases CSS compostas dun prefixo seguido do nome do compoñente:</p>
  44.                     <ul>
  45.                         <li>Átomos: <code>at-[o-seu-nome]</code></li>
  46.                         <li>Moléculas: <code>ml-[o-seu-nome]</code></li>
  47.                         <li>Organismos: <code>org-[o-seu-nome]</code></li>
  48.                         <li>Plantillas: <code>tpl-[o-seu-nome]</code></li>
  49.                     </ul>
  50.                     <p>Neste framework non se asignan estilos ao que Brad Frost denomina <a href="http://atomicdesign.bradfrost.com/chapter-2/#pages">páxinas</a> no seu sistema, pois é unha clasificación que queda reservada para estilos que, de ser necesarios, se apliquen na implementación final onde se use este sistema de deseño.</p>
  51.                 </div>
  52.             </div>
  53.             <div class="org-content-block" id="javascript">
  54.                 <div class="content-block-content-wrapper">
  55.                     <h2>Javascript</h2>
  56.                     <p>O Javascript está desenvolto basado no framework <a href="https://vuejs.org/">Vue.js</a> e modularizado en <a href="https://vuejs.org/v2/guide/components.html">compoñentes</a> reutilizables.</p>
  57.                 </div>
  58.             </div>
  59.             <div class="org-content-block" id="installation">
  60.                 <div class="content-block-content-wrapper">
  61.                     <h2>Instalación</h2>
  62.                     <p>Para usar este framework, débense incluír no proxecto todos os arquivos da <a href="#versions">última versión</a>, e vinclular os arquivos CSS e fontes de Google Fonts no <code>head</code> e os JS ao peche do <code>body</code>:</p>
  64.                     {%
  65.                         set code = '<head>
  66.     <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif:400,400i,500,700&amp;display=swap" rel="stylesheet">
  67.     <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700&display=swap" rel="stylesheet">
  68.     <link rel="stylesheet" href="/path-to-release/fonts/iconusc.css">
  69.     <link rel="stylesheet" href="/path-to-release/css/app.css">
  70. </head>
  72. <body>
  73.     <div id="app">
  74.         <!-- Código da páxina -->
  75.     </div>
  77.     <script src="/path-to-release/runtime.js"></script>
  78.     <script src="/path-to-release/0.js"></script>
  79.     <script src="/path-to-release/1.js"></script>
  80.     <script src="/path-to-release/js/app.js"></script>
  81. </body>'
  82.                     %}
  84.                     <div class="org-example">
  85.                         <pre class="example-code"><code>{{ code }}</code></pre>
  86.                     </div>
  87.                 </div>
  88.             </div>
  90.             <div class="org-content-block" id="requirements">
  91.                 <div class="content-block-content-wrapper">
  92.                     <h2>Requerimentos e recomendacións no código</h2>
  93.                     <p>Usa o doctype de HTML5:</p>
  95.                     {%
  96.                         set code = '<!DOCTYPE html>'
  97.                     %}
  99.                     <div class="org-example">
  100.                         <pre class="example-code"><code>{{ code }}</code></pre>
  101.                     </div>
  103.                     <p>Engade o meta tag de viewport responsive:</p>
  105.                     {%
  106.                         set code = '<meta name="viewport" content="width=device-width, initial-scale=1">'
  107.                     %}
  109.                     <div class="org-example">
  110.                         <pre class="example-code"><code>{{ code }}</code></pre>
  111.                     </div>
  113.                     <p>Engade un contedor con id <code>#app</code> como punto de arranque da aplicación Javascript que conteña o resto do código <code>body</code>:</p>
  115.                     {%
  116.                         set code = '<body>
  117.     <a href="#main-content" class="is-sr-only">Ir ao contido da páxina</a>
  119.     <div id="app">
  120.         <div class="site-header-wrapper">
  121.             <!-- Cabeceira da páxina -->
  122.         </div>
  124.         <main id="main-content" class="container">
  125.             <!-- Contido da páxina -->
  126.         </main>
  127.     </div>
  128. </body>'
  129.                     %}
  131.                     <div class="org-example">
  132.                         <pre class="example-code"><code>{{ code }}</code></pre>
  133.                     </div>
  135.                     <p>É recomendable engadir unha ligazón ao principio do documento cunha áncora que leve ao contido da páxina, para mellorar a accesibilidade facilitando a navegación mediante lectores de pantalla.</p>
  137.                     <p>Para calquera outra dúbida estrutural do código pódense consultar as plantillas e/ou páxinas de exemplo.</p>
  138.                 </div>
  139.             </div>
  141.             <div class="org-content-block" id="drupal">
  142.                 <div class="content-block-content-wrapper">
  143.                     <h2>Drupal</h2>
  145.                     <p>Para a aplicación do sistema de deseño en Drupal é necesario incluír un arquivo CSS extra para os seus estilos específicos:</p>
  147.                     {%
  148.                         set code = '<head>
  149.     ...
  150.     <link rel="stylesheet" href="/path-to-release/css/drupal.css">
  151. </head>'
  152.                     %}
  154.                     <div class="org-example">
  155.                         <pre class="example-code"><code>{{ code }}</code></pre>
  156.                     </div>
  157.                 </div>
  158.             </div>
  160.             <div class="org-content-block" id="cas">
  161.                 <div class="content-block-content-wrapper">
  162.                     <h2>CAS</h2>
  164.                     <p>Para a aplicación do sistema de deseño no CAS existe unha versión reducida dos assets:</p>
  166.                     {%
  167.                         set code = '<!DOCTYPE html>
  168. <html lang="gl">
  169. <head>
  170.     <meta charset="UTF-8">
  171.     <meta name="viewport" content="width=device-width, initial-scale=1">
  173.     <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif:400,400i,700&display=swap" rel="stylesheet">
  174.     <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700&display=swap" rel="stylesheet">
  175.     <link rel="stylesheet" href="/path-to-release/fonts/iconusc.css">
  176.     <link rel="stylesheet" href="/path-to-release/css/sites/cas.css">
  178.     ...
  179. </head>
  180. <body class="">
  181.     <a href="#main-content" class="is-sr-only">Ir ao contido da páxina</a>
  183.     <div id="app">
  184.         ...
  186.         <main id="main-content" class="container">
  187.             ...
  188.         </main>
  190.         ...
  192.         <script src="/path-to-release/runtime.js"></script>
  193.         <script src="/path-to-release/0.js"></script>
  194.         <script src="/path-to-release/js/sites/cas/app.js"></script>
  195.     </div>
  196. </body>
  197. </html>'
  198.                     %}
  200.                     <div class="org-example">
  201.                         <pre class="example-code"><code>{{ code }}</code></pre>
  202.                     </div>
  203.                 </div>
  204.             </div>
  206.             <div class="org-content-block" id="versions">
  207.                 <div class="content-block-content-wrapper">
  208.                     <h2>Todas as versións</h2>
  210.                     <ul>
  211.                         <li><a href="{{ asset('releases/v1.1.1/v1.1.1.zip') }}">1.1.1</a> - 31/03/2022</li>
  212.                         <li><a href="{{ asset('releases/v1.1.0/v1.1.0.zip') }}">1.1.0</a> - 07/02/2022</li>
  213.                         <li><a href="{{ asset('releases/v1.0.18/v1.0.18.zip') }}">1.0.18</a> - 03/12/2021</li>
  214.                         <li><a href="{{ asset('releases/v1.0.17/v1.0.17.zip') }}">1.0.17</a> - 08/10/2021</li>
  215.                         <li><a href="{{ asset('releases/v1.0.16/v1.0.16.zip') }}">1.0.16</a> - 23/03/2021</li>
  216.                         <li><a href="{{ asset('releases/v1.0.15/v1.0.15.zip') }}">1.0.15</a> - 22/03/2021</li>
  217.                         <li><a href="{{ asset('releases/v1.0.14/v1.0.14.zip') }}">1.0.14</a> - 28/01/2021</li>
  218.                         <li><a href="{{ asset('releases/v1.0.13/v1.0.13.zip') }}">1.0.13</a> - 12/01/2021</li>
  219.                         <li><a href="{{ asset('releases/v1.0.12/v1.0.12.zip') }}">1.0.12</a> - 09/12/2020</li>
  220.                         <li><a href="{{ asset('releases/v1.0.11/v1.0.11.zip') }}">1.0.11</a> - 02/12/2020</li>
  221.                         <li><a href="{{ asset('releases/v1.0.10/v1.0.10.zip') }}">1.0.10</a> - 29/06/2020</li>
  222.                         <li><a href="{{ asset('releases/v1.0.9/v1.0.9.zip') }}">1.0.9</a> - 16/04/2020</li>
  223.                         <li><a href="{{ asset('releases/v1.0.8/v1.0.8.zip') }}">1.0.8</a> - 08/04/2020</li>
  224.                         <li><a href="{{ asset('releases/v1.0.7/v1.0.7.zip') }}">1.0.7</a> - 17/03/2020</li>
  225.                         <li><a href="{{ asset('releases/v1.0.6/v1.0.6.zip') }}">1.0.6</a> - 04/03/2020</li>
  226.                         <li><a href="{{ asset('releases/v1.0.5/v1.0.5.zip') }}">1.0.5</a> - 06/02/2020</li>
  227.                         <li><a href="{{ asset('releases/v1.0.4/v1.0.4.zip') }}">1.0.4</a> - 30/01/2020</li>
  228.                         <li><a href="{{ asset('releases/v1.0.3/v1.0.3.zip') }}">1.0.3</a> - 24/01/2020</li>
  229.                         <li><a href="{{ asset('releases/v1.0.2/v1.0.2.zip') }}">1.0.2</a> - 13/12/2019</li>
  230.                         <li><a href="{{ asset('releases/v1.0.1/v1.0.1.zip') }}">1.0.1</a> - 12/12/2019</li>
  231.                         <li><a href="{{ asset('releases/v1.0.0/v1.0.0.zip') }}">1.0.0</a> - 09/12/2019</li>
  232.                         <li><a href="{{ asset('releases/v0.3.12/v0.3.12.zip') }}">0.3.12</a> - 04/12/2019</li>
  233.                         <li><a href="{{ asset('releases/v0.3.11/v0.3.11.zip') }}">0.3.11</a> - 27/11/2019</li>
  234.                         <li><a href="{{ asset('releases/v0.3.10/v0.3.10.zip') }}">0.3.10</a> - 20/11/2019</li>
  235.                         <li><a href="{{ asset('releases/v0.3.9/v0.3.9.zip') }}">0.3.9</a> - 06/11/2019</li>
  236.                         <li><a href="{{ asset('releases/v0.3.8/v0.3.8.zip') }}">0.3.8</a> - 30/10/2019</li>
  237.                         <li><a href="{{ asset('releases/v0.3.7/v0.3.7.zip') }}">0.3.7</a> - 12/12/2019</li>
  238.                         <li><a href="{{ asset('releases/v0.3.6/v0.3.6.zip') }}">0.3.6</a> - 28/10/2019</li>
  239.                         <li><a href="{{ asset('releases/v0.3.5/v0.3.5.zip') }}">0.3.5</a> - 28/10/2019</li>
  240.                         <li><a href="{{ asset('releases/v0.3.4/v0.3.4.zip') }}">0.3.4</a> - 22/10/2019</li>
  241.                         <li><a href="{{ asset('releases/v0.3.3/v0.3.3.zip') }}">0.3.3</a> - 22/10/2019</li>
  242.                         <li><a href="{{ asset('releases/v0.3.2/v0.3.2.zip') }}">0.3.2</a> - 21/10/2019</li>
  243.                         <li><a href="{{ asset('releases/v0.3.1/v0.3.1.zip') }}">0.3.1</a> - 21/10/2019</li>
  244.                         <li><a href="{{ asset('releases/v0.3.0/v0.3.0.zip') }}">0.3.0</a> - 09/10/2019</li>
  245.                         <li><a href="{{ asset('releases/v0.2.6/v0.2.6.zip') }}">0.2.6</a> - 27/09/2019</li>
  246.                         <li><a href="{{ asset('releases/v0.2.5/v0.2.5.zip') }}">0.2.5</a> - 13/09/2019</li>
  247.                         <li><a href="{{ asset('releases/v0.2.4/v0.2.4.zip') }}">0.2.4</a> - 13/09/2019</li>
  248.                         <li><a href="{{ asset('releases/v0.2.3/v0.2.3.zip') }}">0.2.3</a> - 05/09/2019</li>
  249.                         <li><a href="{{ asset('releases/v0.2.2/v0.2.2.zip') }}">0.2.2</a> - 04/09/2019</li>
  250.                         <li><a href="{{ asset('releases/v0.2.1/v0.2.1.zip') }}">0.2.1</a> - 03/09/2019</li>
  251.                         <li><a href="{{ asset('releases/v0.2.0/v0.2.0.zip') }}">0.2.0</a> - 03/09/2019</li>
  252.                         <li><a href="{{ asset('releases/v0.1.4/v0.1.4.zip') }}">0.1.4</a> - 23/08/2019</li>
  253.                         <li><a href="{{ asset('releases/v0.1.3/v0.1.3.zip') }}">0.1.3</a> - 21/08/2019</li>
  254.                         <li><a href="{{ asset('releases/v0.1.2/v0.1.2.zip') }}">0.1.2</a> - 02/08/2019</li>
  255.                         <li><a href="{{ asset('releases/v0.1.1/v0.1.1.zip') }}">0.1.1</a> - 26/07/2019</li>
  256.                         <li><a href="{{ asset('releases/v0.1.0/v0.1.0.zip') }}">0.1.0</a> - 17/07/2019</li>
  257.                     </ul>
  258.                 </div>
  259.             </div>
  260.         </div>
  261.     </article>
  262. {% endblock %}