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.
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">
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);
};
Utiliza los tamaños que se adecuen a tu producto.
<div class="display">
Soy un .Display
</div>
<h1>
Soy un h1
</h1>
<h2>
Soy un h2
</h2>
<h3>
Soy un h3
</h3>
<h4>
Soy un h4
</h4>
Soy un p
<p>
Soy un p
</p>
<small>
Soy un small
</small>
<span class="caption">
Soy un caption
</span>
<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>
<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>
<a class="c-link" href="">Link</a>
<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>
<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>
<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>
<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>
<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>
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
This is some text and these words are italic
This is some text and these words are italic
This is some text and these words are italic
<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>
Hola soy un contenido
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>
# | First Name | Last Name | Language |
---|---|---|---|
1 | Some | One | English |
2 | Joe | Sixpack | English |
3 | Stu | Dent | Code |