Ir ao contido da páxina

Introdución

O sistema de deseño da USC segue os principios do Atomic Design. Con este sistema obtemos un framework modular e reutilizable basado en compoñentes.


Arquitectura

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:

  • Átomos: at-[o-seu-nome]
  • Moléculas: ml-[o-seu-nome]
  • Organismos: org-[o-seu-nome]
  • Plantillas: tpl-[o-seu-nome]

Neste framework non se asignan estilos ao que Brad Frost denomina páxinas 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.

Javascript

O Javascript está desenvolto basado no framework Vue.js e modularizado en compoñentes reutilizables.

Instalación

Para usar este framework, débense incluír no proxecto todos os arquivos da última versión, e vinclular os arquivos CSS e fontes de Google Fonts no head e os JS ao peche do body:

<head>
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif:400,400i,500,700&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/path-to-release/fonts/iconusc.css">
    <link rel="stylesheet" href="/path-to-release/css/app.css">
</head>

<body>
    <div id="app">
        <!-- Código da páxina -->
    </div>

    <script src="/path-to-release/runtime.js"></script>
    <script src="/path-to-release/0.js"></script>
    <script src="/path-to-release/1.js"></script>
    <script src="/path-to-release/js/app.js"></script>
</body>

Requerimentos e recomendacións no código

Usa o doctype de HTML5:

<!DOCTYPE html>

Engade o meta tag de viewport responsive:

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

Engade un contedor con id #app como punto de arranque da aplicación Javascript que conteña o resto do código body:

<body>
    <a href="#main-content" class="is-sr-only">Ir ao contido da páxina</a>

    <div id="app">
        <div class="site-header-wrapper">
            <!-- Cabeceira da páxina -->
        </div>

        <main id="main-content" class="container">
            <!-- Contido da páxina -->
        </main>
    </div>
</body>

É 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.

Para calquera outra dúbida estrutural do código pódense consultar as plantillas e/ou páxinas de exemplo.

Drupal

Para a aplicación do sistema de deseño en Drupal é necesario incluír un arquivo CSS extra para os seus estilos específicos:

<head>
    ...
    <link rel="stylesheet" href="/path-to-release/css/drupal.css">
</head>

CAS

Para a aplicación do sistema de deseño no CAS existe unha versión reducida dos assets:

<!DOCTYPE html>
<html lang="gl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif:400,400i,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/path-to-release/fonts/iconusc.css">
    <link rel="stylesheet" href="/path-to-release/css/sites/cas.css">

    ...
</head>
<body class="">
    <a href="#main-content" class="is-sr-only">Ir ao contido da páxina</a>

    <div id="app">
        ...

        <main id="main-content" class="container">
            ...
        </main>

        ...

        <script src="/path-to-release/runtime.js"></script>
        <script src="/path-to-release/0.js"></script>
        <script src="/path-to-release/js/sites/cas/app.js"></script>
    </div>
</body>
</html>

Todas as versións

Loading…
Loading the web debug toolbar…
Attempt #