Documentación ColBettec

Introducción

El framework de ColBettec está basado en Sass, constituido por una serie de parciales que construyen la hoja de estilos final styles.css y styles.min.css, siendo esta última la que se vincula en la plantilla styles.vm de Aliratec.

La estructura usada es totalmente responsive adaptada a cualquier dispositivo, independientemente de su resolución.

A continuación se puede ver el árbol de directorios y parciales usados, donde se podrá modificar el diseño del site.

scss/
|--base/
    |-- _buttons.scss
    |-- _forms.scss
    |-- _grid.scss
    |-- _links.scss
    |-- _reset.scss
    |-- _tables.scss
    |-- _textures.scss
    |-- _utilities.scss
|--layout/
    |-- _banner.scss
    |-- _footer.scss
    |-- _header.scss
    |-- _layout.scss
    |-- _lobbys.scss
    |-- _machineIframe.scss
    |-- _membersarea.scss
    |-- _mpu.scss
    |-- _navs.scss
    |-- _promociones.scss
    |-- _slotSessionInfo.scss
|--lib/
    |-- _documentation.scss
    |-- _fonts.scss
    |-- _mixins.scss
    |-- _settings.scss
|-- _partials.scss
|-- styles.scss

Layout

A continuación veremos el sistema usado para construir ColBet y sus diferentes utilidades y componentes para desarrollar un nuevo site.

Settings

En el archivo _settings.scss se podrá configurar, en gran medida, casi todos los aspectos esenciales para el diseño de un nuevo site.

Para configurar el resto de elementos de HTML se podrá acceder a cada uno de los archivos .scss correspondientes y así personalizar de forma más detallada algunos elementos como los botones, formularios, etc.

Grid

ColBet esta construido sobre un sistema de Grid Layout de CSS con una estructura de cabecera(header) fija y contenido(main), junto a dos columnas laterales en el lado izquierdo y derecho (aside), para albergar los distintos menús de navegación

Contenedores

El principal contenedor usado es la etiqueta <section> donde se acota el ancho máximo utilizando un mixin por defecto.

Si por el contrario no se quiere acotar un tamaño máximo, se podrá usar este mismo mixin y estipular el 100% del ancho, en la variable $width al incluir el mixin en el elemento en el que se quiera usar.

@mixin limitMaxWidth($width, $max-width){
    width: $width;
    max-width: $max-width;
    margin-left: auto;
    margin-right: auto;
}

Puntos de corte

Los distintos puntos de corte son totalmente personalizables en función del proyecto en cuestión.

Se podrá acceder a los distintos puntos con el siguiente mapa de sass.

$media: (
   xl: 1460px,
   l: 1390px,
   m: 1100px,
   s: 768px,
   xs: 590px,
   xxs: 430px
);

Reset

Todos los elementos de HTML tienen un reset en sus propiedades de márgenes y bordes, y aplicando la propiedad box-sizing: border-box a todos ellos.

Las imágenes tienen aplicada la propiedad max-width: 100% para que sean totalmente responsive y se adapten a su contenedor.

Todas las etiquetas <div> tienen aplicada la propiedad position: relative para agilizar el posicionamiento de elementos en la maquetación.

Tipografía

En el archivo _fonts.scss se declaran las distintas tipografías a usar en el site como podemos ver a continuación:

@font-face { 
    font-family: principal; 
    src: url('/fonts/segoeuib.woff2');
}
@font-face { 
    font-family: secondary; 
    src: url('/fonts/segoeui.woff2');
}
@font-face { 
    font-family: complementary; 
    src: url('/fonts/segoeui.woff2');
}

Utilidades

Para facilitar la maquetación mientras se escribe código HTML, se han predefinido una serie de clases que se podrán usar para establecer el diseño y disposición de los diferentes componentes de las páginas.

FlexBox

ColBet no está basado en un sistema de grid de columnas. Por el contrario, se ha establecido un sistema de clases usando la propiedad flex con sus distintas variantes. Podemos ver un ejemplo a continuación: (Si no estás familiarizado con la propiedad display: flex puedes ver una guía aquí: Guía Flexbox.

<div class="flex--center">
    <div>item</div>
    <div>item</div>
</div>

A continuación podemos ver como se ha creado la construcción de este sistema de clases usando un mapa de sass, del cual podemos sacar las diferentes versiones de las clases que se pueden usar.

%flex{
    display:flex;
    flex-wrap:wrap;
}
$flexElements: (
   "flex": flex-start, 
   "flex--center": center, 
   "flex--end": flex-end, 
   "flex--between": space-between, 
   "flex--around": space-around, 
   "flex--evenly": space-evenly
);
@each $nameFlex, $valorJustify in $flexElements {
   .#{$nameFlex} {
      @extend %flex;
      justify-content: $valorJustify;
   }
}

Junto con este sistema de clases, también se pueden añadir las que se pueden ver a continuación para agregar distintas funcionalidades de Flexbox.

.inColumns  { flex-direction:column }
.vCenter    { align-items:center }
.vStart     { align-items:start }
.vEnd       { align-items:end }
.aCenter    { align-self:center;}
.aStart     { align-self:flex-start }
.aEnd       { align-self:flex-end }
.noWrap     { flex-wrap:nowrap }

Por ejemplo, si queremos tener varios elementos en columna centrados tanto vertical como horizontalmente, podríamos hacerlo de la siguiente manera, sin necesidad de crear clases a los elementos, o agregar estilos adicionales.

<div class="flex--center  inColumns  vCenter">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
</div>

Tamaño de cajas: (width)

Para establcer el tamaño de algunos elementos se han creado una serie de clases wN, siendo N un número múltiplo de 5 con un máximo de 100. Esto nos permitirá establecer un tamaño de ancho a un elemento, con por ejemplo w30, siendo esto en css width: 30%.

A continuación podemos ver como se construyen en sass estas clases:

@for $w from 1 through 20 {
    .w#{$w*5} {
        width: $w*5%;
    }
}
@media (max-width: map-get($media, "s")){
    @for $w from 1 through 20 {
        .w#{$w*5} {
            width: 100%;
        }
    }
}

Como se puede comprobar, también se ha creado una mediaquerie, que establece un tamaño de 100% de los elementos en cierto punto de corte. En este caso en el punto de corte "s" como se ha podido ver anteriormente en el mapa de puntos de corte.

Por otro lado, también se ha establecido el mismo sistema de tamaño para las unidades de medida vw, utilizando la clase tipo vwN, siendo N, igualmente, un número múltiplo de 5 con un máximo de 100.

Margin y Padding

Podremos establecer margin mediante las clases mN mtN mrN mbN mlN y padding con, pN ptN prN pbN plN, siendo N un número múltiplo de 5, con un máximo de 30 siendo facilmente modificable ya que todas las opciones se compilan en css desde sass de la siguiente manera:

@for $p from 1 through 6 {
    .p#{$p*5} {
        padding: $p*5px;
    }
}

Ejemplo: (paddin-left: 20px)

<div class="pl20">

Display

Podremos cambiar la visualización y comportamiento de los componentes de forma rápida con las siguientes clases:

.center{
    margin-left: auto;
    margin-right: auto;
}

.hide { display: none;}

.show, 
.block { display:block !important;}

.blockScroll {
    overflow: hidden;
    height: 100%;
}

Float

Podremos seguir controlando la posición con la propiedad float y resetear el comportamiento con las siguientes clases:

.floatl { float:left;}
.floatr { float:right;}
.clearfix { clear:both;}

Textos

Para la alineación de textos se pueden usar las siguientes clases:

.txtc { text-align:center;}
.txtr { text-align:right;}
.txtl { text-align:left;}

Colores

Para tratar el color en los diferentes elementos se han establecido una serie de variables en un mapa de SASS, que a la vez se compilan para estar también disponibles en CSS puro, y así poder usarlas también desde JavaScript.

$colors: (
   // COLOR PALETTE
   bg1: #F8F8F8,
   txt1: #333333,
   bg2: #005173,
   txt2: #FDFDFD,
   c1: #0085B9,
   c2: #005173,
   c3: #FF9A26,
   c4: #4D2A00,
   c5: #D20723,
   c6: #780C0A,
   cwhite: #FFFFFF,
   cblack: #111111,
   // COLOR PALETTE COMPLEMENTARY
   grey-superdark: #1d1d1d,
   grey-dark: #4E4E4E,
   grey: #808080,
   grey-light: #B5B5B5,
   grey-superlight: #DEDEDE,
   error: #E89070,
   warning: #FFD97E,
   success: #CECF86,
   info: #8DB9D4
);
  • // COLOR PALETTE
  • --color-bg1
  • --color-txt1
  • --color-bg2
  • --color-txt2
  • --color-c1
  • --color-c2
  • --color-c3
  • --color-c4
  • --color-c5
  • --color-c6
  • --color-cwhite
  • --color-cblack
  • // COLOR PALETTE COMPLEMENTARY
  • --grey-superdark
  • --grey-dark
  • --grey
  • --grey-light
  • --grey-superlight
  • --error
  • --warning
  • --success
  • --info

Fondo Oscuro

Para conseguir mayor agilidad a la hora de maquetar cualquier sección, se ha declarado la clase dark-bg, que invierte los colores de fondo y textos estipulados en el parcial _settings.scss y que podremos ver más adelante.

Si añadimos esta clase a cualquier elemento del html, el color de fondo será el que hayamos estipulado como bg2 y el color de texto como txt2 en el mapa de colores del archivo _settings.scss.

Iconos

Para representar los iconos se usará la etiqueta <svg> referenciando en la url del recurso el id correspondiente al icono que se quiere representar, como en el ejemplo siguiente:

<svg class="ico"><use xlink:href="/img/icos/iconos-web.svg#flecha"></use></svg>
<svg class="ico--small"><use xlink:href="/img/icos/iconos-web.svg#flecha"></use></svg>

Por defecto se puede agregar la clase ico o ico--small para darle los tamaños por defecto asignados en el archivo de configuración _settings.scss.

Todos los iconos se encuentran en el archivo icos-sprite.svg, puediendo ampliarlo o modificarlo de forma personalizada. Estos iconos también se encuentran de forma individual en la misma ruta que el sprite /img/icos/ con en nombre sin el prefijo ico-.

El listado completo de iconos es el siguiente:

ico-youtube ico-instagram ico-linkedin ico-twitter ico-facebook
ico-airplay
ico-award
ico-bell
ico-camera
ico-chevron-right
ico-database
ico-edit-2
ico-file-minus
ico-filter
ico-folder
ico-help-circle
ico-key
ico-log-in
ico-map
ico-message-circle
ico-minimize-2
ico-monitor
ico-paperclip
ico-phone
ico-power
ico-rotate-ccw
ico-scissors
ico-settings
ico-shopping-cart
ico-terminal
ico-upload
ico-user-x
ico-video
ico-volume
ico-x
ico-heart-off
ico-alert-triangle
ico-battery-charging
ico-bookmark
ico-cast
ico-chevrons-right
ico-delete
ico-edit-3
ico-file-plus
ico-flag
ico-gift
ico-home
ico-layers
ico-log-out
ico-maximize-2
ico-message-square
ico-minimize
ico-more-horizontal
ico-phone-call
ico-pie-chart
ico-printer
ico-rotate-cw
ico-search
ico-share-2
ico-slash
ico-trash-2
ico-user-check
ico-user
ico-volume-1
ico-wifi-off
ico-play
ico-heart
ico-arrow-right-circle
ico-battery
ico-calendar
ico-check
ico-clipboard
ico-download-cloud
ico-eye-off
ico-file-text
ico-folder-minus
ico-hard-drive
ico-image
ico-link
ico-mail
ico-maximize
ico-mic-off
ico-minus-circle
ico-more-vertical
ico-phone-missed
ico-plus-circle
ico-refresh-cw
ico-rss
ico-send
ico-shield-off
ico-star-off
ico-trash
ico-user-minus
ico-users
ico-volume-2
ico-wifi
ico-zoom-in
ico-star
ico-arrow-right
ico-bell-off
ico-camera-off
ico-chevron-down
ico-clock
ico-download
ico-eye
ico-file
ico-folder-plus
ico-headphones
ico-inbox
ico-lock
ico-map-pin
ico-menu
ico-mic
ico-minus-square
ico-move
ico-phone-off
ico-plus-square
ico-repeat
ico-save
ico-server
ico-shield
ico-tag
ico-unlock
ico-user-plus
ico-video-off
ico-volume-x
ico-x-octagon
ico-zoom-out
^ Top

Componentes

A continuación se pueden ver una serie de componentes que podemos usar en el site.

Alertas

Para presentar mensajes de error, alerta, información o validación podemos usar las siguientes clases en cualquier etiqueta HTML.

Esto es un mensaje de Error

Esto es un mensaje de Alerta

Esto es un mensaje de Información

Esto es un mensaje de Validación

<p class="alert--error" href="">Esto es un mensaje de Error</p>
<p class="alert--warning" href="">Esto es un mensaje de Alerta</p>
<p class="alert--info" href="">Esto es un mensaje de Información</p>
<p class="alert--success" href="">Esto es un mensaje de Validación</p>
^ Top

Botones y Links

Se han establecido 3 tipos de botones pudiendo ampliarlos o modificarlos en el parcial _buttons.scss. Los links se pueden modificar en el parcial _links.scss.

btn--primary link sencillo
<a class="btn--primary" href="">btn--primary</a>
<button type="button" class="btn--secondary">btn--secondary</button>
<button type="button" class="btn--disable">btn--disable</button>
<a href="">link sencillo</a>
^ Top

Formularios

El diseño de los formularios se puede modificar en el archivo _forms.scss. El diseño por defecto los podemos ver a continuación:

<label for="name">Label</label>
<input id="name" name="name" type="text">
<label for="docType">Select</label>
<select name="docType" id="docType">
    <option value=0>-- Selecione una opción --</option>
    <option value="3" >Opción 1 </option>
    <option value="1" >Opción 2 </option>
    <option value="2" >Opción 3 </option>
    <option value="4" >Opción 4 </option>
</select>
<input id="check" name="check" type="checkbox">
<label for="check">Checkbox</label>
<input id="radio" name="radio" type="radio">
<label for="radio">Radio button</label>
<label>Radio Button Toggle</label>
<div class="flex">
    <input id="gender1" class="toggle" type="radio" name="gender" value="1">
    <label for="gender1"><span>Hombre</span></label>
    <input id="gender2" class="toggle" type="radio" name="gender" value="2">
    <label for="gender2"><span>Mujer</span></label>
</div>
^ Top

Tablas

Las tablas deberán ir encapsuladas en un contenedor con la clase "table__block, para que esta sea deslizable en dispositivos móviles cuando el contenido sea demasiado ancho para una pantalla pequeña.

Fecha Descripción del documento Documento
Fecha Descripción Descargar
<div class="table__block">
    <table class="mt15">
        <thead>
            <tr>
                <th>Fecha</th>
                <th>Descripción del documento</th>
                <th>Documento</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td title="Fecha">Fecha</td>
                <td title="Documento">Descripción</td>		
                <td title="Descargar">Descargar</td>
            </tr>
        </tbody>
    </table>
</div>

Acordeón

Una forma fácil de crear elementos acordeón para ocultar textos extensos y mostrar sólo los titulares. Funciona simplemente aplicando la clase accordion a cualquier elemento, y el elemento contenedor hermano siguiente, se colapsará para ocultar su contenido. Veamos como funciona con un ejemplo:

Elemento con la clase acordion

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab illum eum voluptatibus. Repellat sequi est praesentium id mollitia aut, doloribus, enim dolore fuga architecto voluptatibus facere consectetur nisi?

Odit perspiciatis voluptates nesciunt similique saepe provident tempora, ipsa odio maxime consectetur explicabo modi. Voluptatibus incidunt veritatis dolor aspernatur tenetur quod assumenda!

<h4 class="type2 accordion mt20">Elemento con la clase acordion</h4>
<div>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab illum eum voluptatibus. Repellat sequi est praesentium id mollitia aut, doloribus, enim dolore fuga architecto voluptatibus facere consectetur nisi?</p>
    <p>Odit perspiciatis voluptates nesciunt similique saepe provident tempora, ipsa odio maxime consectetur explicabo modi. Voluptatibus incidunt veritatis dolor aspernatur tenetur quod assumenda!</p>
</div>

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab illum eum voluptatibus. Repellat sequi est praesentium id mollitia aut, doloribus, enim dolore fuga architecto voluptatibus facere consectetur nisi?

<button type="button" class="btn--secondary accordion mt20">Elemento con la clase acordion</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab illum eum voluptatibus. Repellat sequi est praesentium id mollitia aut, doloribus, enim dolore fuga architecto voluptatibus facere consectetur nisi?</p>

Como se puede observar la clase puede ir acompañada de otras clases, y se puede agregar a cualquier elemento. El elemento hermano sea cual sea, si este es un contenedor con más elementos, ocultará todos los elementos que contenga. Por el contrario, si es un elemento que no contiene nada más, solo se ocultará este, como se puede ver en el segundo caso.