Get started

Guía de instalación

Actualizado el 14/03/2024

La tecnología utilizada para el sistema de diseño de la ULPGC está basada en HTML, CSS (SASS) y Javascript (jQuery).

Hay varias formas de poder incluir las librerías necesarias para su uso, dependiendo de la extensión que se le quiera dar al código fuente, pudiendo optar entre incluirse directamente las librerías CSS y JS, o bien, incluyendo las librerías SASS e importando los archivos originales del Design System para su posterior modificación y reutilización de variables.

La estructura de carpetas es la siguiente:

Estructura de carpetas Sistema de diseño de la ULPGC

Las distintas carpetas disponen de:

css: Hoja de estilos con un archivo compilado CSS (ulpgcds.css) listo para usar. También dispone de la carpeta SCSS con archivos sass por si es necesario añadir o reutilizar algún método o variable ya disponibles.
fonts: Carpeta dónde está la fuente tipográfica en la que se encuentran todos los iconos de la web institucional.
js: Carpeta con los archivos javascript necesarios para el correcto funcionamiento del Design System. Además de una librería general (ulpgcds.js), se disponen de versiones de librerías necesarias para algunos de los componentes como son chosen (selectores múltiples), jquery ui (para uso de calendarios tipo datepicker), slick (para carruseles) y tablesaw (tablas HTML con funcionalidades para diseño adaptativo o responsive)

A continuación explicaremos la forma básica de instalación así como sus posibles alternativas más avanzadas para extender funcionalidades del mismo.

Inclusión de librerías básicas

Para que el Design System de la ULPGC pueda ser aplicado correctamente, deberán incluirse las librerías tanto de CSS como las correspondientes a javascript a través de jQuery. Exactamente, las librerías a incluir serán:

<html>
<head>
...
<link type="text/css" rel="stylesheet" href="https://cdn.ulpgc.es/ulpgcds/1.0/css/ulpgcds.css" media="all" />
...
</head>
<body>
...
...
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdn.ulpgc.es/ulpgcds/1.0/js/ulpgcds.js?v=1.0"></script>
</body>
</html>

Pudiendo quedar un ejemplo de cabecera html de un sitio web perteneciente a la ULPGC en la siguiente forma:

<html>
<head>
...
<link type="text/css" rel="stylesheet" href="https://mysite.ulpgc.es/css/style-old.css" media="all" />
...
<link type="text/css" rel="stylesheet" href="https://cdn.ulpgc.es/ulpgcds/1.0/css/ulpgcds.css" media="all" />
...
<link type="text/css" rel="stylesheet" href="https://mysite.ulpgc.es/css/ulpgcds-custom.css" media="all" />
</head>
<body>
...
...
<script type="text/javascript" src="https://mysite.ulpgc.es/js/mylibraries.js"></script>
..
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdn.ulpgc.es/ulpgcds/1.0/js/ulpgcds.js"></script>
</body>
</html>

El Design System es compatible con versiones de jQuery igual o mayor a la 1.12. Esto es importante para aquellos sitios web que tengan dependencias de la librería jQuery menor que la última versión disponible en jquery.com. Simplemente, sería cambiar la referencia a la última versión e introducir la necesaria por el sitio web donde se use.

Uso de SASS

SASS (Syntactically Awesome Stylesheets) es un lenguaje de hoja de estilos inicialmente diseñado por Hampton Catlin y desarrollado por Nathan Weizenbaum, el cuál nos permite trabajar con CSS de una manera sencilla, cómoda y escalable. Es un preprocesador que provee una serie de herramientas (variables, funciones, estructuras de control) que traduce finalmente a un código CSS interpretable por los navegadores.

A la hora de establecer una arquitectura de archivos, se ha seguido la definido como Patrón 7-1, el cuál se basa en una estructura de 7 carpetas, fáciles de entender intentando en la medida posible evitar dificultades a la hora de localizar archivos.

El resultado, una estructura que ayuda a saber dónde se encuentran cada uno de los elementos que vamos a modificar para aplicar los estilos que necesitamos. Un ejemplo de estructura quedaría en la siguiente forma:

scss_ulpgcds/
|
|– base/
|   |– _normalize.scss    # Reset/normalize
|   |– _typography.scss  # Reglas tipográficas
|   …                    # Etc.
|
|– components/
|   |– _accordions         # Acordeones
|   |– _buttons.scss      # Botones
|   |– _dropdown.scss  # Dropdown
|   |– _inputs.scss        # Campos de texto
|   |– _pagers.scss       # Paginadores
|   …                    # Etc.
|
|– layout/
|   |– _grid.scss        # Sistema de retícula
|   |– _header.scss      # Encabezamiento
|   |– _footer.scss      # Pie de página
|   |– _sidebar.scss     # Barra lateral
|   |– _forms.scss       # Formularios
|   …                    # Etc.
|
|– pages/
|   |– _home.scss        # Estilos específicos para la página de inicio
|   |– _content-type.scss     # Estilos específicos un tipo de contenido específico
|   …                    # Etc.
|
|– themes/
|   |– _theme.scss       # Tema por defecto
|   |– _admin.scss       # Tema del administrador
|   …                    # Etc.
|
|– utils/
|   |– _variables.scss   # Variables Sass
|   |– _functions.scss   # Funciones Sass
|   |– _mixins.scss      # Mixins Sass
|   |– _helpers.scss     # Clases & placeholders
|
|– vendors/
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   …                    # Etc.
|
|
`– ulpgcds.scss             # Archivo principal de Sass

En este caso, la carpeta pages y themes vienen únicamente con archivos ejemplo, ya que no se hace uso de las mismas en el Design System, al tratarse de estructuras que formarán parte de cada uno de los sitios web en los que pueda incluirse esta estructuración.

El archivo principal, ulpgcds.scss, hace la importación de todos los archivos necesarios:

/**
* @author Ateigh Diseño Web SL
* @file
*
*/
@import "base/_normalize.scss";
//UTILS
@import "utils/_variables.scss";
@import "utils/_functions.scss";
@import "utils/_mixins.scss";
@import "utils/_helpers.scss";

//VENDORS
//@import "vendors/example.scss";

//BASE
@import "base/_base.scss";
@import "base/_typography.scss";
@import "base/_colors.scss";

//COMPONENTS
@import "components/_accordions.scss";
@import "components/_alerts.scss";
@import "components/_animations.scss";
@import "components/_article.scss";
@import "components/_avatars.scss";
@import "components/_breadcrumbs.scss";
@import "components/_buttons.scss";
@import "components/_datepickers.scss";
@import "components/_dividers.scss";
@import "components/_dropdowns.scss";
@import "components/_inputs.scss";
@import "components/_textareas.scss";
@import "components/_labels.scss";
@import "components/_links.scss";
@import "components/_lists.scss";
@import "components/_logo.scss";
@import "components/_loadings.scss";
@import "components/_progress.scss";
@import "components/_pagers.scss";
@import "components/_sliders.scss";
@import "components/_tables.scss";
@import "components/_tabs.scss";
@import "components/_tags.scss";
@import "components/_tooltips.scss";
@import "components/_iframe.scss";
@import "components/_videos.scss";

//LAYOUTS
@import "layout/_blocks.scss";
@import "layout/_content.scss";
@import "layout/_cookies.scss";
@import "layout/_footer.scss";
@import "layout/_forms.scss";
@import "layout/_grid.scss";
@import "layout/_header.scss";
@import "layout/_paragraphs.scss";
@import "layout/_sidebars.scss";
@import "layout/_views.scss";

//PAGES
@import "pages/_home.scss";

//THEMES
@import "themes/_intranet.scss";

Tanto para sitios web nuevos, como existentes, recomendamos la utilización de SASS para generar código CSS. En ese sentido, se podría incluir el archivo principal de SASS del Design System, el cual incorpora todos y cada uno de los componentes necesarios para la generación del código CSS, quedando en la forma:


// SASS ULPGCDS IMPORT:
@import "ulpgcds/css/scss/ulpgcds.scss";

// mysite.ulpgc.es example import styles:

//UTILS
@import "utils/_variables.scss";
@import "utils/_functions.scss";
@import "utils/_mixins.scss";
@import "utils/_helpers.scss";

Una vez que se importa el archivo con extensión SCSS del Design System, se pueden extender clases ya existentes para cierto tipo de elementos:

.btn{
     @extend .ulpgcds-btn; // Aplicamos los estilos de los botones del Design System a todas las clases que tengan la clase .btn
}

...

main{
    .content{
         ul{
              @extend .ulpgcds-list; // Aplicamos a todos los listados de elementos del cuerpo de una página el formato de lista del Design System
         }
    }
}

Aquí dejamos la última versión de la estructura SASS en un archivo comprimido, para que puedas descargártelo y empezar a integrarlo con tu sitio web.