Utilidades

Un conjunto de utilidades para poder detallar mejor los elementos o contenido.

Clase Propiedad, valor o descripción
float-start float: left;
float-end float: right;
float-none float: none;
absolute position: absolute;
relative position: relative;
fixed position: fixed;
sticky Consultar
oflow-hidden overflow: hidden;
oflow-x-hidden overflow-x: hidden;
oflow-y-hidden overflow-y: hidden;
oflow-auto overflow: auto;
oflow-x-auto overflow-x: auto;
oflow-y-auto overflow-y: auto;
oflow-scroll overflow: scroll;
oflow-y-scroll overflow-y: scroll;
oflow-x-scroll overflow-x: scroll;
pointer-events-none pointer-events: none;
cursor-pointer cursor: pointer;
mark Añade un estilo diferente a la etiqueta "mark"
scrollbar-hidden Oculta la barra de scroll pero, No elimina dicho scroll.
mobile-device-scrollbar-hidden Oculta la barra de scroll (sin perder el mismo) en pantallas igual o inferiores a partir de 990px
control-slide-mobile-device-hidden Oculta los botones de control prev y next de los atributos data-control, en pantallas igual o inferiores a partir de 990px.

Nota La utilidad .control-slide-mobile-device-hidden está pensada para ser colocada en la etiqueta <html> y de esta manera ocultar los controles prev y next en todo los documentos del sitio web, para que el usuario pueda realizar el desplazamiento mediante el touch screen del dispositivo, a la vez que le otorgará más amplitud del ancho del contenido.

-- Propiedades CSS de la clase .sticky

CSS 

    .sticky {
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 1020;
    }

-- Opacidad

Clase Descripción
opacity-1 opacidad = .3
opacity-2 opacidad = .5
opacity-3 opacidad = .7

-- Utilidades Hover

.hover-item-link / .hover-opacity-link

Crea un efecto hover como los anteriores, pero en aquellas etiquetas que con atributo href y que contegan la clase .item

Ejemplo de uso .hover-item-link
HTML
Ejemplo de uso .hover-opacity-link
HTML

-- @Keyframes

Clase Prop./Descripción
.animation-smooth $animation-smooth .8s ease-in
.animation-zoom $animation-zoom .4s ease-in
.animation-slide-up $animation-slide-up .4s ease-in

-- Box-shadow

  • shadow
  • shadow-1
  • shadow-2

-- Utilidad

  • .shadow-none

    Elimina box-shadow de aquel elemento que ya lo tenga por defecto.

-- Uso

HTML 
...

-- iframe

Lorem ipsum

Link href
HTML 

    

        

            

                
            

            
Lorem ipsum

            

                Link href