🏀

Coltrane CSS

Versión 2.0

Actualizado el 13 Sept 2023
Antes coppelize.css

Otras versiones:
1.7,1.6,1.5, 1.4 ,1.3 ,1.2,1.1

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.

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

⏺ 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

Link

<a class="c-link" href="">Link</a>

📦 Alert

Texto muy largo en una alerta inteligente que cambia de tamaño y estilo.

<div class="alert">
  <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

<div class="avatar avatar-s">
<div class="avatar-name">S</div>
</div>
 <div class="avatar avatar-m">
  <div class="avatar-name">M</div>
</div>
<div class="avatar avatar-l">
 <div class="avatar-name">L</div>
</div>
<div class="avatar avatar-l" style="background:url("assets/prom.png");background-size:cover;color:transparent;">.</div>

📦 Breadcrumb

<ul class="c-breadcrumb">
  <li><a href="#">Opción 1</a></li>
 <li><a href="#">Opción 2</a></li>
  <li><a href="#">Opción 3</a></li>
</ul>

📦 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

<div class="c-card">
 <p>Soy un card</p>
</div>

⏺ Card item

Título

Contenido

Link

<div class="c-card item">
  <div class="img-content neutral-bg"><img src="-aqui la url de tu imagen-" alt=""></div>
  <div class="content m-3">
    <h4>Título</h4>
    <p>Contenido</p><a href="#">Link </a>
  </div>
</div>

📦 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

<div class="c-collapse-group">
  <details class="c-collapse">
    <summary>
      <h3>Dudas fiancieras</h3><img src="assets/chevron_down.svg" alt="">
    </summary>
    <div class="c-c-content">
      <h4>Title</h4>
      <p>This is some text and <i>these words are italic</i></p>
    </div>
  </details>
  <details class="c-collapse">
    <summary>
      <h3>Créditos</h3><img src="assets/chevron_down.svg" alt="">
    </summary>
    <div class="c-c-content">
      <h4>Title</h4>
      <p>This is some text and <i>these words are italic</i></p>
    </div>
  </details>
  <details class="c-collapse">
    <summary>
      <h3>Click to expand</h3><img src="assets/chevron_down.svg" alt="">
    </summary>
    <div class="c-c-content">
      <h4>Title</h4>
      <p>This is some text and <i>these words are italic</i></p>
    </div>
  </details>
</div>

📦 Tooltip

<div class="tooltip">
  <label>Holi 👋 Soy un tooltip, HOVER me !</label>
  <div class="tooltip-container box-shadow">
    <h4>Título</h4>
    <div class="tooltip-content">
      Muestran información concisa para guiar al usuario en alguna experiencia.   
    </div>
  </div>
</div>

📦 Footer

Ir arriba

Menú

Inicio
Developers Coppel
Customer Experience

👋

Visualiza el footer completo al final de esta página.

<div class="c-footer white-bg">
  <div class="text-center pb-4"><a href="#">Ir arriba</a></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h4>Menú</h4>
        <ul>
          <li>Inicio</li>
          <li>Developers Coppel</li>
          <li>Customer Experience</li>
        </ul>
      </div>
      <div class="col-lg-6">
        <h2>👋</h2><br>Visualiza el footer completo <a href="#footer-site">al final de esta página.</a>
      </div>
    </div>
  </div>
</div>

📦 Header

⏺ Header

<div class="c-header-background background-bg b-center hv-25" style="background-image: url("-aqui ty imagen-");"></div>

⏺ Header with content

Secciones

Hola soy un contenido

Secciones

Hola soy un contenidoç

<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>

📦 Input

⏺ Regular input

<form class="form-coppel" action="index.html" method="post">
  <label for="">Nombre <span class="small neutral">(🥑 Regular input)</span></label>
  <input type="text" name="" placeholder="María Gonzalez ejm.">
  <label class="small" for="">Un mensaje al usuario 🙃</label>
</form>

👉 Estados del input

Error input

<form class="form-coppel" action="index.html" method="post">
  <label for="">Nombre <span class="small neutral">(🔥 Error input)</span></label>
  <input class="error-border" type="text" name="" placeholder="María Gonzalez ejm.">
  <label class="small error" for="">Un mensaje al usuario 🙃</label>
</form>

Succes input

<form class="form-coppel" action="index.html" method="post">
  <label for="">Nombre <span class="small neutral">(✅ Success input)</span></label>
  <input class="success-border" type="text" name="" placeholder="María Gonzalez ejm.">
  <label class="small success" for="">Un mensaje al usuario 🙃</label>
</form>

Disabled input

<form class="form-coppel" action="index.html" method="post">
  <label class="neutral" for="">Nombre <span class="small neutral">(✅ Disabled input)</span></label>
  <input type="text" name="" placeholder="María Gonzalez ejm." disabled="">
  <label class="small neutral" for="">Un mensaje al usuario 🙃</label>
</form>

👉 Tamaños de input

Small

<form class="form-coppel" action="index.html" method="post">
  <label for="">Nombre <span class="small neutral">(🥑 Small input)</span></label>
  <input class="c-small" type="text" name="" placeholder="María Gonzalez ejm.">
  <label class="small" for="">Un mensaje al usuario 🙃</label>
</form>

Regular

<form class="form-coppel" action="index.html" method="post">
  <label for="">Nombre <span class="small neutral">(🥑 Medium /Regular input)</span></label>
  <input class="c-medium" type="text" name="" placeholder="María Gonzalez ejm.">
  <label class="small" for="">Un mensaje al usuario 🙃</label>
</form>

Large

<form class="form-coppel" action="index.html" method="post">
  <label for="">Nombre <span class="small neutral">(🥑 Large input)</span></label>
  <input class="c-large" type="text" name="" placeholder="María Gonzalez ejm.">
  <label class="small" for="">Un mensaje al usuario 🙃</label>
</form>

Xlarge

<form class="form-coppel" action="index.html" method="post">
  <label for="">Nombre <span class="small neutral">(🥑 Regular input)</span></label>
  <input type="text" class="c-xlarge" name="" placeholder="María Gonzalez ejm.">
  <label class="small" for="">Un mensaje al usuario 🙃</label>
</form>

⏺ Dropdown

<form class="form-coppel" action="index.html" method="post" disabled="">
  <label for="">Nombre <span class="small neutral">(📦 Dropdown input)</span></label>
  <div class="select">
    <input type="radio" name="option"><i class="toggle icon icon-arrow-down"></i><i class="toggle icon icon-arrow-up"></i><span class="placeholder">Selecciona una opción</span>
    <label class="option">
      <input type="radio" name="option"><span class="title animated fadeIn">Speedometer</span>
    </label>
    <label class="option">
      <input type="radio" name="option"><span class="title animated fadeIn">Fire</span>
    </label>
    <label class="option">
      <input type="radio" name="option" disabled=""><span class="title animated fadeIn">Handbag</span>
    </label>
    <label class="option">
      <input type="radio" name="option"><span class="title animated fadeIn">Badge</span>
    </label>
  </div>
  <label class="small neutral" for="">Un mensaje al usuario 🙃</label>
</form>

⏺ Date

 <form class="form-coppel" action="">
  <label for="">Fecha <span class="small neutral">(📦 🔥 Date input)</span></label>
  <input type="date" name="fecha">
  <label class="small neutral" for="">Un mensaje al usuario 🙃</label>
</form>

⏺ Checkbox

Checkbox

<input type="checkbox" name="">

⏺ Upload

Drop files here

<div class="form-coppel">
  <label class="c-upload" for="images">
    <h3 class="c-upload-title">Drop files here</h3>o
    <button class="primary-button m-3 no-click" type="submit">Subir archivo</button>
    <input id="images" type="file" accept="image/*" required="">
  </label>
</div>

⏺ Uploader

<form class="form-coppel loader" action="">
  <label class="file" for="avatar">Choose..</label>
  <input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg">
  <input type="text" name="" placeholder="File.png">
</form>

📦 List
NEW 🎉

🏅 Febrero✅

🏅 Marzo✅

🏅 Abril✅

<div class="c-list">
  <div class="c-list-item"><span>
      🏅 Febrero✅</span></div>
  <div class="c-list-item"><span>
      🏅 Marzo✅</span></div>
  <div class="c-list-item"><span>
      🏅 Abril✅</span></div>
</div>

📦 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.

<div class="modalbox"><a href="#modal"><img src="assets/cross.svg"></a>
  <h1>Título</h1>
  <p>La app que seleccionaste ya no se mostrará en tu pantalla de inicio.</p>
  <p>Si deseas verla de nuevo en el inicio ve a la sección deMis Aplicación y márcala como destacada.</p>
  <button class="primary-button mb-3" type="button" name="button">De acuerdo, quitar</button>
  <button class="secondary-button" type="button" name="button">Cancelar</button>
</div>

📦 Navbar

<nav class="c-navbar">
  <div class="brand">
    <h4>coppel-design.com</h4>
  </div>
  <ul class="menu">
    <li><a href="#">Brand</a></li>
    <li><a href="#">Navbar</a></li>
    <li><a href="#">Components</a></li>
  </ul>
</nav>

📦 ProgressBar

60%

<!--  ==================================================================================== PROGRES BAR-->
<div class="progressBar">
  <div class="groupBar">
    <div class="bar"></div>
    <div class="progress" style="width:80%"></div>
  </div>
</div>
<!--  ==================================================================================== PROGRES BAR--><br>
<hr><br>
<!--  ==================================================================================== PROGESS BAR PERCENT-->
<div class="progressBar barPercent">
  <div class="groupBar">
    <div class="bar"></div>
    <div class="progress" style="width:50%"></div>
  </div>
  <label class="small text-center" for="">60%</label>
</div>
<!--  ==================================================================================== PROGESS BAR PERCENT-->

📦 Range

Mónto mínimo $1,000 Mónto máximo $5,000

<div class="c-range">
  <input class="slider" id="myRange" type="range" min="1" max="100" value="50">
</div>
<div class="d-flex justify-content-between">
  <label class="small">Mónto mínimo $1,000</label>
  <label class="small">Mónto máximo $5,000</label>
</div>

📦 Stepper

Título Subtitle

Título

<div class="stepper">
  <div class="stepper-group">
    <div class="stepper-step primary-bg">
      <div class="checked-step"></div>
    </div>
    <div class="stepper-text">
      <label for="">Título</label>
      <label class="small">Subtitle</label>
    </div>
    <div class="stepper-line"></div>
  </div>
  <div class="stepper-group">
    <div class="stepper-step neutral-bg pencil">1</div>
    <div class="stepper-text">
      <label for="">Título</label>
      <label class="small">Subtitle</label>
    </div>
    <div class="stepper-line"></div>
  </div>
  <div class="stepper-group">
    <div class="stepper-step neutral-bg pencil">2</div>
    <div class="stepper-text">
      <label for="">Título</label>
    </div>
  </div>
</div>

📦 Table

#	First Name	Last Name	Language
1	Some	One	English
2	Joe	Sixpack	English
3	Stu	Dent	Code

<table class="full zebra-striped" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some</td>
      <td>One</td>
      <td>English</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Joe</td>
      <td>Sixpack</td>
      <td>English</td>
    </tr>
    <tr>
     <td>3</td>
      <td>Stu</td>
      <td>Dent</td>
      <td>Code</td>
    </tr>
  </tbody>
</table>

📦 Tabs

Opción 1
Opción 2
Opción 3
Opción 4

<ul class="c-tabs">
  <li>Opción 1</li>
  <li>Opción 2</li>
  <li>Opción 3</li>
  <li>Opción 4</li>
</ul>

Sistema de 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

Sistema de utilidades

Integrado a este paquete encontraras el sistema de utilidades y modificadores tales como p-1, m-1, visitar su documentación

Si tienes alguna duda o sugerencia nos puedes contactar a raul.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

🏀

Coltrane CSS

Instalación

Variables de diseño Tambien conocidas como "tokens"

Tipografias

Títulos

Soy un h1

Soy un h2

Soy un h3

Soy un h4

Contenido

Componentes

📦 Button

⏺ Primary

⏺ Secondary

⏺ Link

📦 Alert

📦 Avatar

📦 Breadcrumb

📦 Card

⏺ Card item

Título

📦 Collapse

Dudas fiancieras

Title

Créditos

Title

Click to expand

Title

📦 Tooltip

Título

📦 Footer

Menú

👋

📦 Header

⏺ Header

⏺ Header with content

Secciones

Secciones

📦 Input

⏺ Regular input

👉 Estados del input

Error input

Succes input

Disabled input

👉 Tamaños de input

Small

Regular

Large

Xlarge

⏺ Dropdown

⏺ Date

⏺ Checkbox

⏺ Upload

Drop files here

⏺ Uploader

📦 List NEW 🎉

📦 Modal

Título

📦 Navbar

📦 ProgressBar

📦 Range

📦 Stepper

📦 Table

📦 Tabs

Sistema de columnas

Sistema de utilidades

Variables de diseño
Tambien conocidas como "tokens"

📦 List
NEW 🎉