Hola Coder
Bienvenido a Coltrane.css, esta hoja de estilo tiene el objetivo de ayudarte en el desarrollo de tu aplicación, página o componente. Siendo agnostivo a cualquier framework y trabajando de forma colaborativa con otros sistemas.
La versión 3 se enfoca en la singularidad "(c-nombredelaclase)" de los nombres de clases, esto podría causar incompatibilidad con las versiones anteriores. Si tienes alguna duda contácta al equipo Coltrane.
Instalación
Para la instalación de esta librería puedes utilizar la etiqueta link dento de head para utilizarlo en tu HTML
<link type="text/css" href="coltrane.min.css">Variables de diseño Tambien conocidas como "tokens"
Coltrane esta conformado de algunas variables fundamentales, las cuales contruyen todos los componentes, pantallas y elmentos del front, estos son:
:root{
/* ------------------------------------------------------------------ Tokens V.2 */
/* ------------------------ Interactive colors */
--primary:#006FB9;
--primary-hover:#145B97;
--primary-press:#194B7B;
/* ------------------------ Brand colors */
--bancoppel:#FFF;
--coppel:#FFDD35;
--coppel-max:#753CBD;
--afore:#006FB9;
/* ------------------------ Text colors */
--text:#1B1A16;
--text-soft:#717171;
--text-neutral:#BDBDBD;
/* ------------------------ Border colors */
--border-soft:#717171;
--border-neutral:#D9E3F2;
/* ------------------------ Background colors */
--background:#F1F4FA;
--background-soft:#FAFBFC;
--background-office:#D9E3F2;
--background-box:#FFFFFF;
/* ------------------------ Semantic colors -- Semantic colors backgrounds*/
--error:#BA4B44; --error-bg:#FFF0EF;
--success:#2E8241; --success-bg:#E5FFEB;
--warning:#AB5C00; --warning-bg:#FFF4E8;
--info:#0076A9; --info-bg:#E4F7FF;
--sales:#D3273E;
/* ------------------------Fonts */
--display:48px;
--h1:36px;
--h2:28px;
--h3:24px;
--h4:20px;
--body:16px;
--small:14px;
--caption:12px;
/* ----------------------Space Unit */
--s-unit:8px;
--s-unit-2:16px;
--s-unit-3:24px;
--s-unit-4:32px;
--s-unit-5:40px;
/* --------------------Corner radius Unit */
--rounded-none: 0px;
--rounded-sm: 8px;
--rounded-md: 16px;
--rounded-full: 999px;
// ---------------------Shadow */
--shadow-default: 0px 6px 24px 0px rgba(25, 75, 123, 0.04);
--shadow-hover: 0px 6px 24px 0px rgba(25, 75, 123, 0.12);
--shadow-primary: 0px 6px 24px 0px rgba(25, 75, 123, 0.18);
--shadow-floating: 0px 4px 16px rgba(25, 75, 123, 0.24), 0px 6px 24px rgba(25, 75, 123, 0.16);
};
Tipografias
Utiliza los tamaños que se adecuen a tu producto.
Títulos
Soy un .display
<div class="display">
Soy un .Display
</div> Soy un h1
<h1>
Soy un h1
</h1> Soy un h2
<h2>
Soy un h2
</h2> Soy un h3
<h3>
Soy un h3
</h3>Soy un h4
<h4>
Soy un h4
</h4>Contenido
Soy un p
<p>
Soy un p
</p> Soy un small
<small>
Soy un small
</small> Soy un caption
<span class="caption">
Soy un caption
</span>Componentes
📦 Button
Arquetipo: Botón · Objetivo: Interacción⚠️ La etiqueta < button> como la clase .c-button funcionan para construir el botón.
⏺ Primary
<button class="primary-button m-4" type="button" name="button">
Default Primary Button
</button>
<button class="primary-button large m-4" type="button" name="button">
".large" Primary Button
</button>
<button class="primary-button m-4 responsive" type="button" name="button">
".responsive" - Primary Button
</button>⏺ Secondary
<button class="secondary-button m-4" type="button" name="button">
Secondary Button
</button>
<button class="icon-button m-4" type="button" name="button"><img src="assets/icon.svg"></button>⏺ Link
<a class="c-link" href="">Link</a>📦 Alert
⏺ Success
Texto muy largo en una alerta inteligente que cambia de tamaño y estilo.<div class="c-alert-success">
<img src="assets/mensaje.svg">
<small>Texto muy largo en una alerta inteligente que cambia de tamaño y estilo.</small>
<!-- <a href="#modal"><img src="assets/cross.svg"></a> -->
</div>⏺ Error
Texto muy largo en una alerta inteligente que cambia de tamaño y estilo.<div class="c-alert-error">
<img src="assets/mensaje.svg">
<small>Texto muy largo en una alerta inteligente que cambia de tamaño y estilo.</small>
<!-- <a href="#modal"><img src="assets/cross.svg"></a> -->
</div>⏺ Warning
Texto muy largo en una alerta inteligente que cambia de tamaño y estilo.<div class="c-alert-warning">
<img src="assets/mensaje.svg">
<small>Texto muy largo en una alerta inteligente que cambia de tamaño y estilo.</small>
<!-- <a href="#modal"><img src="assets/cross.svg"></a> -->
</div>⏺ Info
Texto muy largo en una alerta inteligente que cambia de tamaño y estilo.<div class=".c-alert-info">
<img src="assets/mensaje.svg">
<small>Texto muy largo en una alerta inteligente que cambia de tamaño y estilo.</small>
<!-- <a href="#modal"><img src="assets/cross.svg"></a> -->
</div>📦 Avatar
S
M
L
.
<div class="c-avatar avatar-s">
<div class="avatar-name">S</div>
</div>
<div class="c-avatar avatar-m">
<div class="avatar-name">M</div>
</div>
<div class="c-avatar avatar-l">
<div class="avatar-name">L</div>
</div>
<div class="c-avatar avatar-l" style="background:url('assets/prom.png');background-size:cover;color:transparent;">
</div>📦 Card
Para utilizar la estructura de card, bastara con ocupar .card junto con un div y así tener disponible este tipo de componente
Soy un card
⏺ Card item
📦 Collapse
Dudas fiancieras
Title
This is some text and these words are italic
Créditos
Title
This is some text and these words are italic
Click to expand
Title
This is some text and these words are italic
📦 Header
<div class="c-header-background background-bg b-center hv-25" style="background-image: url('https://wallpaperboat.com/wp-content/uploads/2019/07/mountain-wallpaper-01.jpg');">
</div>
Header with content
Secciones
Hola soy un contenido
Secciones
Hola soy un contenido
<div class="c-header-background background-bg b-center hv-50 no-repeat-img img-cover" style="background-image: url('https://wallpaperboat.com/wp-content/uploads/2019/07/mountain-wallpaper-01.jpg');">
<div class="container-sm h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-sm-6">
<h3 class="primary">Secciones</h3>
<p class="white">Hola soy un contenido</p>
</div>
<div class="col-sm-6">
<h3 class="primary">Secciones</h3>
<p class="white">Hola soy un contenido</p>
</div>
</div>
</div>
</div>📦 Input
⏺ Tamaños de input
⏺ Uploader
📦 Selector
También llamado checkbox
📦 Upload
📦 List
🏅 Febrero✅
🏅 Marzo✅
🏅 Abril✅
📦 Modal
Título
La app que seleccionaste ya no se mostrará en tu pantalla de inicio.
Si deseas verla de nuevo en el inicio ve a la sección deMis Aplicación y márcala como destacada.
📦 ProgressBar
📦 Range
📦 Stepper
1
2
📦 Table
| # | First Name | Last Name | Language |
|---|---|---|---|
| 1 | Some | One | English |
| 2 | Joe | Sixpack | English |
| 3 | Stu | Dent | Code |
📦 Tabs
- Opción 1
- Opción 2
- Opción 3
- Opción 4
📦 Tooltip
Título
Muestran información concisa para guiar al usuario en alguna experiencia.
🏀 Sistemas adicionales
🧱 Columnas
Integrado a este paquete encontraras el sistema de columnas de bootstrap sientete libre de incluirlo o quitarlo del coppelize.css según tus necesidades. Si es que decides dejarlo, puedes utilizar col-md, col-lg, container y todo el poder del grid de este framework. Para leer más sobre su uso puedes visitar su documentación🎒 Utilidades
Integrado a este paquete encontraras el sistema de utilidades y modificadores tales como p-1, m-1,visitar su documentaciónSi tienes alguna duda o sugerencia nos puedes contactar araul.gonzalezg@coppel.com para mayor support.
🏀 by Coppel Design Standards - Grupo Coppel ®
Esta librería antes se llamo Coppelize.css pero ahora es Coltrane.css