馃弨

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

<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

S
M
L
.
<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>
    

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

T铆tulo

Muestran informaci贸n concisa para guiar al usuario en alguna experiencia.
<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>

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

Selecciona una opci贸n
<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

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

鈴 Upload

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

馃摝 ProgressBar




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

<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

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