Biblioteca propia hecha por Titín

Colors

Principales

Color primary y secundar y color de texto y fondo para Prefers-color-scheme Dark o Light.


$lighter-color: #FAFAFA;
$darker-color: #1D242C;
$primary: #0176C3;
$secondary: #C7EEFF;
Escala de grises

Tan solo 4 grados de gris son suficientes para jugar con las distintas secciones.


$grey1: lighten($darker-color, 75%);
$grey2: lighten($darker-color, 50%);
$grey3: lighten($darker-color, 30%);
$grey4: lighten($darker-color, 10%);
Colores de apoyo

Colores de apoyo necesarios para feedback succsess o alert de las apps.


$danger: #ff4d4f;
$success: #41bf5a;

Titulos y display

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Este es un párrafo principal. Se destaca de los párrafos regulares.

Puede utilizar la etiqueta de marca paradestacartexto.

Esta línea de texto debe tratarse como texto eliminado.

Ésta línea de texto se debe de considerar no correcta.

Esta línea de texto debe tratarse como una adición al documento.

Esta línea de texto aparecerá como subrayada.

Esta línea de texto debe tratarse como letra pequeña.

Esta línea se muestra como texto en negrita.

Esta línea se muestra como texto en cursiva.

Una cita conocida, contenida en un elemento blockquote.

Alguien famoso en Source Title
  • Esto es una lista.
  • Tiene un estilo propio.
  • Estructuralmente tiene forma de .
  • Los estilos cambian en las listas secundarias.
  • Listado siguiente:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
  • Esto es un list item.
  • Y este también.
  • Pero se muestran alineados horizontalmente.
Placeholder Responsive image
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 150x150 A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 150x150
Placeholder 400x300
Un título para la imagen de arriba.

Columnas responsive

Hay 2 diferencia esenciales con Bootstrap: La primera es que es tecnología mobile first, el diseño se realiza pensando principalmente en móvil y la segunda es que con .col-n marcas directamente el número de columnas que deseas desde 1 hasta 12... por lo que puedes crear por fin, filas con 5 columnas!! .big-col-5 


<main class="row">
 <div class="col-2 med-col-3 big-col-5">
  <div class="card">Esto es una card</div>
 </div>
</main>

Si deseas crear columnas con un tamaño mayor al 50% (.col-2) deberás sustituir .col-n por .span-n, donde 'n' es el tanto por cien del tamaño de su contenedor puedes ver un ejemplo en funcionamiento aquí, donde se convinan .col-n y .span-n segun el tamaño de pantalla.

Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card
Esto es una card

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit itaque, placeat quis beatae, eligendi fuga expedita modi ducimus magni quasi eos dolorem numquam quae porro cupiditate doloribus blanditiis impedit distinctio.

Columnas responsive 2

Si deseas crear columnas con un tamaño mayor al 50% .col-2, deberás sustituir .col-n por .span-n, donde 'n' es el tanto por cien del tamaño de su contenedor.

En el siguiente ejemplo podemos ver una fila con 2 columnas, que ocupan el 100% en móvil .col-1 (1 columna), el 50% en pantallas medianas .med-col-2 (2 columnas en pantallas medianas) y en pantallas grandes, la primera ocupa el 70% .big-span-70 y la segunda el 30% .big-span-30 



<main class="row">
 <div class="col-1 med-col-2 big-span-70">
  ...contenido
 </div>
 <div class="col-1 med-col-2 big-span-30">
  ...contenido
 </div>
</main>

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure veniam officiis, labore cumque explicabo soluta repellendus eos velit earum. Dicta itaque quas, officiis porro quae repudiandae aperiam aliquid animi maxime!

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure veniam officiis, labore cumque explicabo soluta repellendus eos velit earum. Dicta itaque quas, officiis porro quae repudiandae aperiam aliquid animi maxime!

Registrate

Botones tipo checkbox
Botones tipo radio

Input type File

Para que funcione necesitas adjuntar un pequeño archivo inputFile.js y añadirle al input la id inputTypeFileN donde N es un número y la acción onchange="uploadFiles()" 


<input 
	type="file" 
	class="form-control" 
	id="inputTypeFile" 
	size="50" 
	onchange="uploadFiles()"
>

Input type Range

Para que funcione necesitas adjuntar un pequeño archivo inputRange.js y si quieres el "chivato" de valores añadir un input type="number" 


<input 
type="number" 
class="form-control " 
id="rangenumber" 
min="0" 
max="100" 
value="0"
oninput="range.value=value"
>

<input 
type="range" 
class="block" 
value="00" 
min="0" 
max="100" 
id="range"
oninput="rangenumber.value=value"
>