Instalación

Insertar en el código HTML

<link rel="stylesheet" href="https://unpkg.com/inuit-css@latest">

Instalar desde npm

npm install inuit-css

Descargar el zip o Fork enGithub

Variables generales

:root {
  --primary-color: #538BF4;
  --secondary-color: #5A6169;
  --link-color:  #538BF4;;
  --fontPrimary--color: #434343;
  --lightGrey-color: #E9ECEF;
  --darkGrey-color: #8FA4B8;
  --dark-color: #5A6169;
  --active-color: #007BFF;
  --success-color: #17C671;
  --warning-color: #FFB400;
  --info-color: #00B8D8;
  --error-color: #C4183C;
  --grid-maxWidth: 1200px; //Máximo tamaño del .container
  --grid-gutter: 1.6rem;
  --grid-columns: 16; //Número de columnas de la grilla
  --font-family: 'Roboto',-apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

Por defecto utilzamo la fuente de google Roboto, recuerde insertar el código de la fuente

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,500,500i,700,700i,900,900i">

Textos

EL tamaño de fuente por defecto root es de font-size: 62.5%; y su line-height: 1.5con esto los demás tamaños de fuente que hereden de root se calculan sobre 10, por ejemplo un span de 12px con rem queda span{ font-size: 1.2rem }

Por convención los tamaños de fuentes y espacios entre elemntos se calcular con múltiplo de 4

Título h1 - 4rem

Título h2 3.2rem

Título h3 2.4rem

Título h4 2.0rem

Título h5 1.6rem

Título h6 1.2rem

Parrafos

es una agencia creativa con sede en Bogotá, Colombia, especializada en POSICIONAMIENTO DIGITAL. Si quieres que tu marca, producto o servicio sea visto por tu público objetivo y se venda por internet, habla conmigo. ¡Yo sé cómo hacerlo! 👊👌👍 ’’ Cultura Ártico →. Nuestros principios, como personas y profesionales, son firmes y las aplicamos en nuestro día a día. Así logramos grandes relaciones de trabajo con nuestros clientes, ofreciendo un producto final al gusto de nuestros clientes y sus usuarios. Pensamos en el usuario Nos centramos en la investigación del mercado, el grupo demográfico de los usuarios de nuestros clientes y creamos diseños personalizados que proporcionan la experiencia de usuario más amigable y dinámica para ellos.

blockquote

Aqúi va código el con la etiqueta <code>

 <body class="container" >
   <!-- los comenterios van contenidos en la clase .nc  -->
   <p>las etiquetas con la clase .nt</p>
   <p>los atributos con la clase .na</p>
   <p>y las cadenas de texto con la clase .s</p>
 </body>

Sistema de grillas

El sistema de grillas esta basado en flexbox y por defecto esta configurado a 16 columnas, este número se puede personalizar en las variables generales. --grid-columns:

Agregar .row en el elemento contenedor.
Agrege elementos hijos con la clase .col o .col-* tantos como quiera
Cada columna debe llevar la clase con la cantidad de columnas que desea de 16, es decir que si se tiene col-12 divide el 100% del contenedor en 16 columnas y solo toma 12.
La columnas de tamaño flexible .col son aquellas que abarcan el restante de espacio, es decir que si se tienen 2 columnas de con la clase .col cada una abarca 6 y 6
Puede combinarse las columnas de tamaño flexible con las de tamaño fijo, por ejemplo .col-12, .col y .col lo que genera 3 columnas una de 12 y dos de 2
Las grillas estan basadas en first mobile, cuando se crea una columna por ejemplo .col-12 tomara 12 columnas en todos los dispositivos. Si se quiere dar un tamaño diferente en las diferentes resoluciones se debe especificar, ejemplocol-16 para móvilescol-m-10 para tablet y col-l-12 para disposivos de escritorio
Menor a 720px móviles, entre 720px y 1200px tablet y mayor a 1200px escritorio

.col-16 .col-m-12 .col-l-10

.col-16 .col-m-4 .col-l-6

.col-16

.col-m-8 .col-l-4

.col .col-m-8 .col-l-4

col-4

.col

.col-5

.col

.col-5

Distribución de grillas con flexbox

Centrar horizontal .justify-center Centrar vertical .align-center desde el container .row

.col-4

justify-content

Los elementos distribuyen uniformemente .justify-around

.col-4

Los elementos distribuyen en la línea .justify-between

.col-4

Los elementos se distribuyen de manera que el espaciado entre dos elementos (y el espacio hasta los bordes) sea igual .justify-evenly

.col-4

Los elementos distribuyen a la derecha .justify-end

.col-4

align-items

Los elementos se estiran para ocupar todo el espacio .align-stretch

.col-4

Los elementos se alinean abajo .align-end

.col-4

align-content

Esto alinea los elementos de un contenedor cuando hay espacio adicional en el eje transversal, de forma similar a cómo justify-content alinea los elementos individuales dentro del eje principal. .align-content-end .align-content-baseline .align-content-stretch

Pro tip En muchas ocaciones los elementos varian dependendiendo el dispositivo, igual que enlas columnas podemos variar agregando al final de cada clase *-my/o*-l ejemplo .justify-end .justify-center-m .justify-evenly-l

Listas

<dl> Título de la lista de definiciones
    <dd> Esta es una división de lista de definiciones.</dd>
</dl>

Título de la lista de definiciones: This is a definition list division.

<ol>
    <li> List Item 1</li>
    <li> List Item 2</li>
    <li> List Item 3</li>
</ol>

List Item 1
List Item 2
List Item 3

<ul>
    <li> List Item 1</li>
    <li> List Item 2</li>
    <li> List Item 3</li>
</ul>

List Item 1
List Item 2
List Item 3

<ul class="is-list-less">
    <li> List Item 1</li>
    <li> List Item 2</li>
    <li> List Item 3</li>
</ul>

List Item 1
List Item 2
List Item 3

Pro tip Para eliminar estilo de la lista basta con la clase is-list-less

Formulario

Los estilos de las campos viene por defecto exeptuando los checkbox y los radio, de resto solo con crearlos sin ninguna clase extra.

<label for="input-text"> Text Input</label>
<input id="input-text" placeholder="Ingresa tu nombre" type="text">

<input type="checkbox  id="check1"> <label for="check1">checkbox 1</label>

Inputs

Text Input

Password

Web

Tel input

Number Input

Error

Success

Disabled Text Input

Select menus

Select

Checkboxes

Checkbox 1

Checkbox 2

Checkbox 3

Radio buttons

Option 1

Option 2

Option 3

Textareas

Textarea

HTML5 inputs

Color input

Number input

Range input

Date input

Month input

Week input

Datetime input

Datetime-local input

Action buttons

Todos los elementos .button,[type="button"],[type="reset"],[type="submit"],button solo necesitan la clase del color del fondo dependiendo de su uso, esta se llama igual que los colores en las variables generales, ejemplo .success-button. Por defecto el color es el --primary-color
Para que los botones tengan un border radius añadimos la clase .radius-button
Si queremos que el boton no tenga relleno ouline-nombreColor ejemplooutline-primary y lo mismo para border .radius-button
Si necesitamos eliminar los estilos por defectoclass="button clear"

a button a button a button a button a button a button a button

a.button.clear

Tarjetas

Para las tarjetas solo se debe añadir la clase .card como contenedor y los elemntos header con un h2 y un contenedor con la clase .card-content para el texto y un footer al final

<div class="card">
    <img src="url" alt="title">
    <header>
        <h2> Mr Robot.</h2>
    </header>
    <div class="card-content">
        <p>Contenido</p>
    </div>
    <footer>
        <h2>Contenido footer</h2>
    </footer>
</div>

<div class="card-2">
    <header>
        <h3> Mr Robot.</h3>
    </header>
    <div class="card-content">
        <p>Contenido</p>
    </div>
    <footer>
        <h2>Contenido footer</h2>
    </footer>
</div>

Mr Robot.

A nisi ullam impedit molestiae, sapiente id, numquam accusantium eius cum, iste eum iusto blanditiis doloribus beatae. Molestias iste explicabo libero nam, voluptas harum ipsum quod velit enim. Quae, cupiditate? A nisi ullam impedit molestiae, sapiente id, numquam accusantium eius cum, iste eum iusto blanditiis doloribus beatae. Molestias iste explicabo libero nam, voluptas harum ipsum quod velit enim. Quae, cupiditate?

Mr Robot.

Alertas

Solo se debe añadir la clase dependiendo el uso que se necesite .alert-info, .alert-success, .alert-warning, .alert-error

¡Oye! Creo que deberías saber esto.

¡Yeah! ¡Todo esta bien!

¡Oye! Creo que deberías saber esto.

¡Oh no! Algo realmente malo sucedió!

Tabla

Para las tablas no es necesario ingresar ninguna clase adicional con las etiquetas de tablas es suficiente <table>con <thead> <tr> <th> body <tbody> <tr> <td> y footer <tfoot> <tr> <th>

Pro tip Es recomndable la tabla este contenida en un elemento con clase .table-container" para que en resoluciones pequeñas se muestre con un scroll en el horizontal

Table Caption
Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

Helpers

.is-shadow - elemento con sombra
.is-shadow-long - elemento con sombra más larga
.is-text-center - alinear texto al centro
.is-text-left - alinear texto a la izquierda
.is-text-right - alinear texto a la derecha
.is-text-uppercase - colocat texto en mayúsculas
.is-text-lowercase - colocar texto en minúsculas
.is-text-capitalize - Primera letra de cada palabra en mayúsculas
.is-full-screen - elemento se ajusta al tamaño de la pantalla
.is-full-width - elemento se ajusta al 100% del ancho
.is-fixed - fija un elemento
.is-paddingLess - elimina margen interta
.is-marginLess - elimina margen externa
.is-hidden - oculta el elemento
.is-list-less - elimina margenes y estilos por defecto de las listas
.hide-phone - oculta un elemento en móviles
.hide-tablet - oculta un elemento en tabletas
.m-* - margen en todos los lados
.m-a - margen auto
.m-t-* - margen arriba
.m-l-* - margen izquierda
.m-r-* - margen derecha
.m-b-* - margen abajo
.m-t-a-* - margin arriba abajo y auto a los lados
.m-t-l-* - margin arriba abajo y 0 a los lados
.p-* - margen interna en todos los lados
.p-a - margen interna auto
.p-t-* - margen interna arriba
.p-l-* - margen interna izquierda
.p-r-* - margen interna derecha
.p-b-* - margen interna abajo
.p-t-a-* - margen interna arriba abajo y auto a los lados
.p-t-l-* - margen interna arriba abajo y 0 a los lados

CSS Framework Inuit-CSS Ártico Digital 🐶

Instalación

Variables generales

Textos

Título h1 - 4rem

Título h2 3.2rem

Título h3 2.4rem

Título h4 2.0rem

Título h5 1.6rem

Título h6 1.2rem

Parrafos

Sistema de grillas

Distribución de grillas con flexbox

justify-content

align-items

align-content

Listas

Formulario

Tarjetas

Mr Robot.

Mr Robot.

Mr Robot.

Mr Robot.

Mr Robot.

Mr Robot.

Alertas

Tabla

Tags

Helpers