Level CSS

Registro de cambios

Ver en Github Github 10 Latest • 0.6.0

0.6.0latest

Hemos corregido algunos bugs menores en el layout y grid.
Hemos añadido el componenteslideshow.

0.6.0beta

Hemos añadido el componente: calendar.
Hemos corregido algunos bugs menores.
Hemos añadido una nueva funcionalidadnavbar sticky.

0.4.7beta

Hemos rediseñado el componente: selectahora llamadolistbox.
Hemos corregido algunos bugs menores.

0.4.6beta

Hemos añadido un nuevo modulo: pagination

0.4.5Beta

Hemos resuelto pequeños bugs en el componente icon
Ajustamos la consistencia del componentebutton.
Hemos cambiado el diseño de los elementosinput
Hemos añadido 2 tamaños adicionales para los componentescheckboxyradio.
Hemos resuelto algunos problemas con el modulo delayout.

0.4.4Beta

Hemos sustituido la interacción con jquery porVanilla JS.
Corrección de bugs menores.
Alguna documentación ha sido actualizada.

0.4.3Beta

Añadimos el ficherolevel.min.js.
Optimización del sistemagrid.
Se resolvierón pequeños bugs de visualización en:
- icon burger
- acordeon
- group
- table

0.4.2beta

Integración de level conJquery.
Actualización del módulo:
- acordeon
- tab
- modal
- navbar
- group
- menus
Actualización del componente:
- toggle button
- button
- checkbox
- color
- dropdown
- progress
- radio
- range
Se resolvierón bugs en el módulobreadcrumb
Se resolvierón bugs en el módulonavbar
Se resolvierón bugs en el componentedropdown
Nuevo diseño de componentebutton

0.4.0beta

Contenido en proceso...

Level

Es un moderno frameworkCSS gratuito y de codigo abierto, basado en flexboxy grid layout.

npm install level-css-framework

mobile first

Adaptablea diferentes dispositivos y basado en la metodología mobile first.

flexbox y grid

Con todas las ventajas de trabajar flexbox y grid CSS3.

Vanilla JS

level no utiliza libreríasjavascriptde terceros.

sistema modular

Importa solo lo necesario, con nuestro increible sistema de importación

open source

level es gratuito yopen source que trabaja bajo la licenciaMIT.

Código limpio

Basado en etiquetas personalizadas que facilitan la integracion en tus proyectos.

Top screen

Centrado vertical a pantalla completa

Tu contenido siempre estará centrado.

Bottom screen

Formularios Impresionantes

Botones limpios.

Dropdowns

Este es un item

Este es otro item

Este es un enlace

Este es un item

Este es otro item

Este es un enlace

Este es un item

Este es otro item

Este es un enlace

Este es un item

Este es otro item

Este es un enlace

Progress bar impresionantes

Paginacion.

...

Barras de navegación

Buscar

Productos

Servicios

Contactos

Buscar

Productos

Servicios

Contactos

Componentes para redes sociales

Notificaciones simples.

Son flexibles
Son limpias
Son impresionantes

Tarjetas flexibles

John Smith

@JohnSmith

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et delectus, porro repellendus necessitatibus quaerat.

#level @levelCSS

10 • Feb • 2018 - 08:45 pm

Contribuidores

Te invitamos a colaborar en este atractivo proyecto.

Leonardo Quintana

Desarrollador, diseñador web y autor del proyecto.

Seguir Seguir

Ruslan López Carro

Desarrollador, diseñador web y Co fundador del proyecto.

Seguir Seguir

Level newsletter

Te informaremos cuando la V1 este disponible!

Introducción

Levelcuenta con las siguientes opciones, para que puedas comenzar a trabajar:

Realizando una instalación medianteNPM.
Clonando el repositorío deGithub
Intalación mediante nuestrosistema módular

Trabajando con SASS y NPM

npm install level-css-framework

Clonando el repositorío de Github

git clone https://github.com/JorgeAntrax/level.git

Primeros pasos

Si estas utilizando el pluginEmmeten tu editor de código, probablemente las siguientes meta-etiquetas se generen automatícamente, con excepción de la etiquetaviewport.

1.- Actualmente más del 70%de los sitios web existentes en internet son construidos bajo los últimos lineamientos que incorpora laW3C, por este motivo debes incluir en tu documentoindex.htmlla meta etiqueta doctype de html5.

<!DOCTYPE html>

2.- Es recomendable incluir la etiqueta para la codificación de caracteres, con el fín evitar símbolos extraños en tus proyectos.

<meta charset="utf-8">

3.- En los ultimos años la necesidad de adaptar tus proyectos a diferentes dispositivos es practicamenteobligatoríoincluir en tu plantillahtml5la meta etiqueta viewport.

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

4.- Lasfuentes tipograficasson aspecto muy importante en cualquier proyecto, realiza el enlace necesario para importar tus iconos y estilos de fuente.

Font-Awesome

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

Material Icons

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"/>

Open iconic

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css"/>

Añade level a tu proyecto.

Hemos implementado unsistema módularbastante sencillo que te permitirá importar a tu proyecto solamente lo necesario para trabajar.

para implementar este novedoso sistema necesitas crear el enlace alevel.min.jsantes de la etiqueta de cierre del elementobodyen tu documento index.html

<script src='https://cdn.jsdelivr.net/npm/level-css-framework@0.6.0/js/level.min.js'></script>

Una vez hecho esto solamente tienes que llamar en la etiqueta body, al atributo personalizado@include, el cúal recibe comovalor el nombre delcomponente o módulo que deseas incluir en el proyecto, respetando los siguientes puntos.

Cada valor debe estar separado por unespacio en blanco.
Los valores no pueden contener letras mayúsculas.

// Ejemplo: incluir toda la librería<body @include="level">  //Contenido del la página web</body>// Ejemplo: incluir el sistema de rejilla y un menu vetical<body @include="grid menu">  //Contenido del la página web</body>
// Ejemplo: incluir todos los componentes y un acordeon<body @include="components acordeon">  //Contenido del la página web</body>
// Ejemplo: incluir solamente los botones, un slideshow, y los tooltip<body @include="buttons slideshow tooltip">  //Contenido del la página web</body>

Nombre	Valor de atributo
`level.min.css`	level
`layout/_all.scss`	grid
`components/_all.scss`	components

Nombre	Valor de atributo
`components/blockquote.min.scss`	blockquote
`components/box.min.scss`	box
`components/buttons.min.scss`	buttons
`components/forms.min.scss`	forms
`components/calendar.min.scss`	calendar
`components/listbox.min.scss`	listbox
`components/chip.min.scss`	chip
`components/dropdown.min.scss`	dropdown
`components/icons.min.scss`	icons
`components/progress.min.scss`	progress
`components/range.min.scss`	range
`components/tags.min.scss`	tags
`components/color.min.scss`	color
`components/toggle.min.scss`	toggle
`components/tooltip.min.scss`	tooltip
`components/acordeon.min.scss`	acordeon
`components/breadcrumb.min.scss`	breadcrumb
`components/card.min.scss`	card
`components/group.min.scss`	group
`components/media.min.scss`	media
`components/mega.min.scss`	mega
`components/menu.min.scss`	menu
`components/message.min.scss`	message
`components/modal.min.scss`	modal
`components/navbar.min.scss`	navbar
`components/notify.min.scss`	notify
`components/social.min.scss`	social
`components/tables.min.scss`	tables
`components/_tabs.scss`	tabs

En cualquier caso si deseas importar toda la librería sin añadir atributos, puedes añadir directamente dentro de las etiquetas<head>el link directo.

Enlace JsDelivryGithub.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JorgeAntrax/level-css-framework@0.6.0/css/level.min.css">

EnlaceJsDelivryNPM(recomendado).

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/level-css-framework@0.6.0/css/level.min.css">

Plantilla básica

level incluye un archivoindex.htmlen la carpeta de descarga para que puedas comenzar de forma rápida,o puedes copiar y pegar en tu editor favorito estaestructura HTML..

<!DOCTYPE html>
<html>
  <head>
    <title>Documento</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  </head>
  <body @include="level">
    <mega class="is-light is-full-center">
      <center>
        <hgroup>
          <h1 class="is-text-danger">Felicitaciones</h1>
          <h3 class="is-subtitle">level se ha instalado correctamente en tu proyecto</h3>
        </hgroup>
        <button inactive class="is-success is-rounded is-large">Ultima versión 0.6.0</button>
      </center>
    </mega>
    <script src="https://cdn.jsdelivr.net/npm/level-css-framework@0.6.0/js/level.min.js"></script>
  <body>
</html>

Colores

Biblioteca de color con7 colores basey8 tonosdiferentes.

Mixin

Kimera incluye un mixin que te ayudará a crear tu biblioteca personalizada de colores

Elmixin requiere de4 parámetros:

Parámetro	Descripción
`$class`	Nombre de la clase para dicho color
`$base-color`	Color base
`$number-color`	Número de colores a generar, por defecto son 5.
`$interval-color`	Este valor controla el rango de color generado (se multiplica por el número de colores), por defecto es 2.

//Paleta de color rojo@include color-picker(danger, #FF0050, 3, 5);

El resultado sería algo como esto:

.color-danger-lighten-3.color-danger-lighten-2.color-danger-lighten-1.color-danger.color-danger-darken-1.color-danger-darken-2.color-danger-darken-3

Mapa de colores enSASS.

$colors (
   cloud: #FFF,
   light: #F5F5F5,
   black: #000,
   dark: #444,
   primary: #692ABF,
   info: #2264C8,
   success: #22C85C,
   warning: #FFD232,
   danger: #FF0050
);

Código que genera la biblioteca de color.

//Paleta de color rojo@each $class, $color in $colors {
   @include color-picker($class, $color, 4, 5);
}

Estructura de clases

.color- $color-base- $luminancia- $cantidad

Paleta de colores

color-black-lighten-1-lighten-2-lighten-3-lighten-4color-dark-lighten-1-lighten-2-lighten-3-lighten-4color-light-darken-1-darken-2-darken-3-darken-4color-primary-lighten-1-darken-1-lighten-2-darken-2-lighten-3-darken-3-lighten-4-darken-4color-info-lighten-1-darken-1-lighten-2-darken-2-lighten-3-darken-3-lighten-4-darken-4color-success-lighten-1-darken-1-lighten-2-darken-2-lighten-3-darken-3-lighten-4-darken-4color-warning-lighten-1-darken-1-lighten-2-darken-2-lighten-3-darken-3-lighten-4-darken-4color-danger-lighten-1-darken-1-lighten-2-darken-2-lighten-3-darken-3-lighten-4-darken-4

Variables

Las variables permiten controlar mejor el cambio de color cuando utilizas unpreprocesador CSS, kimera esta desarrollado utilizando sass.

Variable	Color HSLA	Color Hex	Muestra
`$cloud`	hsla(0, 0, 100, 255)	#FFFFFF	cloud
`$light`	hsla(0, 0, 96, 255)	#F5F5F5	`light`
`$dark`	hsla(0, 0, 26, 255)	#444444	`dark`
`$black`	hsla(0, 0, 0, 255)	#000000	`black`
`$primary`	hsla(267, 100, 38, 73)	#692ABF	`primary`
`$info`	hsla(216, 71, 47, 255)	#2264C8	`info`
`$success`	hsla(141, 71, 47, 255)	#22C85C	`success`
`$warning`	hsla(47, 100, 61, 255)	#FFD232	`warning`
`$danger`	hsla(341, 100, 50, 255)	#FF0050	`danger`

Importante

Los colores base pueden ser modificados en el archivo de

_variables.scss

Tipografía

Levelno incluyearchivos de alguna fuente tipografíca específica.

Estilos personalizables mediante el archivo_font-styles.scss

Estilos de fuente

Clase auxiliar	Descripción	Muestra
`.is-text-upper`	Texto en mayúsculas.	text upper
`.is-text-lower`	Texto en minúsculas.	TEXT LOWER
`.is-text-underline`	Texto subrayado.	underline
`.is-text-bolder`	Texto en negrita.	text bold
`.is-text-white`	`white`	text white
`.is-text-primary`	`primary`	text primary
`.is-text-info`	`info`	text info
`.is-text-success`	`success`	text success
`.is-text-warning`	`warning`	text warning
`.is-text-danger`	`danger`	text danger

Tamaño de encabezados:

Variable	Etiqueta	tamaño	Muestra
`$h6-size`	<h6>	0.7 em	Heading h6
`$h5-size`	<h5>	1 em	Heading h5
`$h4-size`	<h4>	1.3 em	Heading h4
`$h3-size`	<h3>	1.6 em	Heading h3
`$h2-size`	<h2>	1.8 em	Heading h2
`$h1-size`	<h1>	2 em	Heading h1

Tamaño de Texto

Variable	Clase auxiliar	Tamaño	Muestra
$text-x-small	`.is-tiny`	0.7 em	Lorem ipsum dolor sit amet.
$text-small	`.is-small`	0.8 em	Lorem ipsum dolor sit amet.
$text-default	`no aplica`	16px	Lorem ipsum dolor sit amet.
$text-medium	`.is-medium`	1.3 em	Lorem ipsum dolor sit amet.
$text-large	`.is-large`	1.6 em	Lorem ipsum dolor sit amet.
$text-x-large	`.is-jumbo`	2 em	Lorem ipsum dolor sit amet.

Importante

Los tamaños pueden ser modificados en el archivo_variables.scss

Alineación

Clase auxiliar	Descripción	Muestra
`no aplica`	Texto a la izquierda.	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe possimus praesentium, corrupti iure perspiciatis distinctio.
`.is-text-right`	Texto a la derecha	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia recusandae alias, accusantium numquam laudantium asperiores minima quasi placeat corrupti ducimus!
`.is-text-justify`	Texto justificado.	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem fuga exercitationem quia ut nobis officiis voluptas, quibusdam ex error libero enim dicta.
`.is-text-center`	Texto centrado.	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eum, pariatur. Harum minus, delectus.

Contenido

Level incluye algunas clases que te ayudarán en el proceso de construcción de tu website.

Añadiendo padding y margin

En algunas ocasiones necesitas añadir cierto espacio de separación en tu contenido o estructura, para estos casoslevelte proporciona algunas clases para añadirpaddingymarginde una manera muy sencilla.

Clase auxiliar	prefijo	valor	Unidad	Descripción	Ejemplo
`.padding`, `.margin`	`-`	`1, 2`o`3`	`rem`	`padding`o`margin`general de	`.padding-1`
`.padding`, `.margin`	`-v-`	`1, 2`o`3`	`rem`	`padding`o`margin`vertical de	`.margin-v-2`
`.padding`, `.margin`	`-h-`	`1, 2`o`3`	`rem`	`padding`o`margin`horizontal de	`.padding-h-3`
`.padding`, `.margin`	`-t-`	`1, 2`o`3`	`rem`	`padding`o`margin`top de	`.margin-t-1`
`.padding`, `.margin`	`-b-`	`1, 2`o`3`	`rem`	`padding`o`margin`bottom de	`.padding-b-2`
`.padding`, `.margin`	`-l-`	`1, 2`o`3`	`rem`	`padding`o`margin`left de	`.margin-l-3`
`.padding`, `.margin`	`-r-`	`1, 2`o`3`	`rem`	`padding`o`margin`right de	`.padding-r-1`

Añadiendo opacidad

Puede agregar opacidad a los contenedores utilizando las siguientes clases:

Clase auxiliar	Prefijo	Ejemplo	Descripción	muestra
`.opacity-`	`1`	`.opacity-1`	Añade una opacidad de0.1	Este es un texto con opacidad de 0.1
`.opacity-`	`2`	`.opacity-2`	Añade una opacidad de0.2	Este es un texto con opacidad de 0.2
`.opacity-`	`3`	`.opacity-3`	Añade una opacidad de0.3	Este es un texto con opacidad de 0.3
`.opacity-`	`4`	`.opacity-4`	Añade una opacidad de0.4	Este es un texto con opacidad de 0.4
`.opacity-`	`5`	`.opacity-5`	Añade una opacidad de0.5	Este es un texto con opacidad de 0.5
`.opacity-`	`6`	`.opacity-6`	Añade una opacidad de0.6	Este es un texto con opacidad de 0.6
`.opacity-`	`7`	`.opacity-7`	Añade una opacidad de0.7	Este es un texto con opacidad de 0.7
`.opacity-`	`8`	`.opacity-8`	Añade una opacidad de0.8	Este es un texto con opacidad de 0.8
`.opacity-`	`9`	`.opacity-9`	Añade una opacidad de0.9	Este es un texto con opacidad de 0.9

Generando sombras

Level te proporciona un conjunto de clases para añadir sombras a tus contenedores en 4 direcciones.

Clase auxiliar shadow	Prefijo	direccion	Ejemplo de clase auxiliar	Descripción de clase
`.is-shadow-`	`xs-`	`null, l, r, t, b`	`.is-shadow-xs-b`	Añade una sombra extra pqueña en la parte de abajo del contenedor
`.is-shadow-`	`s-`	`null, l, r, t, b`	`.is-shadow-s-t`	Añade una sombra pequeña en la parte de arriba del contenedor
`.is-shadow-`	`--`	`null, l, r, t, b`	`.is-shadow-l`	Añade una sombra normal en la parte izquierda del contenedor
`.is-shadow-`	`m-`	`null, l, r, t, b`	`.is-shadow-m-r`	Añade una sombra mediana en la parte derecha del contenedor
`.is-shadow-`	`l-`	`null, l, r, t, b`	`.is-shadow-l`	Añade una sombra grande all contenedor

Veamos un ejemplo para aclarar tus dudas:

.is-shadow-xs.is-shadow-s.is-shadow.is-shadow-m.is-shadow-l.is-shadow-xs-l.is-shadow-s-l.is-shadow--l.is-shadow-m-l.is-shadow-l-l.is-shadow-xs-r.is-shadow-s-r.is-shadow--r.is-shadow-m-r.is-shadow-l-r.is-shadow-xs-t.is-shadow-s-t.is-shadow--t.is-shadow-m-t.is-shadow-l-t.is-shadow-xs-b.is-shadow-s-b.is-shadow--b.is-shadow-m-b.is-shadow-l-b

Contenido centrado

Añadiendo la clase.is-wrapperaun contenedor, se aplica un limite de 1000px de anchura y centrado horizontal que son aplicables despues de768px.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo obcaecati exercitationem error aliquam ipsum ea deleniti illum culpa. Laborum est asperiores obcaecati ullam quod delectus nisi nulla quibusdam eos modi.

<div class="is-wrapper">•••</div>

Centrado absoluto

Añadiendo a un contenedor la clase.is-full-centerse aplican las propiedades de flexbox necesarías para centrar tu contenido.

<div class="is-full-center">•••</div>

Nota:

La clase.is-fluid-containergenera un contenedor a pantalla completa, pero no centra el contenido, util para crear secciones.

Sistema modular

Importa lo quenecesitaspara trabajar en tu proyecto.

Level tiene un total de 46 archivos.scss.

|----- level-master

|--------- level.scss  //Archivo scss principal
|--------- config.scss  //Archivo de configuración donde puedes renombrar clases y componentes
|--------- css|------------- level.css  //Archivo compilado css
|------------- level.min.css  //Archivo minificado css
|------------- todos los componentes compilados a css
|--------- js|------------- level.js  //Archivo principal javascript
|------------- level.min.js  //Archivo javascript minificado
|--------- scss|------------- base  (dependencias obligatorias)|----------------- base.min.scss  //Archivo con estilos generales y helpers
|------------- layout|----------------- layouts.min.scss  //Archivo que genera el sistema de rejilla y layouts
|------------- components|----------------- components.min.scss  //Archivo que unifica todos los componentes|----------------- todos los componentes del framework|--------- ts|------------- Ficheros typescript del framework

Todos los componentes de level, requieren de las dependencías obligatorías.

Implementación

Es recomendable que ignores los archivos compilados de la carpeta

cssy el archivolevel.scss, si vas a compilar solo lo necesario.

1.-crea un archivo con extensión.scsso.sass, en la carpeta de tu proyecto.

2.-Utiliza la directiva de sass@import, para importar lo que necesites de la siguiente manera.

// Archivos de importación obligatorios@import "tu-proyecto/level-master/scss/base/base.min.scss";@import "tu-proyecto/level-master/scss/layout/nombre del archivo.scss";
@import "tu-proyecto/level-master/scss/components/archivo.scss";

Ejemplo

Para importar el sistema de rejilla se hace de la siguiente manera.

// Importando el grid@import "tu-proyecto/level-master/scss/layout/_grid.scss";

Es todo, compilas y pruebas.

<row>
    <column class="is-primary">       column 1    </column>
    <column class="is-info">       column 2    </column>
    <column class="is-success">       column 3    </column>
    <column class="is-warning">       column 4    </column>
</row>

Importando solamente los botones.

// Archivo de buttons@import "tu-proyecto/level-master/scss/components/_buttons.scss";

Al importar cualquier componente puedes hacer uso de todas suspropiedades y características.

// Colores<button class="is-black">    @Content...</button>
<button class="is-dark">    @Content...</button>
<button class="is-primary">    @Content...</button>

Importando todos los componentes.

// Para importar todos los componentes simplemente llamas al fichero components.min.scss@import "tu-proyecto/level-master/scss/components/components.min.scss";

Dentro de cada carpeta que incluyelevelhay un archivo con el nombre decha carpeta y la extensión.min.scss, el cual se encarga de unificar todos los archivos de esa carpeta en un solo fichero.

Funciones

Las funciones enSASSnos permiten darle más funcionalidad a nuestroCSS.

Por el momentolevelsolo incluye 2 funciones:

grid(){...}
rem(){...}

Como cualquier función enSASSsimplemente llamas a la función como un valor.

propiedad css: funciónSass();

Función Grid

Permite controlar el número de columnas que necesites construir.

grid($columns,$total-columns);

$columns (numero de columnas que abarca un elemento).
$total-columns (total de columnas en el grid).
Si $total-columns no se especifíca por defecto su valor es 20

.caja {
   display: flex;
    /* Esta línea le dice a la clase .caja que tendrá un ancho del 50% */   flex-basis: grid(6, 12);
 }
.caja {
   display: flex;
    /* Esta línea le dice a la clase .caja que tendrá un ancho del 30% */   flex-basis: grid(6);
 }

Función Rem

Permite convertir la unidad depixelesen la unidad relativarem.

Por defecto la función se basa en un tamaño de fuente de16 px.

rem($size,$unity);

$size (medida a convertir en pixeles).
$unity (tamaño de fuente).
Si$unity no se especifica por defecto su valor es determinado por la variable $text-default del archivo _variables.scss

.caja {
   display: flex;
    /* Esta línea le dice a la clase .caja que tendrá un ancho de 300px en formato rem en base a 20px */   flex-basis: rem(300px, 20px);
 }
.caja {
   display: flex;
    /* Esta línea le dice a la clase .caja que tendrá un ancho de 300px en formato rem */   flex-basis: rem(300px);
 }

Animaciones

Kimera incluye una serie deanimacionesque podrás implementar mediante su clase asociada.

Te recomendamos la libreria de animaciones Animate.css .

Nombre	Clase	Descripción
zoom-in	`.zoom-in`	Zoom de entrada
zoom-out	`.zoom-out`	Zoom de salida
slide-up	`.slide-up`	deslizamiento de entrada hacía arriba
slide-down	`.slide-down`	deslizamiento de entrada hacía abajo
fade-in	`.fade-in`	Opacidad de entrada
fade-out	`.fade-out`	Opacidad de salida
process	`no aplica`	Animación del componente`process`.
preload	`no aplica`	Animación del componente`preload`.
preload-dinamic	`no aplica`	Animación del componente`preload`dinámico.

Mixins

Level incluye una serie demixinsque te ayudarán con algunas tareas básicas.

Nombre	Descripción
`@mixin since ()`	Mixin responsive apartir de cierta resolución
`@mixin only ()`	Mixin responsive soló en cierta resolución
`Mixin until ()`	Mixin responsive hasta cierta resolución
`@mixin color-picker ()`	Mixin que genera la paleta de colores.
`@mixin border-shadow ()`	Mixin que genera bordes mediante la propiedad`box-shadow`.

Adaptabilidad

Kimera utiliza 3mixin para diseño responsive:

Breakpoints soportados

mobile= screen < 480px
touch= screen < 768px
only-touch= screen > 480px < 767px
tablet= screen > 768px
only-tablet= screen > 769px < 1023px
desktop= screen > 1024px
only-desktop= screen > 1024px < 1299px
widescreen= screen > 1300px

// Revisa del lado izquierdo los breakpoints soportados.@include since ($breakpoint){
  display: flex;
}
@include until ($breakpoint){
  display: flex;
}
@include only ($breakpoint){
  display: flex;
}

Importante

Los breakpointsonly-touch, only-tablet, only-desktopson exclusivos del mixin only().
Cualquiera de los 3 mixins soportan valores, que no esten dentro de los breakpoints soportados.
Los breakpoints pueden ser personalizados modificando el archivo

_variables.scss

Uso de valores genericos.

Kimerapermite pasar como parametro valores genericos a los mixins.

@include since (560px){
  display: flex;
}
@include until (70rem){
  display: flex;
}
@include only (480px,650px){
  display: flex;
}

Mapa visual

Mobile screen > `300px`< `480px`	Touch screen < `767px`	Tablet screen > `768px`< `1023px`	Desktop screen > `1024px`< `1299px`	Widescreen screen > `1300px`
Mobile	$
Touch		$
Tablet			$
Desktop				$
Widescreen
$	Only-Touch	$
$		Only-Tablet	$
$			Only-Desktop	$

Visibilidad de contenido

Kimera incluye un conjunto de clases que te permitirán ocultarbloques de contenidoen cierto tipo de resoluciones.

Mobile screen > `300px`< `480px`	Touch screen < `767px`	Tablet screen > `768px`< `1023px`	Desktop screen > `1024px`< `1299px`	Widescreen screen > `1300px`
`.is-hidden`
Visible	`.is-hidden-touch`
Visible		`.is-hidden-tablet`
Visible			`.is-hidden-desktop`
Visible				`.is-hidden-widescreen`
Visible
Hidden	`.is-visible-touch`
Hidden		`.is-visible-tablet`
Hidden			`.is-visible-desktop`
Hidden				`.is-visible-widescreen`

Columnas

Conjunto de elementos que te permitirán distribuir el contenido de tu web.

20 Columnas

El sistema de cuadricula que implementakimera, por defecto tiene20columnas con un ancho minimo del5%.

1234567891011121314151617181920

Estructura

rowContenedor principal..
- columnContenedor secundarío.

El elementocolumndebe estar contenido dentro un contenedor padrerow, esta es la estructura estandar para contenedores con la propiedaddisplay: flex.

Column

<row>
    <column class="color-primary">column</column>
</row>

Level no añade a los contenedores<column>ningun espaciado gutter.

Espacio disponible

De manera predeterminada el contenedorcolumntoma el ancho de todo el espacio disponible en la filarow.

column 1

column 2

column 3

column 4

<row>
    <column class="color-primary">column 1</column>
    <column class="color-info">column 2</column>
    <column class="color-success">column 3</column>
    <column class="color-warning">column 4</column>
</row>

Diseño responsivo.

Kimera incluye un conjunto de clases que te permitirán controlar el ancho de un contenedor partiendo de ciertobreakpoint, utilizando la siguiente estructura:

.breakpoint-n

Dondenes el número de columnas que cubrirá el contenedor, ybreakpointes igual a:

mobile
touch
tablet
desktop
widescreen

	Mobile screen`<= 480px`	Touch screen`< 768px`	Tablet screen`< 1024px`	Desktop screen`< 1300px`	Widescreen screen`>= 1300px`
Prefijo de clase	`.mobile-`	`.touch-`	`.tablet-`	`.desktop-`	`.widescreen-`
Número de Columnas	20	20	20	20	20
Ejemplo	`.mobile-8`width: 40%;	`.touch-15`width: 75%;	`.tablet-12`width: 60%;	`.desktop-2`width: 10%;	`.widescreen-4`width: 20%;
Clase is half	`.mobile-is-half`width: 50%;	`.touch-is-half`width: 50%;	`.tablet-is-half`width: 50%;	`.desktop-is-half`width: 50%;	`.widescreen-is-half`width: 50%;
Clase is block	`.mobile-is-block`width: 100%;	`.touch-is-block`width: 100%;	`.tablet-is-block`width: 100%;	`.desktop-is-block`width: 100%;	`.widescreen-is-block`width: 100%;

Combinando las clases anteriormente mencionadas, podemos crear una estructura como la siguiente:

Tips:

Te recomendamos redimensionar la ventana de tu navegador para visualizar los cambios.

.touch-2 .tablet-is-half .desktop-5

.touch-8 .tablet-6 .desktop-is-half

.touch-is-half .tablet-4 .desktop-5

<row-mobile>
    <column class="color-primary touch-2 tablet-is-half desktop-5">.touch-2 .tablet-is-half .desktop-5</column>
    <column class="color-info touch-8 tablet-6 desktop-is-half">.touch-8 .tablet-6 .desktop-is-half</column>
    <column class="color-success touch-is-half tablet-4">.touch-is-half .tablet-4 .desktop-5</column>
</row-mobile>

Grid multilinea

Añadiendo el prefijo-multipleal contenedor principalrow, generará un salto de linéa si ya no hay espacio disponible en la fila.

.tablet-5 .desktop-12

.tablet-8

.tablet-7 .desktop-is-half

.tablet-is-half .desktop-5

.tablet-3 .desktop-5

column .is-block

<row-multiple>
    <column class="color-primary tablet-5 desktop-12">@content</column>
    <column class="color-info tablet-8">@content</column>
    <column class="color-success tablet-7 desktop-is-half">@content</column>
    <column class="color-warning tablet-is-half desktop-5">@content</column>
    <column class="color-black tablet-3 desktop-5">@content</column>
    <column class="is-block color-danger">@content</column>
</row-multiple>

Grid mobile

Añadiendo el prefijo-mobileal contenedor principalrow, evitará el salto de linéa del elementocolumn.

Col 1

Col 2

Col 3

Col 4

<row-mobile>
    <column class="color-primary mobile-is-half touch-is-half">Column 1</column>
    <column class="color-info">Col 2</column>
    <column class="color-success">Col 3</column>
    <column class="color-warning">Col 4</column>
</row-mobile>

Grid invertida

Añadiendo el prefijo-invertal contenedor principalrow.

Col 1

Col 2

Col 3

Col 4

<row-invert>
    <column class="color-primary">Column 1</column>
    <column class="color-info">Column 2</column>
    <column class="color-success">Column 3</column>
    <column class="color-warning">Column 4</column>
</row-invert>

Anidaciones

column 1

Nested 1

Nested 2

column 2

Nested 3

Nested 4

//columnas anidadas<row>    //columnas de color azul    <column>
        <column  class="color-info">column 1</column>       // Primera anidación       <row-mobile>
            <column class="color-info">Nested 1</column>
            <column class="color-info">Nested 2</column>
        </row-mobile>
    </column>   //columnas de color rojo    <column>
        <column class="color-danger">column 1</column>       // Primera anidación       <row-mobile>
            <column class="color-danger">Nested 1</column>
            <column class="color-danger">Nested 2</column>
        </row-mobile>
    </column>
</row>

Distribucion flexible

Algunas clases adicionales que te ayudarán con la distribución del contenido.

Esta sección es de utilidad para contenedores con la propiedaddisplay: flexoinline-flexno es exclusiva del sistema de rejilla, recuerda que las propiedades de flexbox se invierten cuando la propiedadflex-direction: columnse aplica a un contenedor.

Alineacion vertical

Level incluye 3 clases que te permiten alinear los contenedores verticalmente

.is-up
.is-center-v
.is-down

Añadiendo la clase.is-up

C1C2C3

<row class="is-up" >
    <column>C1</column>
    <column>C2</column>
    <column>C3</column>
</row>

Añadiendo la clase.is-center-v

C1C2C3

<row class="is-center-v ">
    <column>C1</column>
    <column>C2</column>
    <column>C3</column>
</row>

Añadiendo la clase.is-down

C1C2C3

<row class="is-down" >
    <column>C1</column>
    <column>C2</column>
    <column>C3</column>
</row>

Alineación centrada

Añadiendo al elementorowla claseis-center, los contenedorescolumnse centran de form vertical y horizontal.

C1C2C3

<row class="is-center" >
    <column>C1</column>
    <column>C2</column>
    <column>C3</column>
</row>

Alineacion horizontal

Level incluye 3 clases que te permiten alinear los contenedores horizontalmente, es necesario definir un ancho para el contenedorcolumnpara que se apliquen estas distribuciones, con motivos demostrativos añadimos la siguiente linea de codigo css a los siguientes ejemplos:

flex:0 1 auto;

.is-left
.is-center-h
.is-right

Añadiendo la clase.is-left

C1C2C3

<row class="is-left" >
    <column>C1</column>
    <column>C2</column>
    <column>C3</column>
</row>

Añadiendo la clase.is-center-h

C1C2C3

<row class="is-center-h ">
    <column>C1</column>
    <column>C2</column>
    <column>C3</column>
</row>

Añadiendo la clase.is-right

C1C2C3

<row class="is-right" >
    <column>C1</column>
    <column>C2</column>
    <column>C3</column>
</row>

Espacio disponible

Level incluye 2 clases que te permiten distribuir el espacio disponible del contenedorrowen sus contenedorescolumnhorizontalmente, estas dos clases funcionan también cuando el contenedorrowtiene la propiedadflex-direction: column.

.is-separated
.is-distributed

Añadiendo la clase.is-separated

C1C2C3

<row class="is-separated" >
    <column>C1</column>
    <column>C2</column>
    <column>C3</column>
</row>

Añadiendo la clase.is-distributed

C1C2C3

<row class="is-distributed" >
    <column>C1</column>
    <column>C2</column>
    <column>C3</column>
</row>

Alineación adaptativa

Levelpermite alternar la alineación de los contenedores dentro derowen diferentes resoluciones, añadiendo uno de los siguientes prefijos a las clases anteriormente mencionadas.

-touch
-tablet
-desktop
-widescreen

Clase	Ejemplo	Descripción
is-up	`.is-up-mobile`	Alineación hacía arriba apartir de
is-center-v	`.is-center-v-touch`	Centrado vertical apartir de
is-down	`.is-down-tablet`	Alineación hacía abajo apartir de
is-left	`.is-left-desktop`	Alineación a la izquierda apartir de
is-center-h	`.is-center-h-widescreen`	Centrado horizontal apartir de
is-right	`is-right-mobile`	Alineación a la derecha apartir de
is-center	`.is-center-touch`	Centrado apartir de
is-separated	`.is-separated-tablet`	Separar contenedores apartir de
is-distributed	`.is-distributed-desktop`	Distribuir contenedores apartir de

Maquetación

Importante

Te recomendamos visualizar esta sección en un ordenador para que puedas apreciar el resultado, por defecto en resoluciones menores a768pxtodos los contenedores tienen el 100% de ancho.

La organización de las diferentes secciones de una web es trabajo duro, este novedoso sistema de layout te permitira crear estructuras que solo eran posibles mediantejavascript.

Estructura

layoutContenedor principal
- headerCabecera del layout.
- NavbarBarra de navegación horizontal.
- sidebarMenu vertical.
- mainContenido principal del layout.
- footerPie del layout.

Plantilla estandar

HeaderNavbar

SidebarContent

Footer

// Layout basico<layout>
    <header class="color-primary">@content</header>
    <navbar class="color-warning">@content</navbar>
    <sidebar class="color-dark">@content</sidebar>
    <main class="color-info-lighten-4">@content</main>
    <footer class="color-danger">@content</footer>
</layout>

Plantilla de bloque

Añadiendo la clase.is-blockal contenedorlayoutse puede conseguir una distribución estilo bloque.

HeaderNavbarSidebarContentFooter

// Layout basico<layoutclass="is-block">
    <header class="color-primary">@content</header>
    <navbar class="color-warning">@content</navbar>
    <sidebar class="color-dark">@content</sidebar>
    <main class="color-info-lighten-4">@content</main>
    <footer class="color-danger">@content</footer>
</layout>

Plantilla estilo dashboard

Añadiendo clase .is-dashboard.

SidebarContent

<layoutclass="is-dashboard">
    <sidebar class="color-dark">@Content</sidebar>
    <main class="color-info-lighten-4">@content</main>
</layout>

Plantilla dashboard derecho

Añadiendo la clase.is-rtla unlayoutcon la claseis-dashboard.

ContentSidebar

<layoutclass="is-dashboard is-rtl">
    <sidebar class="color-dark">@Content</sidebar>
    <main class="color-info-lighten-4">@content</main>
</layout>

Navbar + dashboard

añadiendo el móduloNavbardentro del contenedorlayout.

Navbar

SidebarContent

<layoutclass="is-dashboard">
    <navbar class="color-warning">Navbar</navbar>
    <sidebar class="color-dark">Sidebar</sidebar>
    <main class="color-info-lighten-4">Content</main>
</layout>

Sidebar doble

Añadiendo la claseis-double-sidebaral contenedorlayout, y sus respectivos elementossidebar.

Navbar

Sidebar AContentSidebar B

<layoutclass="is-double-sidebar">
    <navbar class="color-warning">Navbar</navbar>
    <sidebar class="color-dark">Sidebar A</sidebar>
    <main class="color-info-lighten-4">Content</main>
    <sidebar class="color-dark">Sidebar B</sidebar>
</layout>

Navbar anidado

Loslayouty sus contenedores soportan perfectamente la anidación de forma independiente.

SidebarNavbar

<layoutclass="is-dashboard">
    <sidebar class="color-dark">Sidebar</sidebar>
    <main class="color-info-lighten-4">
        <navbar class="color-warning">Navbar anidado</navbar>
    </main>
</layout>

Ajustando el ancho del sidebar

El componentelayoutesta construido utilizandoGrid CSS3.

Por defecto el ancho del sidebar es de un20%y el contenedormaintiene el espacio restante, kimera incluye 3 clases adicionales para modificar el tamaño del sidebar:

is-tiny-sidebarasigna un ancho del 5%.
is-small-sidebarasigna un ancho del 15%.
is-medium-sidebarasigna un ancho del 25%
is-large-sidebarasigna un ancho del 30%

Estas clases no tienen soporte para el elementolayoutque tenga asignada la claseis-double-sidebar.

puedes modificar estos valores sobreescribiendo el estilo por defecto de la siguiente forma:

.mi-layout{
    grid-template-columns:20% auto;/*los porcentajes corresponden al ancho del sidebar, el contenedor main toma todo el espacio restante*/
}

Puedes modificar el layout con la claseis-double-sidebar de la siguiente forma:

.mi-layout{
    grid-template-columns:20% auto 20%;/*los porcentajes en rojo corresponden al ancho de los sidebar*/
}

tinycontent

<layoutclass="is-dashboard is-tiny-sidebar">
    <sidebar class="color-dark">Small</sidebar>
    <main class="color-info-lighten-4">@content</main>
</layout>

Smallcontent

<layoutclass="is-dashboard is-small-sidebar">
    <sidebar class="color-dark">Small</sidebar>
    <main class="color-info-lighten-4">@content</main>
</layout>

Sidebarcontent

<layoutclass="is-dashboard">
    <sidebar class="color-dark">Default</sidebar>
    <main class="color-info-lighten-4">@content</main>
</layout>

Mediumcontent

<layoutclass="is-dashboard is-medium-sidebar">
    <sidebar class="color-dark">Medium</sidebar>
    <main class="color-info-lighten-4">@content</main>
</layout>

Largecontent

<layoutclass="is-dashboard is-large-sidebar">
    <sidebar class="color-dark">Large</sidebar>
    <main class="color-info-lighten-4">@content</main>
</layout>

Blockquotes

Pequeño componenteflexiblepara realizar citas textuales, bloques de comentarios, etc.

Estructura

Utilizando la etiqueta nativa<blockquote>.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, Tenetur saepe.

<blockquote>
  <p>
    Lorem ipsum dolor sit amet,
    <underline>consectetur adipisicing</underline>
    elit, Tenetur saepe.
  </p>
</blockquote>

Añadiendo iconos

El elementoblockquote, posee las siguientes clases personalizadas:

.is-icon-left
.is-icon-right

Dichas clases posicionan el icono que este definido dentro del contenedor.

Icono a la Izquierda.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, Tenetur saepe.

<blockquote class="is-icon-left">
  <icon>
    <i class="fa fa-quote-left"></i>
  </icon>
  <p>
    Lorem ipsum dolor sit amet,
    <underline>consectetur adipisicing</underline>
    elit, Tenetur saepe.
  </p>
</blockquote>

Icono a la Derecha.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, Tenetur saepe.

<blockquote class"is-icon-right">
  <icon>
    <i class="fa fa-quote-right"></i>
  </icon>
  <p>
    Lorem ipsum dolor sit amet,
    <underline>consectetur adipisicing</underline>
    elit, Tenetur saepe.
  </p>
</blockquote>

Citas y direcciones

Haciendo uso de las etiquetas html5citeyaddress

Lorem ipsum dolor sit amet, consectetur adipisicing elit, Tenetur saepe.
(John Smith, 2017)
, Ciudad de méxico.

<blockquote class="is-icon-left">
  <icon>
    <i class="fa fa-quote-left"></i>
  </icon>
  <p>
    Lorem ipsum dolor sit amet,
    <underline>consectetur adipisicing</underline>
    elit, Tenetur saepe.
  </p>
  <right>
    <cite>(John Smith, 2017)</cite>
    <address>, Ciudad de méxico.</address>
  </right>
</blockquote>

Colores

Añadiendo al elementoblockquoteuna de las siguientes clases de color:

.is-dark
.is-primary
.is-info
.is-success
.is-warning
.is-danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit, Tenetur saepe.

<blockquote class="is-icon-left is-dark">
  <icon>...</icon>
  <p>
    Lorem ipsum dolor sit amet,
    <underline>consectetur adipisicing</underline>
    elit, Tenetur saepe.
  </p>
</blockquote>
<blockquote class="is-icon-left is-primary">
  <icon>...</icon>
  <p>
    Lorem ipsum dolor sit amet,
    <underline>consectetur adipisicing</underline>
    elit, Tenetur saepe.
  </p>
</blockquote>
<blockquote class="is-icon-left is-info">
  <icon>...</icon>
  <p>
    Lorem ipsum dolor sit amet,
    <underline>consectetur adipisicing</underline>
    elit, Tenetur saepe.
  </p>
</blockquote>
<blockquote class="is-icon-left is-success">
  <icon>...</icon>
  <p>
    Lorem ipsum dolor sit amet,
    <underline>consectetur adipisicing</underline>
    elit, Tenetur saepe.
  </p>
</blockquote>
<blockquote class="is-icon-left is-warning">
  <icon>...</icon>
  <p>
    Lorem ipsum dolor sit amet,
    <underline>consectetur adipisicing</underline>
    elit, Tenetur saepe.
  </p>
</blockquote>
<blockquote class="is-icon-left is-danger">
  <icon>...</icon>
  <p>
    Lorem ipsum dolor sit amet,
    <underline>consectetur adipisicing</underline>
    elit, Tenetur saepe.
  </p>
</blockquote>

Box

El componenteboxes unsimple contenedor flexiblecon padding y sombra.

Implementación

Este componente por defecto aplica la propiedadflex-direction: column.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, aliquid.

// flexible Box component<box>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, aliquid.</h2>
</box>

Puedes aplicar la biblioteca de color que incluye kimera, para darle más estilos.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, aliquid.

<box class="color-info">
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, aliquid.</h2>
</box>

Buttons

El típico botónhtml5de manera predeterminada no tienes que añadir ninguna ninguna clase.

<button>button</button>

La clase auxiliar.buttonextiende los estilos del elementobuttona otros elementos html soportados:

<a>
<div>
Elementos de formulario
- <input type="button">
- <input type="submit">
- <input type="reset">
<label>
<span>
<strong>

linkbutton

// Button con diferentes tags html<button>button</button>
<a class="button">link</a>
<span class="button">button</span>
<input type="submit" class="button" value="Submit"/>

Colores

<button class="is-light">Light</button>
<button class="is-black">black</button>
<button class="is-dark">dark</button>
<button class="is-primary">primary</button>
<button class="is-info">info</button>
<button class="is-success">success</button>
<button class="is-warning">warning</button>
<button class="is-danger">danger</button>

Color invert

El prefijoinvertse añade a la clase base.

// Estilo invertido<button class="is-dark-invert">invert</button>
<button class="is-primary-invert">invert</button>
<button class="is-info-invert">invert</button>
<button class="is-success-invert">invert</button>
<button class="is-warning-invert">invert</button>
<button class="is-danger-invert">invert</button>

Color outline

El prefijooutlinese añade a la clase base.

// Estilo outline<button class="is-dark-outline">outline</button>
<button class="is-primary-outline">outline</button>
<button class="is-info-outline">outline</button>
<button class="is-success-outline">outline</button>
<button class="is-warning-outline">outline</button>
<button class="is-danger-outline">outline</button>

Color inverse

El prefijoinversese añadea la clase base.

// Estilo inverse<button class="is-dark-inverse">inverse</button>
<button class="is-primary-inverse">inverse</button>
<button class="is-info-inverse">inverse</button>
<button class="is-success-inverse">inverse</button>
<button class="is-warning-inverse">inverse</button>
<button class="is-danger-inverse">inverse</button>

Estados

Normal

Hover

Active & focus

Disabled`[disabled]`

Inactive`[inactive]`

Iconos

Haciendo uso del atributo personalizadois-iconpuedes generar un boton de tipo icono.

// Sintaxis<button is-icon>
  <icon>
   @Content...
  </icon>
</button>

// Sintaxis<button is-icon>
  <icon>
    @Content...
  </icon>
  GitHub
</button>

// Sintaxis<button is-icon>
  GitHub
  <icon>
    @Content...
  </icon>
</button>

Atención

El elemento<button>respeta los espacios como lo hace la etiquetapreutiliza esta tecnica para separar tus iconos del texto del botón.

Rounded

Creando botones redondeados añadiendo la clase.is-rounded

// Sintaxis<button class="is-rounded">circle</button>
<button is-icon class="is-rounded">
  <icon>...</icon>
</button>

Tamaños

Utilizando las siguientes clases, podemos modificar el tamaño del elementobutton.

.is-small
.is-medium
.is-large

// Tamaños<button is-icon class="is-small">small</button>
<button is-icon>default</button>
<button is-icon class="is-medium">medium</button>
<button is-icon class="is-large">large</button>

<button class="is-small">
  <icon class="is-small">...</icon>
  @Content
</button>
<button>
  <icon>...</icon>
  @Content
</button>
<button class="is-medium">
  <icon class="is-medium">...</icon>
  @Content
</button>
<button class="is-large">
  <icon class="is-large">...</icon>
  @Content
</button>

Block button

La clase.is-blockte permitirá crear botones estilo bloque.

<button class="is-dark is-block">Block button</button>

Buttons group

Utilizando el elementobuttonspodemos crear grupos de botones.

// Sintaxis Button group
<buttons>
  <button>Left</button>
  <button>Center</button>
  <button>Right</button>
</buttons>

Addons

Al añadir la clase.is-addonsal elementobuttonsse elimina la separación de los botones.

// Sintaxis Button group
<buttons class="is-addons">
  <button>Left</button>
  <button>Center</button>
  <button>Right</button>
</buttons>

Redondeando grupos

Haciendo uso de la clase.is-roundedy la claseis-addonstambien podemos crear grupos redondeados.

// Sintaxis Button group addons
<buttons class="is-addons is-rounded">
  <button>Left</button>
  <button>Center</button>
  <button>Right</button>
</buttons>

Floating Buttons

<button is-icon type="floating" class="is-small">
  <icon>
    <i class="fa fa-github"></i>
  </icon>
</button>
<button is-icon type="floating" >
  <icon>
    <i class="fa fa-github"></i>
  </icon>
</button>
<button is-icon type="floating" class="is-medium">
  <icon>
    <i class="fa fa-github"></i>
  </icon>
</button>
<button is-icon type="floating" class="is-large">
  <icon>
    <i class="fa fa-github"></i>
  </icon>
</button>

Floating Action Group

Componente que normalmente se posiciona en la parte inferior derecha de la pantalla.

Estructura:

fabContenedor principal.
- Elemento con la clase.is-toggle-fabque accionará el menu flotante.
- fabmenuContenedor del menu flotante.
  - El elementofabmenunecesita una de las siguientes clases indicando la dirección de despliegue:.is-up, .is-down, .is-left, .is-right.
  - Items del menu, por lo regular botones del tipoflotante.
  - La clase.is-visiblese añade dinamicamente al elementofabmenupara mostrar su contenido.

ResultadoHTML

<fab>  // Button toggle  <button is-icon type="floating" class="is-toggle-fab is-medium">
    <icon>
      <i class="fa fa-plus"></i>
    </icon>
  </button>  // Fab menu    <fabmenu class="$dirección ">
    <button is-icon type="floating" class="is-success">
      <icon>
        <i class="fa fa-bookmark"></i>
      </icon>
    </button>
    <button is-icon type="floating" class="is-warning">
      <icon>
        <i class="fa fa-pencil"></i>
      </icon>
    </button>
    <a is-icon type="floating" class="button is-primary">
      <icon>
        <i class="fa fa-bolt"></i>
      </icon>
    </a>
  </fabmenu>
</fab>

Chips

Las fichas normalmente son utilizadas para representar pequeñosbloquesde información.

AppleAndroidLinuxMicrosoft

<chip>  //Content</chip>

Ficha de contacto

Para crear un ficha de contacto solamente tienes que añadir dentro del contenedorchipun elementoimg.

John Smith chip

Jane Doe

<chip>
  <img src="https://pexels.com">
  <chiptext>John Smith</chiptext>
</chip>
<chip>
  <img src="https://pexels.com">
  <chiptext>Jane Doe</chiptext>
  <close></close>
</chip>

Colores

Añadiendo una de las siguientes clases de color al elementochip.

DarkPrimaryInfoSuccessWarningDanger

<chip class="is-dark">
  <chiptext>Dark</chiptext>
  <close></close>
</chip>
<chip class="is-primary">
  <chiptext>Primary</chiptext>
  <close></close>
</chip>
<chip class="is-info">
  <chiptext>Info</chiptext>
  <close></close>
</chip>
<chip class="is-success">
  <chiptext>Success</chiptext>
  <close></close>
</chip>
<chip class="is-warning">
  <chiptext>Warning</chiptext>
  <close></close>
</chip>
<chip class="is-danger">
  <chiptext>Danger</chiptext>
  <close></close>
</chip>

Dropdowns

El componentedropdownes un simple contenedor en el cual colocar el botón que accionará el menú y el elementodropmenu.

Estructura

dropdownContenedor principal.
- .is-toggle-dropdownClase que se asigna al elemento que accionará del menu.
- dropmenuContenedor del menu.
  - drop-itemElemento individual del menu (opcional).
  - Item con la clase.is-titleindica que es un titulo dentro del menú.
  - dividerUna linea horizontal para separar los items del menu.

Este es un item

Este es otro item

Este es un enlace

// dropdown<dropdown>
  <button class="is-toggle-dropdown">
    Dropdown
    <icon><i class="fa fa-angle-down"></i></icon>
  </button>
  <dropmenu>
    <drop-item>Este es un item</drop-item>
    <drop-item>Este es otro item</drop-item>
    <divider>
    <drop-item>
      <a href="#">Este es un enlace</a>
    </drop-item>
  </dropmenu>
</dropdown>

Dropdown hover

Añadiendo la clase.is-hoverableal contenedordropdownel menu semuestra mediante la pseudo-clase:hover.

Este es un item

Este es otro item

Este es un enlace

// dropdown<dropdown class="is-hoverable">  //Content</dropdown>

Visibilidad del menu

De manera predeterminada el elementodropmenupermaneceoculto, añadiendo la claseis-visibleal menú, se aplica la propiedad cssdisplay: block.

Este es un item

Este es otro item

Este es un enlace

// dropdown<dropdown>
  <button class="is-toggle-dropdown">
    Dropdown
    <icon><i class="fa fa-angle-down"></i></icon>
  </button>
  <dropmenu class="is-visible">
    <drop-item>Este es un item</drop-item>
    <drop-item>Este es otro item</drop-item>
    <divider>
    <drop-item>
      <a href="#">Este es un enlace</a>
    </drop-item>
  </dropmenu>
</dropdown>

Añadiendo titulos

puedes generar titulos añadiendo al clase.is-titlea undrop-itemdentro del menu, también puedes añadir separadores mediante la etiqueta personalizadadivider.

Este es un titulo

Este es un item

Este es otro item

Este es otro titulo

Este es un enlace

// dropdown<dropdown>
  <button class="is-toggle-dropdown">
    Dropdown con titulos
    <icon><i class="fa fa-angle-down"></i></icon>
  </button>
  <dropmenu>
    <item class="is-title">Este es un titulo</drop-item>
    <drop-item>Este es un item</drop-item>
    <drop-item>Este es otro item</drop-item>
    <item class="is-title">Este es otro titulo</drop-item>
    <drop-item>
      <a href="#">Este es un enlace</a>
    </drop-item>
  </dropmenu>
</dropdown>

Alineación del menu

Añadiendo una de las siguientes clases podemos alinear al elementodropmenu:

.is-upDespliega el menu hacia arriba.
.is-rightDespliega el menu desde la derecha.

Item Drop 1

Item Drop 2

Item Drop 3

Item Drop 1

Item Drop 2

Item Drop 3

// dropdown<dropdown>
  <button class="is-toggle-dropdown">Left bottom</button>
  <dropmenu>
    <drop-item>Item Drop 1</drop-item>
    <drop-item>Item Drop 2</drop-item>
    <drop-item>Item Drop 3</drop-item>
  </dropmenu>
</dropdown>
<dropdown>
  <button class="is-toggle-dropdown">Right bottom</button>
  <dropmenu class="is-right">
    <drop-item>Item Drop 1</drop-item>
    <drop-item>Item Drop 2</drop-item>
    <drop-item>Item Drop 3</drop-item>
  </dropmenu>
</dropdown>

Item Drop 1

Item Drop 2

Item Drop 3

Item Drop 1

Item Drop 2

Item Drop 3

// dropdown<dropdown>
  <button class="is-toggle-dropdown">Left up</button>
  <dropmenu class="is-up">
    <drop-item>Item Drop 1</drop-item>
    <drop-item>Item Drop 2</drop-item>
    <drop-item>Item Drop 3</drop-item>
  </dropmenu>
</dropdown>
<dropdown>
  <button class="is-toggle-dropdown">Right up</button>
  <dropmenu class="is-right is-up">
    <drop-item>Item Drop 1</drop-item>
    <drop-item>Item Drop 2</drop-item>
    <drop-item>Item Drop 3</drop-item>
  </dropmenu>
</dropdown>

Items activos

Añadiendo la clase.is-activea un elementodrop-item.

Este item esta seleccionado

Este item no esta seleccionado

Este es un enlace

// dropdown<dropdown>
  <a href="#" class="is-toggle-dropdown">
    Seleccionar
    <icon>...</icon>
  </a>
  <dropmenu>
    <item class="is-active">Este item esta seleccionado</drop-item>
    <drop-item>Este item no esta seleccionado</drop-item>
    <drop-item>
    <divider><divider>
      <a href="#">Este es un enlace<a>
    </drop-item>
  </dropmenu>
</dropdown>

Tips

Puedes añadir separadores dentro del menu añadiendo la etiqueta personalizada<divider>.

Multi tareas

Sólo basta con añadir más elementos dentro del contenedordropdown, y hacer una correcta referencía entre el elemento que accionará el menu, y el elementodropmenu.

Este es un item

Este es otro item

Este es un enlace

// dropdown<dropdown>
  <button>Button</button>
  <button class="is-toggle-dropdown">
    <icon>...</icon>
  </button>
  <dropmenu class="is-up is-right">
    <drop-item>Este es un item</drop-item>
    <drop-item>Este es otro item</drop-item>
    <button class="is-info">Este es un botón</button>
  </dropmenu>
</dropdown>

Versatilidad

Kimera no te limita a una estructura, puedes añadir lo que tu quieras dentro de este componente.

Simple LoginForgot Password?

<dropdown>
  <a href="#" class="is-toggle-dropdown">
    Iniciar sesión<icon>•••</icon>
  </a>
  <dropmenu>
    <center class="color-light padding-1">Simple Login</center>
    <form>
      <field>
        <input type="text" class="input is-danger is-material" placeholder="Username">
      </field>
      <field>
        <input type="password" class="input is-danger is-material" placeholder="Password">
      </field>
      <field>
        <button type="submit" class="is-danger is-block">Lets Go</button>
      </field>
    </form>
    <center class="is-tiny">Forgot Password?</center>
  </dropmenu>
</dropdown>

Tips

Puedes incluso añadir una rejilla dentro del contenedordropmenuy crear una distribución completamente flexible.

Tips

Puedes restringir laaltura máximadel contenedordropmenua200px, añadiendo la clase.is-drop-scrolling, la cual mostrará un scroll vertical.

Iconos

<icon>
  <i class="fa fa-home">
</icon>

Iconos personalizados

Puedes crear el típico icono dehamburguesa generando la siguiente estructura.

<burger></burger>

Añadiendo la clase.is-activeel icono se transforma mediante una pequeña animación.

<burger class="is-active"></burger>

Puedes añadir la clase.is-arrow-left generando el siguiente efecto.

<burger class="is-arrow-left"></burger>

Puedes añadir la clase.is-arrow-right generando el siguiente efecto.

<burger class="is-arrow-right"></burger>

Puedes modificar el color del icono desde CSS de la siguiente forma:

burger span {
  background-color :red ;
 }

Icono de menúsecundarío.

Puedes crear el típico icono de menúsecundario generando la siguiente estructura.

<ellipsis></ellipsis>

Añadiendo la clase.is-activeel icono se transforma mediante una pequeña animación.

<ellipsis class="is-active"></ellipsis>

Puedes añadir la clase.is-arrow-left generando el siguiente efecto.

<ellipsis class="is-arrow-left"></ellipsis>

Puedes añadir la clase.is-arrow-right generando el siguiente efecto.

<ellipsis class="is-arrow-right"></ellipsis>

Puedes modificar el color del icono desde CSS de la siguiente forma:

ellipsis span {
  background-color :red ;
 }

Icon close

Mediante la etiqueta personalizadaclosepuedes crear el típico icono de "×".

<close></close>

Close Close con icono

<tag>
  Close 
  <close></close>
</tag>
<tag>
  Close con icono 
  <close>
    <i class="fa fa-times-circle"></i>
  </close>
</tag>

Tips

Cuando no añades ningun icono externo al elementocloseautomáticamente se dibuja una "×" mediante el uso del pseudo-elemento::after, con la ayuda del selector:empty.

Tamaños

Los tamaños de los iconos son aplicables utilizando las siguientes clases.

.is-small
.is-medium
.is-large
.is-jumbo

<icon class="is-small">
  <i class="fa fa-home">
</icon>
<icon>
  <i class="fa fa-home">
</icon>
<icon class="is-medium">
  <i class="fa fa-home">
</icon>
<icon class="is-large">
  <i class="fa fa-home">
</icon>
<icon class="is-jumbo">
  <i class="fa fa-home">
</icon>

Dimensiones

El color de fondo en el icono es unicamente con fines demostrativos.

Estas dimensiones no son aplicable a los iconos personalizadosburger,ellipsis.

Clase	Tamaño del contenedor	tamaño del icono
`is-small`	`1rem x 1rem`	0.7rem
`Ninguno`	`1.5rem x 1.5rem`	1rem
`is-medium`	`1.5rem x 1.5rem`	1.3rem
`is-large`	`2rem x 2rem`	1.5rem
`is-jumbo`	`2rem x 2rem`	2rem

Toggle Buttons

Hemos actualizado este componente ysimplificadosu sintaxis, mediante un pequeñoscriptdejavascript.

Proceso de implementación

La manera de construir este tipo decomponenteera añadir los siguientes elementoshtml5.

Elemento de tipoinput checkboxcon su respectivoid.
Elementolabelenlazado mediante el atributofor.

Apartir de la versión0.4.4solamente tienes que añadir nuestro tag personalizadotoggle.

Que ha cambiado

Solamente necesitas una linea de códigohtml5,javascripthace el resto.

Kimera0.4.3

<toggle>
  <input type="checkbox" id="toggle-old"/>
  <label for="toggle-old"></label>
<toggle>

Kimera0.4.4

<toggle id="toggle-new"><toggle>

Implementación sin JS

si decides no utilizarjavascriptcon kimera, puedes hacer la implementación de la siguiente manera y obtendrás el mismo resultado.

<toggle>
  <input type="checkbox" id="toggle-old"/>
  <label for="toggle-old"></label>
<toggle>

Importante

Javascriptse encarga de generar dinamicamente el elementoinputylabelenlazados por su id, si tomas la desición de implementar otroframework JSutiliza el método de la Versión sin javascript.

Importante

Los atributos definidos en el elementotoggleson pasados al elementoinput checkboxque se generá dinámicamente.

Uso de atributos

El elementotogglesoporta los atributos más comúnes, utilizados por un elemento de tipocheckbox.

id
name
form
required
checked

Observa el siguiente ejemplo

Tú código html

<toggle id="id1"name="demo" form="login" checked><toggle>

Código en el inspector

<input type="checkbox" id="id1"name="demo" form="login"  checked/>

Colores

El componentetoggleincluye 6 colores base, añadiendo una de las siguientes clases:

is-cloud
is-primary
is-info
is-success
is-warning
is-danger

<toggle class="is-cloud" id="toggle"></toggle>
<toggle class="is-primary" id="toggle"></toggle>
<toggle class="is-info" id="toggle"></toggle>
<toggle class="is-success" id="toggle"></toggle>
<toggle class="is-warning" id="toggle"></toggle>
<toggle class="is-danger" id="toggle"></toggle>

Tamaños

Añadiendo una de las siguientes clases al elementotoggle.

.is-small
.is-medium
.is-large

<toggle class="is-small" id="toggle"></toggle>

<toggle class="is-medium" id="toggle"></toggle>

<toggle class="is-large" id="toggle"></toggle>

Toggle group

Pordefectoel elementotoggletiene undisplay: flex, utilizando el contenedortogglespodemos crear grupos de elementostoggleen linea ycentrados verticalmente.

// Toggle group<toggles>
  <toggle></toggle>
  <toggle></toggle>
  <toggle></toggle>
</toggles>

Estado`[disabled]`

El atributo[disabled]es soportado por el contenedortogglesy por el elementotoggle.

Grupo con el atributo[disabled].

<toggles disabled>
  <toggle></toggle>
  <toggle></toggle>
  <toggle></toggle>
</toggles>

Elemento con el atributo[disabled].

<toggles>
  <toggle></toggle>
  <toggle disabled></toggle>
  <toggle></toggle>
</toggles>

Range

Elemento de tipocontrol slider.

Hemos actualizado este componente ysimplificadosu sintaxis, mediante un pequeñoscriptdejavascript.

Proceso de implementación

La manera de construir este tipo decomponenteera añadir los siguientes elementoshtml5.

Elemento de tipoinput rangecon su respectivoid.
Elementolabelenlazado mediante el atributofor.

Apartir de la versión0.4.4solamente tienes que añadir nuestro tag personalizadorange.

Que ha cambiado

Solamente necesitas una linea de códigohtml5,javascripthace el resto.

Kimera0.4.3

<range>
  <input type="range" id="range-old" value="25"/>
  <label for="range-old"></label>
<range>

Kimera0.4.4

<range id="range-new" value="25"><range>

Implementación sin JS

si decides no utilizarjavascript, puedes hacer la implementación de la siguiente manera y obtendrás el mismo resultado.

<range>
  <input type="range" id="range-old" value="25"/>
  <label for="range-old"></label>
<range>

Importante

Javascriptse encarga de generar dinamicamente el elementoinputylabelenlazados por su id, si tomas la desición de implementar otroframework JSutiliza el método de la versión inferior a 0.4.3.

Importante

Los atributos definidos en el elementorangeson pasados al elementoinput rangeque se generá dinámicamente.

Uso de atributos

El elementorangesoporta los atributos más comúnes, utilizados por un elemento de tiporange.

id
name
form
value
min
max
step

Observa el siguiente ejemplo

Tú código html

<range id="id1"name="demo" min="5" max="10"  value="6"  step="0.5"><range>

Código en el inspector

<input id="id1"name="demo" min="5" max="10"  value="6"  step="0.5"/>

Si necesitas este componente por defecto, añade la clase.default-browser

Colores

Utilizando el control nativo dehtml5.

<range class="is-primary" value="50" id="range2"></range>
<range class="is-info" value="50" id="range3"></range>
<range class="is-success" value="50" id="range4"></range>
<range class="is-warnng" value="50" id="range5"></range>
<range class="is-danger" value="50" id="range6"></range>

Preloader

Este pequeño componente te permite indicar que hay una tarea en progreso, muy similar al componenteprogress-bar.

<preload></preload>

Colores

disponible en 6 colores base.

<preload class="is-cloud"></preload>
<preload></preload>
<preload class="is-info"></preload>
<preload class="is-success"></preload>
<preload class="is-warning"></preload>
<preload class="is-danger"></preload>

Estilos

Añadiendo la clase.is-dinamic

<preload class="is-dinamic is-medium"></preload>

Tamaños

Con 4 tamaños diferentes.

<preload class="is-tiny"></preload>

<preload class="is-small"></preload>

<preload class="is-medium"></preload>

<preload class="is-large"></preload>

Velocidad

Puedes controlar la velocidad mediante las siguientes clases:

<preload class="is-lower"></preload>

<preload class="is-fast"></preload>

Progress bar

Elemento que permite indicar al usuario el progreso de alguna tarea.

Hemos actualizado este componente ysimplificadosu sintaxis, mediante un pequeñoscriptdejavascript.

Proceso de implementación

La manera de construir este tipo decomponenteen versiones inferiores a 0.4.3simplemente se añadian los siguienteselementos personalizados.

Elementoprogress-bar.
Elementocompleteque contenía el atributovalueel cúal definía el progreso completado de una tarea.

Apartir de la versión0.4.4y con la implementación dejavascript, solamente tienes que añadir nuestro tag personalizadoprocess.

Que ha cambiado

Solamente necesitas una linea de códigohtml5,javascripthace el resto.

Kimera0.4.3

<progress-bar>
  <complete value="10%"></complete>
</progress-bar>

Kimera0.4.4

<process value="10%"></process>

Implementación sin JS

si decides no utilizarjavascript, puedes hacer la implementación de la siguiente manera y obtendrás el mismo resultado.

<process>
  <complete value="10%"></complete>
</process>

Importante

Javascriptse encarga de generar dinamicamente el elementocomplete.

Importante

Los atributos definidos en el elementoprocessdefinen el comportamiento de su hijocompleteque se generá dinámicamente.

Colores

Añadiendo una de las siguientes clases de color al elementoprocess.

.is-cloud
.is-primary
.is-info
.is-success
.is-warning
.is-danger

<process class="is-cloud" value="20%"></process>
<process class="is-primary" value="20%"></process>
<process class="is-info" value="40%"></process>
<process class="is-success" value="60%"></process>
<process class="is-warning" value="80%"></process>
<process class="is-danger" value="100%"></process>

Tamaños

Añadiendo una de las siguientes clases al elementoprocess

.is-tiny
.is-small
.is-medium
.is-large

<process class="is-tiny is-primary" value="20%"></process>
<process class="is-small is-info" value="40%"></process>
<process class="is-success" value="60%"></process>
<process class="is-medium is-warning" value="80%"></process>
<process class="is-large is-danger" value="100%"></process>

Etiquetas

Añadiendo el atributo personalizadolabelal elementoprocess, y asignando uno de sus 2 valores posibles.

static
floating

Label static

<process class="is-tiny is-primary" label="static" value="20%"></process>
<process class="is-small is-info" label="static" value="40%"></process>
<process class="is-success" label="static" value="60%"></process>
<process class="is-medium is-warning" label="static" value="80%"></process>
<process class="is-large is-danger" label="static" value="100%"></process>

Label floating

<process class="is-tiny is-primary" label="floating" value="20%"></process>
<process class="is-small is-info" label="floating" value="40%"></process>
<process class="is-success" label="floating" value="60%"></process>
<process class="is-medium is-warning" label="floating" value="80%"></process>
<process class="is-large is-danger" label="floating" value="100%"></process>

Progresss is-infinite

Añadiendo al elementoprocessla clase.is-infinite.

<process class="is-tiny is-infinite is-primary"></process>
<process class="is-small is-infinite is-info"></process>
<process class="is-infinite is-success"></process>
<process class="is-medium is-infinite is-warning"></process>
<process class="is-large is-infinite is-danger"></process>

Por defecto la animación de la clase.is-inifinitees de 2 segundos, puedes controlar la velocidad de la animación mediante una de las siguientes clases:

.is-very-fastVelocidad de la animación de 0.5s
.is-fastVelocidad de la animación de 1s
.is-lowerVelocidad de la animación de 3s
.is-very-lowerVelocidad de la animación de 3.5s

<process class="is-infinite is-primary is-very-fast"></process>
<process class="is-infinite is-info is-fast"></process>
<process class="is-infinite is-success is-lower"></process>
<process class="is-infinite is-danger is-very-lower"></process>

Calendar

Este componente reemplaza completamente a los controles nativos de tipodate.

Implementación

solamente añadiendo una etiqueta<calendar>en tu codigo html e inicializarlo mediante javacript, lo que te permitirá configurar los siguientes parametros:

elId principal del componente<calendar>.
languageDefine el lenguaje del componente.
nameAtributo name asignado a su elemento de tipoinput.
idId asignado a su elemento de tipoinput.
classIconPrevConjunto de clases para configurar el icono que permite cambiar al mes o año anterior.
classIconNextConjunto de clases para configurar el icono que permite cambiar al mes o año siguiente.
classIconInputConjunto de clases que definen el icono a mostrar en el elementotoggle.
iconPositionDefine la posicion del icono toggle

<calendar id="CalendarDemo0"></calendar>

let demo = new Calendar({
  el: '$id',
  language: 'es || us',
  name: 'nameInput',
  id: 'idInput',
  classIconPrev: 'fa fa-angle-up',
  classIconNext: 'fa fa-angle-down',
  classIconInput: 'fa fa-calendar',
  iconPosition: 'left  || right'
});

Nota:

Los parametrosidynamete permitirán obtener el valor del elemento input cuando lo necesites por ejemplo en php.

Colores

Con 9 estilos diferentes aplicables utilizando la propiedadstyle.

let demo = new Calendar({
  el: 'id del componente',
  style: 'cloud || light || dark || black || primary || info || success || warning || danger'
});

De manera predeterminada este componente toma lafecha actual como valor por defecto.

Cambiando iconos

Mediante la definicíon de las siguientes propiedades en javascriptpuedes modificar los iconos del componente a tu gusto.

classIconPrev
classIconNext
classIconInput

<calendar id="CalendarDemo6"></calendar>

let demo = new Calendar({
  el: '#calendardemo6',
  classIconPrev: 'fa fa-caret-up',
  classIconNext: 'fa fa-caret-down',
  classIconInput: 'fa fa-angellist'
});

Posicion de icono toggle

Mediante la definicíon de la siguiente propiedad en javascriptpuedes modificar la posición del icono toggle a tu gusto.

iconPosition

<calendar id="CalendarDemo7"></calendar>

let demo = new Calendar({
  el: '#Calendardemo7',
  iconPosition: 'right'
);

Soporte para el atributo value

Ahora es posible asignar un valor por defecto añadiendo el atributovalueal contenedor<calendar>.

El valor por defecto debe de tener el siguiente formatodd/mm/yyyy.

ddparámetro día con 2 digitos.
mmparámetro mes con 2 digitos.
yyyyparámetro año con 4 digitos.

<calendar id="CalendarDemo8" default-value="01/01/2000"></calendar>

Por defecto si el atributo default-value no es especificado, el componente calendar tomará como valor la fecha del sistema.

Fields

El elementofieldes unicamente uncontenedor flexible, para distribuir los elementos relacionados con la entrada de información.

Estructura

fieldContenedor principal.
- controlItem del contenedor principal.

El elementofieldpor defecto aplica la propiedadflex-direction: column.

<field>
  <control>
    <input type="text" class="input">
  </control>
  <control>
    <input type="text" class="input">
  </control>
</field>

Field horizontal

Añadiendo la clase.is-horizontalal elementofieldaplica la propiedadflex-direction: row, y los elementoscontroltienen un ancho automatico.

<field class="is-horizontal">
  <control>
    <input type="text" class="input">
  </control>
  <control>
    <button class="is-info">Enviar</button>
  </control>
</field>

Espacio disponible

Añadiendo la clase.is-expanda un elementocontroleste tomará todo el espacio sobrante de su contenedor padre.

<field class="is-horizontal">
  <control class="is-expand">
    <input type="text" class="input">
  </control>
  <control>
    <button class="is-info">Enviar</button>
  </control>
</field>

Field addons

Añadiendo la clase.is-addonsal elementofieldeliminara los margenes y bordes redondeados de sus elementoscontrol.

+52

+88

+22

<field class="is-addons">
  <control>
    <listbox>
      <select name="demo">
        <option value="+52">52</option>
        <option value="+88">+88</option>
        <option value="+22">+22</option>
      </select>
    </listbox>
  </control>
  <control class="is-expand">
    <input type="text" class="input">
  </control>
  <control>
    <button class="is-info">Enviar</button>
  </control>
</field>

Addons redondeados

Añadiendo la clase.is-roundedal elementofieldque ya posee el atributoaddonscreará bordes redondeados a su primer y último elementocontrol.

<field class="is-addons" class="is-rounded">
  <control class="is-expand">
    <input type="text" class="input">
  </control>
  <control>
    <button class="is-info">Enviar</button>
  </control>
</field>

Input controls.

Por defecto, los elementos de tipoinputtienen un ancho del 100%.

Soporte

Kimeraactualmente tiene soporte para los siguientes tipos de controles, añadiendo la clase.input, y para elementos de tipo date añadiendo la clase.input.

text
password
mail
number
tel
search
url

Te recomendamos revisar lacompatibilidadcon navegadores de estos elementos.

<input type="text" class="input" placeholder="Input text"/>
<input type="mail" class="input" placeholder="Input mail"/>
<input type="password" class="input" placeholder="Input password"/>
<input type="number" class="input" placeholder="Input number"/>
<input type="tel" class="input" placeholder="Input tel"/>
<input type="search" class="input" placeholder="Input search"/>
<input type="url" class="input" placeholder="Input url"/>

Colores

Los elementos de tipoinput soportan la siguientes clases de color:

is-info
is-success
is-warning
is-danger

<input type="text" placeholder="Default"/>
<input type="text" class="input is-info" placeholder="Info"/>
<input type="text" class="input is-success" placeholder="Success"/>
<input type="text" class="input is-warning" placeholder="Warning"/>
<input type="text" class="input is-danger" placeholder="Danger"/>

Material design

Añadiendo la clase.is-material.

<input class="is-material" placeholder"Default material" type="text"/>
<input class="is-material input is-info" type="text" placeholder="Info material"/>
<input class="is-material input is-success" type="text" placeholder="Success material"/>
<input class="is-material input is-warning" type="text" placeholder="Warning material"/>
<input class="is-material input is-danger" type="text" placeholder="Danger material"/>

Input redondeado

Añadiendo la clase.is-rounded.

<input type="text" placeholder="Default"/>
<input type="text" class="input is-rounded is-info" placeholder="Info"/>
<input type="text" class="input is-rounded is-success" placeholder="Success"/>
<input type="text" class="input is-rounded is-warning" placeholder="Warning"/>
<input type="text" class="input is-rounded is-danger" placeholder="Danger"/>

Añadiendo iconos

Añadiendo una de las siguientes clases al elementocontrol.

.is-double-iconsle indica al contenedor que elinputtendra un icono a la izquierda y otro a la derecha.
.is-icon-leftle indica al contenedor que solo tendra un icono a la izquierda
.is-icon-rightle indica al contenedor que solo tendra un icono a la derecha

Los iconos son posicionadosautomaticamentesin añadir ninguna clase adicional.

// Ejemplo al añadir 2 iconos.<field>
  <control class="is-double-icons">
    <input type="text" class="input" placeholder="Usuario">
    <icon>@Content</icon>
    <icon>@Content</icon>
  </control>
</field>// Ejemplo al añadir icono a la izquierda.<field>
  <control class="is-icon-left">
    <input type="mail" class="input" placeholder="Correo electrónico">
    <icon>@Content</icon>
  </control>
</field>

// Ejemplo al añadir icono a la derecha.<field>
  <control class="is-icon-right">
    <input type="password" class="input" placeholder="Contraseña">
    <icon>@Content</icon>
  </control>
</field>

Tamaños

Por defectokimeraincluye4 tamañospara los elementos de tipoinput.

.is-small
.is-medium
.is-large

// Ejemplo size de inputs & icons.<field>
  <control class="is-icon-left">
    <input type="text" placeholder="small" class="input is-small">
    <icon class="is-small">@Content</icon>
  </control>
</field>
<field>
  <control class="is-icon-left">
    <input type="text" placeholder="Default" class="input">
    <icon>@Content</icon>
  </control>
</field>
<field>
  <control class="is-icon-left">
    <input type="text" placeholder="medium" class="input is-medium">
    <icon class="is-medium">@Content</icon>
  </control>
</field>
<field>
  <control class="is-icon-left">
    <input type="text" placeholder="large" class="input is-large">
    <icon class="is-large">@Content</icon>
  </control>
</field>

Validación html5

Este tipo de validación esta basada en los nuevos atributoshtml5proporcionados por laW3C.

requiredAtributo para indicar que un campo es requerido.
:invalidselector para indicar que un campo es invalido
:validselector para indicar que un campo es valido

Recuerda que este tipo de validaciónno es suficiente,por lo que recomendamos realizar una segunda validación del lado del servidor.

Añadiendo el atributorequireda un elemento de tipo input.

<form>
  <field>
    <label>Usuario</label>
    <control>
      <input required type="text" class="input" placeholder="Usuario">
    </control>
  </field>
  <field>
    <label>Contraseña</label>
    <control>
      <input required type="password" class="input" placeholder="Contraseña">
    </control>
  </field>
  <button class="is-info" type="submit">Enviar</button>
</form>

Validación secundaria

Añadiendo a un elemento la clase.is-validate, y que este se encuentre definido en elDOMdespues de un elemento de tipoinput, cambia de color según la validación mediante los selectores:invalidy:valid.

<form>
  <field>
    <label>Usuario</label>
    <control class="is-double-icons">
      <input required type="text" class="input" placeholder="Usuario">
      <icon>...</icon>
      <icon class="is-validate">...</icon>
      <help class="is-validate">Este campo es obligatorío.</help>
    </control>
  </field>
  <field>
    <label>Contraseña</label>
    <control class="is-double-icons">
      <input required type="password" class="input" placeholder="Contraseña">
      <icon>...</icon>
      <icon class="is-validate">...</icon>
      <help class="is-validate">La contraseña debe tener como minímo 6 carácteres.</help>
    </control>
  </field>
  <button class="is-info" type="submit">Enviar</button>
</form>

Lista de datos

El elementodatalisthace posible incluir una lista de opciones, que va a ser mostrada en un elemento de tipoinputcomo valores sugeridos, proceso que anteriormente se realizaba con librerias oAPISexternas, esta lista de opciones esta relacionada con un elemento de tipoinputpor medio del atributolisty unidasignado al contenedordatalist.

<input type="search" class="input" list="social">
<datalist id="social">
  <option value="Facebook"></option>
  <option value="Twitter"></option>
  <option value="Google"></option>
  <option value="Github"></option>
  <option value="Linkedin"></option>
</datalist>

Textarea

Colores

Los elementos de tipotextareasoportan la siguientes clases de color:

is-info
is-success
is-warning
is-danger

<textarea placeholder="default"/></textarea>
<textarea class="is-info" placeholder="info"/></textarea>
<textarea class="is-success" placeholder="success"/></textarea>
<textarea class="is-warning" placeholder="warning"/></textarea>
<textarea class="is-danger" placeholder="danger"/></textarea>

Estilo material design

Añadiendo la clase.is-material

<textarea class="is-material" placeholder="default"/></textarea>
<textarea class="is-info is-material" placeholder="info"/></textarea>
<textarea class="is-success is-material" placeholder="success"/></textarea>
<textarea class="is-warning is-material" placeholder="warning"/></textarea>
<textarea class="is-danger is-material" placeholder="danger"/></textarea>

Text area redondeado

Añadiendo la clase.is-rounded.

<textarea class="is-rounded" placeholder="Text area redondeado"/></textarea>
<textarea class="is-rounded is-info" rows="5" placeholder="Text area redondeado"/></textarea>

Añadiendo iconos

El contenedor<control>requiere una de las siguientes clases:

.is-icon-leftle indica al contenedor que solo tendra un icono a la izquierda
.is-icon-rightle indica al contenedor que solo tendra un icono a la derecha

Los iconos son posicionadosautomaticamentesin añadir ninguna clase adicional.

// Ejemplo al añadir icono a la izquierda.<field>
  <control class="is-icon-left">
    <textarea></textarea>
    <icon>@Content</icon>
  </control>
</field>
// Ejemplo al añadir icono a la derecha.<field>
  <control class="is-icon-right">
    <textarea></textarea>
    <icon>@Content</icon>
  </control>
</field>

Tamaños

Por defectokimeraincluye4 tamañospara los elementos de tipotextareaañadiendo una de las siguientes clases:

.is-small
.is-medium
.is-large

<field>
  <control class="is-icon-left">
    <textarea class="is-small"></textarea>
    <icon class="is-small">@Content</icon>
  </control>
</field>
<field>
  <control class="is-icon-left">
    <textarea></textarea>
    <icon>@Content</icon>
  </control>
</field>
<field>
  <control class="is-icon-left">
    <textarea class="is-medium"></textarea>
    <icon class="is-medium">@Content</icon>
  </control>
</field>
<field>
  <control class="is-icon-left">
    <textarea class="is-large"></textarea>
    <icon class="is-large">@Content</icon>
  </control>
</field>

Textarea fixed

Añadiendo la clase.is-fixedel elementotextareano permite modificar su tamaño.

<textarea class="is-fixed"></textarea>

Readonly

Añadiendo el atributo[readonly]el elemento textarea se convierte en un campo de solo lectura, que no permite su edición.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, commodi!

<textarea readonly>@Content</textarea>

Checkbox

Hemos actualizado este componente ysimplificadosu sintaxis, mediante un pequeñoscriptdejavascript.

Proceso de implementación

La manera de construir este tipo decomponenteera añadir los siguientes elementoshtml5.

Elemento de tipoinput checkboxcon su respectivoid.
Elementolabelenlazado mediante el atributofor.

Apartir de la versión0.4.4solamente tienes que añadir nuestro tag personalizadocheckbox.

Que ha cambiado

Solamente necesitas una linea de códigohtml5,javascripthace el resto.

Kimera0.4.3

<checkbox>
  <input type="checkbox" id="checkbox-old"/>
  <label for="checkbox-old">Versión sin js</label>
<checkbox>

Kimera0.4.4

<checkbox id="checkbox-new" text="Versión con js"><checkbox>

Implementación sin Js

si decides no utilizarjavascript,puedes hacer la implementación de la siguiente manera y obtendrás el mismo resultado.

<checkbox>
  <input type="checkbox" id="checkbox-old"/>
  <label for="checkbox-old">Versión sin jquery</label>
<checkbox>

Importante

JSse encarga de generar dinamicamente el elementoinputylabelenlazados por su id, si tomas la desición de implementar otroframework JSutiliza el método de la Versión sin js.

Importante

Los atributos definidos en el elementocheckboxson pasados al elementoinput checkboxque se generá dinámicamente.

Uso de atributos

El elementocheckboxsoporta los atributos más comúnes, utilizados por un elemento de tipocheckbox.

id
name
form
required
checked
value
text(atributo personalizado).

Observa el siguiente ejemplo

Tú código html

<checkbox id="id1"name="demo" form="login" checked  required><checkbox>

Código en el inspector

<input type="checkbox" id="id1"name="demo" form="login" checked  required/>

No hay que expecificar a detalle que hace cada atributo, pues su nombre lo dice todo, la unica excepción es el atributo personalizadotextel cúal sirve para especificar el texto del elementolabelque es generado de forma dinámica.

<checkbox id="check-text"text="Texto del atributo text"></checkbox>

Estilos de checkbox

<checkbox id="c1" text="Checkbox básico"></checkbox>

<checkbox id="c2" text="Checkbox con la clase <code>.is-check</code>" class="is-check"></checkbox>

<checkbox id="b1" text="Checkbox con la clase <code>.is-filled</code>" class="is-filled"></checkbox>

Tip:

Como pudiste observar en los ejemplos anteriores, se ha introducido la etiqueta<code>dentro del atributo text, por lo que puedes pasar texto con formato simple.

Tamaño de checkbox

Hemos añadido 2 tamaños para este componente, utilizando las siguientes clases.

.is-small
.is-tiny

<checkbox class="is-small" id="c10" text="Checkbox small"></checkbox>
<checkbox class="is-tiny" id="c11" text="Checkbox tiny"></checkbox>

<checkbox id="c2" text="Checkbox con la clase <code>.is-check</code>" class="is-check"></checkbox>

Estado checked

añadiendo el atributocheckedal elementocheckbox.

<checkbox checked id="c3"></checkbox>
<checkbox checked id="c4"></checkbox>

Colores

Al contenedor padrecheckboxse le añade una de las siguientes clases de color:

is-primary
is-info
is-success
is-warning
is-danger

<checkbox id="e1" class="is-primary"></checkbox>
<checkbox id="e2" class="is-info"></checkbox>
<checkbox id="e3" class="is-success"></checkbox>
<checkbox id="e4" class="is-warning"></checkbox>
<checkbox id="e5" class="is-danger"></checkbox>

Radio

Hemos actualizado este componente ysimplificadosu sintaxis, mediante un pequeñoscriptdejs.

Proceso de implementación

La manera de construir este tipo decomponenteera añadir los siguientes elementoshtml5.

Elemento de tipoinput radiocon su respectivoid.
Elementolabelenlazado mediante el atributofor.

Apartir de la versión0.4.4solamente tienes que añadir nuestro tag personalizadoradio.

Que ha cambiado

Solamente necesitas una linea de códigohtml5,javascripthace el resto.

Kimera0.4.3

<radio>
  <input type="radio" id="radio-old"/>
  <label for="radio-old">Versión sin js</label>
<radio>

Kimera0.4.4

<radio id="radio-new" text="Versión con js"><radio>

Implementación sin JS

si decides no utilizarjavascript,puedes hacer la implementación de la siguiente manera y obtendrás el mismo resultado.

<radio>
  <input type="radio" id="radio-old"/>
  <label for="radio-old">Versión sin js</label>
<radio>

Importante

Los atributos definidos en el elementoradioson pasados al elementoinput radioque se generá dinámicamente.

Uso de atributos

El elementoradiosoporta los atributos más comúnes, utilizados por un elemento de tiporadio.

id
name
form
required
checked
value
text(atributo personalizado).

Observa el siguiente ejemplo

Tú código html

<radio id="id1"name="demo" form="login" checked  required><radio>

Código en el inspector

<input type="radio" id="id1"name="demo" form="login" checked  required/>

<radio id="radio-text"text="Texto del atributo text"></radio>

Estilos de radio

<radio id="rd1" text="radio básico"></radio>

<radio id="rd2" text="radio con la clase <code>.is-check</code>" class="is-check"></radio>

<radio id="br1" text="radio con la clase <code>.is-filled</code>" class="is-filled"></radio>

Tip:

Como pudiste observar en los ejemplos anteriores, se ha introducido la etiqueta<code>dentro del atributo text, por lo que puedes pasar texto con formato simple.

Tamaño de radio

Hemos añadido 2 tamaños para este componente, utilizando las siguientes clases.

.is-small
.is-tiny

<radio class="is-small" id="c12" text="radio small"></radio>
<radio class="is-tiny" id="c13" text="radio tiny"></radio>

Estado checked

añadiendo el atributocheckedal elementoradio.

<radio checked id="rd3"></radio>
<radio checked id="rd4"></radio>

Colores

Al contenedor padreradiose le añade una de las siguientes clases de color:

is-primary
is-info
is-success
is-warning
is-danger

<radio id="er1" class="is-primary"></radio>
<radio id="er2" class="is-info"></radio>
<radio id="er3" class="is-success"></radio>
<radio id="er4" class="is-warning"></radio>
<radio id="er5" class="is-danger"></radio>

Input color

Un elemento de tipoinputpara la selección de color.

Soporte

Este componente ha sido probado en los siguientes navegadores:

Chrome +60
Firefox +56
Edge +38
Opera

Te recomendamos revisar elsoporteque brindan los navegadores a este componente, para el caso del navegadorsafarite recomendamos el uso de la libreríaJSColor.

Implementación

<color></color>

Nota:

Mediantejqueryse añade el elementoinputde tipocolor

Atributos

Este componente soporta actualmente los siquientes atributos:

id
name
value
required

Observa el siguiente ejemplo

Tú código html

<color id="id1"name="demo" value="#22adff"  required><color>

Código en el inspector

<color>
  <input type="color" id="id1"name="demo" value="#22adff"  required/>
</color>

Color rounded

Añadiendo la clase.is-roundedal elementocolor.

<color class="is-rounded"></color>

Valor por defecto

Añadiendo el atributovalueal elementoinputpodemos asignar su color por defecto, si no se especifíca su valor por defecto es negro.

<color class="is-rounded" value="#22adff"></color>
<color class="is-rounded" value="#2264c8"></color>
<color class="is-rounded" value="#22c85c"></color>
<color class="is-rounded" value="#ffd232"></color>
<color class="is-rounded" value="#ff0050"></color>

Estado inactivo

Añadiendo el atributo[disabled]al elementocolor.

<color disabled value="#22adff"></color>

Listbox

Un componentelistbox completamente personalizable.

Estilo Basíco

Option 1

Option 2

Option 3

<listbox id="demo">
  <list>
    <list-item value="Option 1">...</list-item>
    <list-item value="Option 2">...</list-item>
    <list-item value="Option 3">...</list-item>
  </list>
</listbox>

Implementación JS

Para implementar correctamente este componente, debes de añadir unas cuantas lineas de códigojavascriptlo que te permitirá configurar los iconos, entre otras cosas.

<!-- Creamos un objeto de configuración -->
varobj  =  {
  el: '$id',
  hasTwoIcons: true || false,
  rounded: true || false,
  iconToggleClass: 'fa fa-angle-down',
  iconLabelClass: 'fa fa-user-circle',
  name: 'nameDemo',
  id: 'idDemo'
 };

<!-- Creamos una instancía de la clase Listbox la cual recibe como parámetro un objeto -->
var demo =  new Listbox(obj);

Colores

Al elementolistboxse le añade una de las siguientes clases de color:

is-dark
is-info
is-success
is-warning
is-danger

Dark list-item

list-items box

Info list-item

list-items box

Success list-item

list-items box

Warning list-item

list-items box

Danger list-item

list-items box

<listbox class="is-dark" id="demo">•••</listbox>
<listbox class="is-info" id="demo">•••</listbox>
<listbox class="is-success" id="demo">•••</listbox>
<listbox class="is-warning" id="demo">•••</listbox>
<listbox class="is-danger" id="demo">•••</listbox>

Añadiendo iconos.

La manera de añadir iconos a este componente es mediante el uso de las propiedadesiconToggleClassyiconLabelClassque se definen mediantejavacript.

List item 1

List item 2

<!-- Marcado HTML5  -->
<listbox id="demoIcons">•••</listbox>
<!-- Configuración de iconos en js. -->
varobj  =  {
  el: '#demoIcons',
  hasTwoIcons: true,
  iconToggleClass: 'fa fa-angle-down',
  iconLabelClass: 'fa fa-user-circle',
 };
var demo =  new Listbox(obj);

Listbox avanzado

De manera predeterminada los elementoslist-itemson contenedores flexibles y personalizables, puedes incluir lo que tu quieras dentro de estos elementos.

Facebook

Twitter

Instagram

Snapchat

Youtube

<listbox id="demoA">
  <list>
    <list-item value="Facebook" text="Facebook">
      <span>Facebook</span>
      <icon>•••</icon>
    </list-item>
    <list-item value="Twitter" text="Twitter">
      <span>Twitter</span>
      <icon>•••</icon>
    </list-item>
    <list-item value="Instagram" text="Instagram">
      <span>Instagram</span>
      <icon>•••</icon>
    </list-item>
    <list-item value="Snapchat" text="Snapchat">
      <span>Snapchat</span>
      <icon>•••</icon>
    </list-item>
    <list-item value="Youtube" text="Youtube">
      <span>Youtube</span>
      <icon>•••</icon>
    </list-item>
  </list>
</listbox>

Atributo value

El atributovaluete ayudará a definir cual es el valor de un elementolist-item, atributo mediante el cual se obtiene el valor desde un lenguaje de programación de lado del servidor como lo es PHP .

El atributotextte permitirá personalizar el texto a mostrar en el elemento input, al seleccionar un item.

Texto de opcion 1

Texto de opcion 2

Texto de opcion 3

<listbox id="demoAtributes">
  <list>
    <list-item text="texto personalizado 1" value="Valor de opcion 1">Texto de opcion 1</list-item>
    <list-item text="texto personalizado 2" value="Valor de opcion 2">Texto de opcion 2</list-item>
    <list-item text="texto personalizado 3" value="Valor de opcion 3">Texto de opcion 3</list-item>
  </list>
</listbox>

Si el atributotextno se especifica, el valor el texto mostrado en el elementoinputserá el valor del atributovaluedel elementolist-itemseleccionado.

Acordeon

Pequeño módulo para la creación de acordeones.

Estructura

Este módulo solamente te proporciona unaestructura flexiblecon las siguientes carateristicas.

acordeonContenedor principal.
- acordeon-itemItem del acordeon.
- contentContenido principal.

Acordeon responsive+

Este módulo es completamente adaptable adiferentes resolucionesbasado enflexbox CSS3.

Contenido oculto+

De manera predeterminada el contenedorcontentposee la propiedadmax-height: 0;, la cual es cambiada mediantejavascript.

Interacción jquery+

Con una funcionalidad básica mediantejquery.

<acordeon>
  <acordeon-item>
    Acordeon responsive
    <icon>+</icon>
  </acordeon-item>
  <content>
    <p class="padding-1">...</p>
  </content>
  <acordeon-item>
    Contenido oculto
    <icon>+</icon>
  </acordeon-item>
  <content>
    <p class="padding-1">...</p>
  </content>
  <acordeon-item>
    Interacción jquery
    <icon>+</icon>
  </acordeon-item>
  <content>
    <p class="padding-1">...</p>
  </content>
</acordeon>

Añade tu estilo

Añade el estilo que más te guste, unas cuantas lineas decss, o puedes utilizar el estilo que incluye kimera, añadiendo la clase.is-materialal contenedoracordeon.

Acordeon material+

Con un estilomaterial designlimpio e increible.

Contenido oculto+

De manera predeterminada el contenedorcontentposee la propiedadmax-height: 0;, la cual es cambiada mediantejavascript.

Interacción jquery+

Con una funcionalidad básica mediantejquery.

<acordeon class="is-material">  //Content</acordeon>

Tips:

Puedes usar las clases auxiliares de la sección detipografías,para modificar el tamaño de fuente

Acordeon multiple

Para crear unacordeon multiplenecesitas añadir el atributo personalizadomultiple.

Acordeon multiple+

Con un estilomaterial designlimpio e increible.

Contenido oculto+

De manera predeterminada el contenedorcontentposee la propiedadmax-height: 0;, la cual es cambiada mediantejavascript.

Interacción jquery+

Con una funcionalidad básica mediantejquery.

<acordeon multiple class="is-material">  //Content</acordeon>

Anidación

La anidación de este módulo es completamente soportada.

Acordeon+

Con un estilomaterial designlimpio e increible.

Contenido oculto+

Contenido oculto del acordeon

Acordeon anidado+

Acordeon anidado dentro de otro

Mas contenido+

Contenido dentro de un acordeon anidado.

Interacción jquery+

Con una funcionalidad básica mediantejquery.

<acordeon>
  <acordeon-item>
    Acordeon responsive
    <icon>+</icon>
  </acordeon-item>
  <content>
    <p class="padding-1">...</p>
  </content>
  <acordeon-item>
    Contenido oculto
    <icon>+</icon>
  </acordeon-item>
  <content>
    <p class="padding-1">
      <acordeon>        //Contenido de acordeon anidado.      </acordeon>
    </p>
  </content>
  <acordeon-item>
    Interacción jquery
    <icon>+</icon>
  </acordeon-item>
  <content>
    <p class="padding-1">...</p>
  </content>
</acordeon>

Tips

Puedes hacer uso de la biblioteca de color para darle diferentes estilos de color.

Tips

Puedes hacer uso de las clases auxiliares para cambiar el tamaño de fuente, estilo, etc.

Acordeon responsive

Este módulo es completamente adaptable adiferentes resolucionesbasado enflexbox CSS3.

Contenido oculto

De manera predeterminada el contenedorcontentposee la propiedadmax-height: 0;, la cual es cambiada mediantejavascript.

Sin javascript

Desarrollado con puro CSS3, sin una sola linea dejavascript.

Acordeon responsive

Este módulo es completamente adaptable adiferentes resolucionesbasado enflexbox CSS3.

Contenido oculto

De manera predeterminada el contenedorcontentposee la propiedadmax-height: 0;, la cual es cambiada mediantejavascript.

Sin javascript

Desarrollado con puro CSS3, sin una sola linea dejavascript.

Breadcrumbs

Módulo que indíca la ubicación de la pagína actual dentro de unajerarquía de navegación.

Estructura

Los separadores son añadidos automaticamente mediante lospseudo-elementos::after & ::before

HomeLibraryDataKimera

<breadcrumb>
  <item>Home</item>
  <item>Library</item>
  <item>Data</item>
  <item class="is-active">Kimera</item>
</breadcrumb>

Importante

Puedes añadir la clase.is-activea un elementoitempara indicar que es el item seleccionado.

Separadores

<breadcrumb class="is-dotted">
  <item>Home</item>
  <item>Library</item>
  <item>Data</item>
  <item class="is-active">Kimera</item>
</breadcrumb>

Alineación

Alineación al centro con la clase.is-center

<breadcrumb class="">
  <item>Home</item>
  <item>Library</item>
  <item>Data</item>
  <item class="is-active">Kimera</item>
</breadcrumb>

Tips:

Al añadir la claseis-rightautomaticamente se invierte el separador asignado.

Tamaños

HomeLibraryDataKimera

<breadcrumb class="">
  <item>Home</item>
  <item>Library</item>
  <item>Data</item>
  <item class="is-active">Kimera</item>
</breadcrumb>

Añadiendo iconos

HomeLibraryDataKimera

<breadcrumb>
  <item>
        <icon>...</icon>
        Home
  </item>
  <item>
        <icon>...</icon>
        Library
  </item>
  <item>
        <icon>...</icon>
        Data
  </item>
  <item class="is-active">
        Kimera
        <icon>...</icon>
  </item>
</breadcrumb>

Cards

Pequeño componente para la creación de tarjetas.

Estructura

cardContenedor principal.
- headerCabecera de la tarjeta
- contentCuerpo de la tarjeta
- footerPie de la tarjeta

Utilizando la biblioteca de color que incluye kimera, o definiendo tu propío estilo puedes crear tarjetas simples.

"Lorem ipsum dolor sit amet."

@John Smith

<card>
  <content class="color-danger-lighten-4">
    <h1>"Lorem ipsum dolor sit amet."</h1>
    <small>@John Smith</small>
  </content>
  <footer>
    <item>View on<a>Twitter</a></item>
    <item>share on<a>Facebook</a></item>
  </footer>
</card>

Puedes crear algo más complejo como esto.

Módulo

John Smith@john-smith
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et delectus, porro repellendus necessitatibus quaerat.10 • Nov • 2017 - 08:45 pm

<card>
  <header>
    <b>Módulo</b>
    <icon>
      <i class="fa fa-angle-down"></i>
    </icon>
  </header>
  <content>
    <b>John Smith</b>
    <info>@john-smith</info>
    <justify>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et delectus, porro repellendus necessitatibus quaerat.</justify>
    <tiny><time>10 • Nov • 2017 - 08:45 pm</time></tiny>
  </content>
  <footer>
    <item>Save</item>
    <item>Cancel</item>
  </footer>
</card>

La versatilidad de este módulo permiteomitircualquiera de los contenedores predefinidos.

Card image

Puedes añadir imágenes sin ningún problema, incluso puedes añadir una imagen de fondo añadiendo la clase.is-bga un elementoimg.

John Smith

@JohnSmith

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et delectus, porro repellendus necessitatibus quaerat.#Kimera #framework css @Libraries CSS
10 • Nov • 2017 - 08:45 pm

<card>
  <responsive>
    <img src="pexels.com">
  </responsive>
  <content>
    <h4>John Smith</h4>
    <info><h6>@JohnSmith</h6></info>
    <justify>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et delectus, porro repellendus necessitatibus quaerat.</justify>
    <small>
      <a>#kimera</a>
      <a>#framework css</a>
      <a>#Libraries CSS</a>
    </small>
    <tiny><i>10 • Nov • 2017 - 08:45 pm</i></tiny>
  </content>
</card>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, temporibus!

<card>
  <img src="https://pexels.com" class="is-bg">
  <content>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, natus.</h1>
  </content>
  <footer>
    <item>
      <a class="is-text-cloud">Descargar</a>
    </item>
    <item>
      <a class="is-text-cloud">Compartir</a>
    </item>
  </footer>
</card>

Groups

Un móduloversatilpara crear agrupaciones.

Estructura

Este módulo sólo te brinda unaestructura flexiblepara generar grupos en forma horizontal y vertical, como un barra de herraminetas, entre muchas otras.

<group class="color-danger">
  <group-item>
    <icon>
      <i class="fa fa-phone"></i>
    </icon>
  </group-item>
  <group-item>
    <icon>
      <i class="fa fa-heart"></i>
    </icon>
  </group-item>
  <group-item>
    <icon>
      <i class="fa fa-user-circle"></i>
    </icon>
  </group-item>
</group>

Box group

Añadiendo la claseis-boxedal contenedorgroup, se aplica el siguiente efecto sobre losgroup-item.

Llamar

Favoritos

Contactos

<group class="color-danger is-boxed">
  <group-item>
    <icon>
      <i class="fa fa-phone"></i>
    </icon>
    Llamar
  </group-item>
  <group-item>
    <icon>
      <i class="fa fa-heart"></i>
    </icon>
    Favoritos
  </group-item>
  <group-item>
    <icon>
      <i class="fa fa-puser-circle"></i>
    </icon>
    Contactos
  </group-item>
</group>

Grupos en linea

Haciendo uso de la clase.is-inlinese aplica la propiedaddisplay: inline-flex.

Llamar

Favoritos

Contactos

Albums

Camará

Música

<group class="color-danger is-boxed is-inline">  @Content</group>
<group class="color-light-darken-2 is-boxed is-inline">  @Content</group>

Grupo de listas

Utilizando la etiqueta personalizadalistgroupse genera una distribucion en bloques, muy util para generar listas como el siguiente ejemplo:

Janet Perkins

Peter Carlsson

Trevor Hansen

<listgroup>
  <list-item>
    <p>
      <icon>•••</icon>
     Janet Perkins
    </p>
    <group class="is-inline">
      <icon>•••</icon>
      <icon>•••</icon>
    </group>
  </list-item>
  <list-item>
    <p>
      <icon>•••</icon>
     Peter Carlsson
    </p>
    <group class="is-inline">
      <icon>•••</icon>
      <icon>•••</icon>
    </group>
  </list-item>
  <list-item>
    <p>
      <icon>•••</icon>
     Trevor Hansen
    </p>
    <group class="is-inline">
      <icon>•••</icon>
      <icon>•••</icon>
    </group>
  </list-item>
</listgroup>

Elementos multimedia

Kimera brinda soporte para video, audio e imagenes.

Estructura

Mediante el contenedorresponsivepodemos adaptar elementos multimedia como videos e imagenes

<responsive>
  <img src="https://pexels.com/">
</responsive>

<responsive>
  <video controls>
    <source src="https://youtube.com/" type="video/mp4">
  </video>
</responsive>

Imágenes cuadradas.

Kimera incluye un conjunto de clases que te permitiráncuadrar una imagen, muy útil paraavatares, usuaríos, etc.

Las siguientes clases son aplicables al contenedor de la imagén, en este caso el contenedorresponsive:

.is-square-16Cuadrado de 16px
.is-square-24Cuadrado de 24px
.is-square-32Cuadrado de 32px
.is-square-48Cuadrado de 48px
.is-square-64Cuadrado de 64px
.is-square-96Cuadrado de 96px
.is-square-128Cuadrado de 128px
.is-square-256Cuadrado de 256px

<responsive class="is-square-24">
  <img src="https://pexels.com">
</responsive>
<responsive class="is-square-32">
  <img src="https://pexels.com">
</responsive>
<responsive class="is-square-48">
  <img src="https://pexels.com">
</responsive>
<responsive class="is-square-64">
  <img src="https://pexels.com">
</responsive>

Imagénes redondeadas

Aplicando la clase.is-roundeda un elementoimg.

<responsive>
  <img src="https://pexels.com/" class="is-rounded">
</responsive>

Imágenes de retina

Unaimágen de retinase basa en su tamaño real reducido mediante css, por ejemplo en un contenedor de256x256 puedes colocar una imágen de512x512, como resultado se obtiene una imágen de alta calidad, debido a que los pixeles de la imágen se reducen significativamente.

256x256

<responsive class="is-square-128">
  <img src="img/image256x256.jpg">
</responsive>

Imagénes de fondo

Es recomendable que el contenedor de la imagén posea la propiedadposition: relative.

Mediante la clase.is-bgindicamos que el elementoimgserá el fondo de un contenedor.

Background image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, perferendis.

<mega>
  <img class="is-bg" src="https://pexels.com/">
  <header>
    <h1>Background image</h1>
  </header>
  <content>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, perferendis.</p>
  </content>
</mega>

Añadiendo más de un fondo

Las siguientes clases te ayudara a definir la posición de diferentes fondos para un mismocontenedor, los cuales se posicionan con cierto nivel de la propiedadz-index

Clase	Valor
`.is-bg`	z-index: -1
`.is-bg-2`	z-index: -2
`.is-bg-3`	z-index: -3
`.is-bg-4`	z-index: -4
`.is-bg-5`	z-index: -5

<div style="position: relative">
  <img class="is-bg" src"https://pexels.com/">
  <img class="is-bg-2" src="https://pexels.com/">
  <img class="is-bg-3" src="https://pexels.com/">
  <img class="is-bg-4" src="https://pexels.com/">
  <img class="is-bg-5" src="https://pexels.com/">
</div>

Blur image

Las siguientes clases te ayudarán a añadir el famosoblur effect.

Clase	Valor
`.blur-2`	filter: blur(2px);
`.blur-4`	filter: blur(4px);
`.blur-6`	filter: blur(6px);
`.blur-8`	filter: blur(8px);
`.blur-10`	filter: blur(10px);

<img class="blur-2" src="https://pexels.com/">
<img class="blur-4" src="https://pexels.com/">
<img class="blur-6" src="https://pexels.com/">
<img class="blur-8" src="https://pexels.com/">
<img class="blur-10" src="https://pexels.com/">

Imagenes obtenidas depexels.com

Mega titles

Pequeñomóduloque permite crear unbloquede gran tamaño para indicar que su contenido es de mayor importancía.

Estructura

Kimera CSS framework

Una moderna librería css basada en etiquetas personalizadas.

<mega class="color-light">
  <header>
    <hgroup>
      <h1>Kimera CSS framework</h1>
      <p class="is-subtitle">Una moderna librería basada en etiquetas personalizadas.</p>
    </hgroup>
  </header>
  <divider></divider>
  <content>
    <button class="is-info">Leer más</button>
  </content>
</mega>

Añadiendo fondos

solo basta con añadir dentro del elementomegaun elemento de tipoimgcon la clase.is-bgo en su defecto aplicar un color de fondo personalizado o mediante nuestrabibliotecade color.

Encabezado con imagén de fondo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, perferendis.

<mega class="is-text-cloud">
  <img class="is-bg" src="url">
  <header>
    <h1>Encabezado con imagén de fondo</h1>
  </header>
  <content>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, perferendis.</p>
  </content>
</mega>

Menu vertical

Módulo para generar menus verticales, por defecto no se incluyen estilos visuales para este modulo, solamente es una estructurahtml.

Estructura

Contenedormenu
Contenedor que separa el menucontent
- Items del menumenu-item
- listas del menumenu-list
Contenedorfooter
- Items del footeritem

@KimeraCSSEditar perfil

Inicio

Proyectos

Servicios

Notificaciones

Configuración

<menu>
  <content>
    <menu-item class="is-separated">
      <menu-item>
        <responsive class="is-square-48">
          <img class="is-rounded" src="url">
          <icon>•••</icon>
        </responsive>
        <section>
          <justify>@KimeraCSS<justify>
          <tiny>Editar perfil<tiny>
        </section>
      </menu-item>
      <icon>•••</icon>
    </menu-item>
    <menu-item>Inicio</menu-item>
    <menu-item>Proyectos</menu-item>
    <menu-item>Servicios</menu-item>
    <menu-item>Notificaciones</menu-item>
    <menu-item>Configuración</menu-item>
  </content>
  <footer>
    <menu-item>© Kimera 2018 </menu-item>
  </footer>
</menu>

Añadiendo etiquetas

Mediante la clase.is-titlele indicamos al elementomenu-itemque se trata de una etiqueta.

@KimeraCSSEditar perfil

General

Inicio

Proyectos

Servicios

Otros

Notificaciones

Configuración

<menu>
  <content>
    <menu-item class="is-separated">
      <menu-item>
        <responsive class="is-square-48">
          <img class="is-rounded" src="url">
          <icon>•••</icon>
        </responsive>
        <section>
          <justify>@KimeraCSS<justify>
          <tiny>Editar perfil<tiny>
        </section>
      </menu-item>
      <icon>•••</icon>
    </menu-item>
    <menu-item class="is-title">general</menu-item>
    <menu-item>Inicio</menu-item>
    <menu-item>Proyectos</menu-item>
    <menu-item>Servicios</menu-item>
    <menu-item class="is-title">otros</menu-item>
    <menu-item>Notificaciones</menu-item>
    <menu-item>Configuración</menu-item>
  </content>
  <footer>
    <menu-item>© Kimera 2018 </menu-item>
  </footer>
</menu>

Añadiendo listas

se añade el elemento personalizadomenu-list

@KimeraCSSEditar perfil

General

Inicio

Proyectos

Servicios

Freelance

Diseño

Otros

Notificaciones

Configuración

<menu>
  <content>
    <menu-item class="is-separated">
      <menu-item>
        <responsive class="is-square-48">
          <img class="is-rounded" src="url">
          <icon>•••</icon>
        </responsive>
        <section>
          <justify>@KimeraCSS<justify>
          <tiny>Editar perfil<tiny>
        </section>
      </menu-item>
      <icon>•••</icon>
    </menu-item>
    <menu-item class="is-title">general</menu-item>
    <menu-item>Inicio</menu-item>
    <menu-item>Proyectos</menu-item>
    <menu-item>Servicios</menu-item>
    <menu-list>
      <menu-item>Freelance</menu-item>
      <menu-item>Diseño</menu-item>
    </menu-list>
    <menu-item class="is-title">otros</menu-item>
    <menu-item>Notificaciones</menu-item>
    <menu-item>Configuración</menu-item>
  </content>
  <footer>
    <menu-item>© Kimera 2018 </menu-item>
  </footer>
</menu>

Item activo y separadores

La clase.is-activese añade al elementomenu-itempara indicar que ese elemento esta seleccionado.

Para añadir separadores simplemente añadir la etiqueta personalizadadivider.

@KimeraCSSEditar perfil

General

Inicio

Proyectos

Servicios

Freelance

Diseño

Otros

Notificaciones

Configuración

<menu>
  <content>
    <menu-item class="is-separated">
      <menu-item>
        <responsive class="is-square-48">
          <img class="is-rounded" src="url">
          <icon>•••</icon>
        </responsive>
        <section>
          <justify>@KimeraCSS<justify>
          <tiny>Editar perfil<tiny>
        </section>
      </menu-item>
      <icon>•••</icon>
    </menu-item>
    <menu-item class="is-title">general</menu-item>
    <menu-item>Inicio</menu-item>
    <menu-item>Proyectos</menu-item>
    <menu-item class="is-active">Servicios</menu-item>
    <list>
      <menu-item>Freelance</menu-item>
      <menu-item>Diseño</menu-item>
    </list>
    <menu-item class="is-title">otros</menu-item>
    <divider></divider>
    <menu-item>Notificaciones</menu-item>
    <menu-item>Configuración</menu-item>
  </content>
  <footer>
    <menu-item>© Kimera 2018 </menu-item>
  </footer>
</menu>

Distribución de contenido

Kimera incluye un conjunto de clases aplicables a los contenedoresmenu-itemque te ayudarán a distribuir el contenido.

.is-centerCentrar el contenido.
.is-rightAlinear contenido a la derecha.
.is-separatedAplica la propiedadjustify-content: space-between
.is-distributedAplica la propiedadjustify-content: space-around

Inicio

<menu>
  <content>
    <menu-item class="is-center">@Content</menu-item>
  </content>
</menu>

Inicio

<menu>
  <content>
    <menu-item class="is-right">@Content</menu-item>
  </content>
</menu>

Inicio

<menu>
  <content>
    <menu-item class="is-separated">@Content</menu-item>
  </content>
</menu>

Inicio

<menu>
  <content>
    <menu-item class="is-distributed">@Content</menu-item>
  </content>
</menu>

Message

Módulo que te permiteenfatizarbloques de contenido.

Cualquiera de sus componenetes puede ser omitido sin afectar el resultado final.

Estructura

Contenedor principal<message>
header<header>
Contenido<content>

Title header

Lorem ipsum dolor sit amet.

<message>
  <header>
    Title header
    <close></close>
  </header>
  <content>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, voluptas.</p>
  </content>
</message>

Colores

Dark

Lorem ipsum dolor sit amet.

Black

Lorem ipsum dolor sit amet.

Primary

Lorem ipsum dolor sit amet.

Primary

Lorem ipsum dolor sit amet.

Primary

Lorem ipsum dolor sit amet.

Primary

Lorem ipsum dolor sit amet.

Primary

Lorem ipsum dolor sit amet.

<message class="is-dark">
  <header>...</header>
  <content>...</content>
</message>
<message class="is-black">
  <header>...</header>
  <content>...</content>
</message>
<message class="is-primary">
  <header>...</header>
  <content>...</content>
</message>
<message class="is-info">
  <header>...</header>
  <content>...</content>
</message>
<message class="is-success">
  <header>...</header>
  <content>...</content>
</message>
<message class="is-warning">
  <header>...</header>
  <content>...</content>
</message>
<message class="is-danger">
  <header>...</header>
  <content>...</content>
</message>

Variantes

El módulomessagetiene 2 variantes, las cuales se aplican omitiendo el contendorheader

Lorem ipsum dolor sit amet.

<message class="is-dark">
  <content>...</content>
</message>
<message class="is-black">
  <content>...</content>
</message>
<message class="is-primary">
  <content>...</content>
</message>
<message class="is-info">
  <content>...</content>
</message>
<message class="is-success">
  <content>...</content>
</message>
<message class="is-warning">
  <content>...</content>
</message>
<message class="is-danger">
  <content>...</content>
</message>

Tamaños

añadiendo una de las siguientes clases:

.is-small
.is-medium
.is-large

Small message

Lorem ipsum dolor sit amet.

Default message

Lorem ipsum dolor sit amet.

Medium message

Lorem ipsum dolor sit amet.

Large message

Lorem ipsum dolor sit amet.

<message class="is-small">
  <header>...</header>
  <content>...</content>
</message>
<message>
  <header>...</header>
  <content>...</content>
</message>
<message class="is-medium">
  <header>...</header>
  <content>...</content>
</message>
<message class="is-large">
  <header>...</header>
  <content>...</content>
</message>

Modal

Un pequeñomódulopara crear ventanasPop-Up.

Este módulo es una simpleestructura flexiblesin más estilos que un contenedor flotante con sombra y un fondo negro, puedes crear lo que tu quieras dentro del contenedorcontentel limite lo pones tú.

Estructura

La estructura de este pequeñomóduloes muy simple.

Elemento con el atributomodalque recibe como valor elidde modal.
Contenedormodalcon unid.
- backgroundcon el atributomodalel cual recibe como valor eliddel modal.
- Contenido de la ventana modalcontent.
  - headerBarra de titulo de la ventana modal (opcional).

<element modal="$id"></elemet>
<modal id="$id">
  <background modal="$id"></background>
  <content>
    <header></header>
    <section></section>
    <footer></footer>
  </content>
</modal>

Animación de entrada

Nuevo!

Ahora puedes controlar de forma individualla animacióncon la cúal se muestra elmodal, añadiendo una de las siguientes clases:

.is-zoom-in
.is-slide-up
.is-slide-down

Nota:

La animación es controlada mediantejqueryañadiendo su clase asociada.

Animación de zoom

<modal class="is-zoom-in">•••</modal>

Animación deslizar hacía arriba

<modal class="is-slide-up">•••</modal>

Animación deslizar hacía abajo

<modal class="is-slide-down">•••</modal>

Modal toggle

Puedes añadir multiples elementos con el atributomodalhaciendo una correcta referencia aliddel elementomodal.

Aviso de privacidad

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos reprehenderit sunt quae voluptatum quia, dolores ut, debitis accusamus molestiae officia tenetur eius, eos veniam ab soluta iure numquam consequuntur beatae.Sapiente, corporis, asperiores iure ipsa delectus eveniet expedita maiores in. Nobis tempora optio blanditiis laboriosam pariatur, unde animi dolore dolorem iusto ratione. Numquam sit, aliquam voluptates fugit iure iusto facere!

<button modal="#md1">Open modal<button>
<modal id="md1">
  <background modal="#md1">Open modal</background>
  <content>
    <h3>Aviso de privacidad</h3>
    <divider></divider>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos reprehenderit sunt quae voluptatum quia, dolores ut, debitis accusamus molestiae officia tenetur eius, eos veniam ab soluta iure numquam consequuntur beatae.</p>
    <p>Sapiente, corporis, asperiores iure ipsa delectus eveniet expedita maiores in. Nobis tempora optio blanditiis laboriosam pariatur, unde animi dolore dolorem iusto ratione. Numquam sit, aliquam voluptates fugit iure iusto facere!</p>
    <button modal="#md1" class="is-info-outline">Acepto</button>
    <button modal="#md1" class="is-danger">Cancelar</button>
  </content>
</modal>

Nota:

Por defecto en una resolución menor a768pxla ventana modal ocupará el100%de ancho.

Modal a pantalla completa

Nuevo!

añadiendo la clase.is-fluidal contenedormodalel elementocontent ocupará el100% de la pantallapor lo que se puede omitir sin problemas el elementobackground.

<button modal="#modal-fluid">Ver modal fluid<button>
<modal id="#modal-fluid" class="is-fluid">
  <content>
      <close modal="#modal-fluid"></close>    //Content  </content>
</modal>

Tips:

El componentecloseautomaticamente se posiciona en la esquina superior derecha cuando es definido

Modal con ancho fijo

simplemente define un ancho al elementocontent.

KimeraCSS

message

call

video

mail

<button modal="#md1">Open modal<button>
<modal id="md1">
  <background modal="#md1">Open modal</background>
  <content style="max-width: 400px">
    <header>•••</header>
      @Content
  </content>
</modal>

Navbar

El módulonavbares una barra de navegación completamenteflexiblecon una barra de brandingnavbrandy un menunavmenu.

Estructura

Contenedor principalnavbar.
- navbrandusualmente contiene un logo, y algunos iconos.
  - logoelementopersonalizado,para definir el logo o nombre del proyecto..
  - La clase.is-toggle-navbarpermite manipular lavisibilidaddel contenedornavmenucon javascript.
- navmenumenu de navegación, por defecto oculto en dispositivostactiles.
  - Items del menunav-item.
  - Elementos tipobutton.
  - Elementos tipoa.
  - Componentedropdown.
  - Controles de formulariofield > control > input.

<navbar>
  <navbrand>
    <logo><!-- content --></logo>
    <icon class="is-toggle-navbar"><!-- content --></icon>    etc...  </navbrand>
  <navmenu>
    <nav-item><!-- content --></nav-item>
    <a><!-- content --></a>
    <button><!-- content --></button>
    <dropdown><!-- content --></dropdown>    etc...  </navmenu>
</navbar>

Barra de branding

El contenedornavbrandpuede contener:

logocontenedor del logo o imagén del sitio.
Elemento con la clase.is-toggle-navbarnormalmente el tipico icono dehamburguesa.
nav-itemnav-items del contenedor
iconiconos directos.

<navbar>
  <navbrand>    <!-- logo, nav-item, iconos, y elemento .is-toggle-navbar -->  </navbrand>
</navbar>

Nota:

El contenedornavbrand siempre estávisibleen dispositivos táctiles y de escritorío.

Logotipo

pequeño componente para definir un logotipo en la barra de navegación.

<navbar>
  <navbrand>
    <logo src="img/logo.jpg"></logo>
  </navbrand>
</navbar>

Este componente utiliza un pequeño scriptjavascriptque añade dinamicamente una imagén dentro del contenedorlogomediante el atributosrc

Tu código html.

<logo src="img/tu-logo.jpg"></logo>

Código html en el inspector.

<logo>
  <img src="img/tu-logo.jpg"/>
</logo>

Nota:

Por defecto el componentelogotiene unheight: 3remy unwidth: auto.

Este componente soporta los siguientes atributos:

src
text(atributo personalizado).

El atributotextte permite añadir un texto descriptivo al logo, lo cúal generá un elementospancon el valor de este atributo, y ser modificado de manera muy sencilla concss.

<logo src="img/tu-logo.jpg" text="Level"></logo>

logo span {
  font-size :1.3rem ;
  font-weight :bold ;
 }

Brand toggle

La clase.is-toggle-navbarte permitirá mostrar u ocultar el contenedornavmenumediantejavascript.

<navbar>
  <navbrand>
    <logo src="img/logo.jpg" text="Brand logo"></logo>
    <icon class="is-medium is-toggle-navbar">
      <i class="fa fa-bars"></i>
    </icon>
  </navbrand>
</navbar>

Importante:

Por defecto en una resolucion superior a 768px el elemento con la clase.is-toggle-navbarse oculta automaticamente.

Nav menu

El contenedornavmenues un simple contenedor con la propiedaddisplay: flex.

<navbar>
  <navmenu>    <!-- nav-items, links, dropdown, etc -->  </navmenu>
</navbar>

Los nav-items del contenedornavmenuse definen mediante el componentenav-item.

Inicio

Caracteristicas

Servicios

Ventas

<navbar>
  <navbrand>
    <logo src="img/logo.jpg"></logo>
    <icon class="is-medium is-toggle-navbar">
      <i class="fa fa-bars"></i>
    </icon>
  </navbrand>  <!-- Contenedor navmenu  -->  <navmenu>
    <nav-item>Inicio</nav-item>
    <nav-item>Caracteristicas</nav-item>
    <nav-item>Servicios</nav-item>
    <nav-item>Ventas</nav-item>
  </navmenu>
</navbar>

De manera predeterminada los elementosnav-itemson alineados hacía la derecha, pero puedes alinear el menu aplicando las siguientes clases:

.is-left
.is-center

<!-- navmenu left --><navbar>
  <navmenu class="is-left"><!-- content --></navmenu>
<navbar><!-- navmenu center --><navbar>
  <navmenu class="is-center"><!-- content --></navmenu>
<navbar><!-- navmenu default --><navbar>
  <navmenu><!-- content --></navmenu>
<navbar>

Importante:

Estas clases de alineación, unicamente son aplicables en una resolución superior a768px.

Formularios

Puedes añadir a la barra de navegación controles de formulario (revisa la documentación de formularios).

<navbar>
  <navbrand>
    <logo src="img/logo.jpg"></logo>
    <icon class="is-medium is-toggle-navbar">
      <i class="fa fa-bars"></i>
    </icon>
  </navbrand>  <!-- Contenedor navmenu  -->  <navmenu>
    <field class="is-horizontal">
      <control class="is-expand">
        <input type="text" class="input is-info is-small" placeholder="Buscar">
      </control>
      <control>
        <button class="is-info is-small">Buscar</button>
      </control>
    </field>
  </navmenu>
</navbar>

Navbar stickyNuevo!

Ahora es posible crear un sticky navbar añadiendo un simple atributo.

El atributoon-stickyrecibe 2 valores como parametro separados mediante:_donde el guión bajo es un espacio en blanco, veamos un ejemplo:

Para crear unnavbarque se fije en pantalla pasando de400px, y en la parte superior, sería de esta forma:

<navbar on-sticky="top: 400"><!-- content --></navbar>

Nota que el primer valor top indica la posición del navbar, y el segundo valor separado por: es el número de pixeles minimo para aplicar el efectosticky.

Para crear unnavbarque se fije en pantalla pasando de400px, y en la parte inferior, sería de esta forma:

<navbar on-sticky="bottom: 400"><!-- content --></navbar>

Veamos un ejemplo en funcionamiento con un scroll de200px.

Este es un navbar sticky

Como lo hago?

<navbar on-sticky="bottom: 200"><!-- content --></navbar>

Navbar dropdown

Este módulo soporta completamente el componentedropdown

Contacto

Servicios

Perfil

Configuracion

Salir

<navbar>
  <navbrand>
    <logo text="Brand"></logo>
  </navbrand>
  <navmenu>
    <nav-item>Contacto</nav-item>
    <nav-item>Servicios</nav-item>    //Navbar dropdown    <dropdown>
      <a href="#" class="is-toggle-dropdown">
        dropdown
        <icon><i class="fa fa-angle-down"</i></icon>
      </a>
      <dropmenu>
        <drop-item>Perfil</drop-item>
        <drop-item>Configuración</drop-item>
        <drop-item>Salir</drop-item>
      </dropmenu>
    </dropdown>
  </navmenu>
</navbar>

Notificaciones

Unmódulo simple y versatílpara generar alertas visuales.

Estructura

Lorem ipsum dolor sit amet.

<notify>
  <close>...</close>
  <p>Lorem ipsum dolor sit amet.</p>
</notify>

Colores

Para este módulo adicionalmente se incluyen5 estilos diferentes.

Lorem ipsum dolor sit amet.

<notify class="is-dark">
  <close>...</close>
  <p>Lorem ipsum dolor sit amet.</p>
</notify>
<notify class="is-black">
  <close>...</close>
  <p>Lorem ipsum dolor sit amet.</p>
</notify>
<notify class="is-primary">
  <close>...</close>
  <p>Lorem ipsum dolor sit amet.</p>
</notify>
<notify class="is-info">
  <close>...</close>
  <p>Lorem ipsum dolor sit amet.</p>
</notify>
<notify class="is-success">
  <close>...</close>
  <p>Lorem ipsum dolor sit amet.</p>
</notify>
<notify class="is-warning">
  <close>...</close>
  <p>Lorem ipsum dolor sit amet.</p>
</notify>
<notify class="is-danger">
  <close>...</close>
  <p>Lorem ipsum dolor sit amet.</p>
</notify>

Tamaños

Con3 tamañosadicionales.

Lorem ipsum dolor sit amet.

<notify class="is-info is-small">
  <close>...</close>
  <p>Lorem ipsum dolor sit amet.</p>
</notify>
<notify class="is-success">
  <close>...</close>
  <p>Lorem ipsum dolor sit amet.</p>
</notify>
<notify class="is-warning is-medium">
  <close>...</close>
  <p>Lorem ipsum dolor sit amet.</p>
</notify>
<notify class="is-danger is-large">
  <close>...</close>
  <p>Lorem ipsum dolor sit amet.</p>
</notify>

Pagination

Un módulo depaginationmuy escalable para organizar mejor tu contenido..

Estructura

Partiendo de una sintaxissencillacon solamente 2 estilos por defecto.

paginationContenedor principal
.is-materialclase de estilo adicional.
- page-itemElemento individual de paginación.
- .page-prevClase para indicar el anterior elemento de paginación.
- .page-nextClase para indicar el siguiente elemento de paginación.
- .is-activeClase para indicar el elemento de paginación activo.
- [disabled]Soporte para elementos inactivos.

<!-- Contenedor principal --><pagination>  <!-- elemento individual con la clase page-prev -->  <page-item class="page-prev">prev</page-item>  <!-- elemento individual -->  <page-item>1</page-item>
  <page-item>2</page-item>  <!-- elemento individual activo -->  <page-item class="is-active">3</page-item>
  <page-item>4</page-item>  <!-- elemento individual con la clase page-next -->  <page-item class="page-next">next</page-item>
</pagination>

Estilo material

Añadiendo la clase.is-materialal contenedor principalpagination.

<pagination class="is-material">  @content</pagination>

Elementos activos

Añadiendo la clase.is-activea un elementopage-item

<page-item class="is-active">3</page-item>

Elementos inactivos

Añadiendo el atrivutodisableda un elementopage-item

<page-item disabled>3</page-item>

Añadiendo iconos

puedes añadir cualquier cosa dentro de los elementospage-itempor lo regular es una numeración e iconos en los botones deanteriorysiguiente.

<page-item class="page-prev">
  <icon><i class="fa fa-angle-left"></i></icon>
</page-item>
<page-item class="page-next">
  <icon><i class="fa fa-angle-right"></i></icon>
</page-item>

Paginación rounded

Añadiendo la clase.is-roundedal contenedor principalpagination.

<pagination class="is-rounded">•••</pagination>

Añadiendo a clases modificadoras de tamaño

.is-small
.is-medium
.is-large

Al contenedorpaginationy al elementoiconpuedes controlar el tamaño de los componentes.

Alineación

Añadiendo una de las siguientes clases al contenedorpagination.

.is-center
.is-right

<pagination>•••</pagination><!-- Right pagination --><pagination class="is-right">•••</pagination><!-- Center pagination --><pagination class="is-center">•••</pagination>

Slideshow

Pequeño módulo para la creación de slides de imágenes.

Este módulo te permitirá crearcomplejos slidesde imágenes, basados en unaestructuramuy interesante.

Estructura

slideshowContenedor principal.
- idIdentificador del slideshow (requerido).
- animationAtributo que define el tipo de animación mediante los valoresfade,slideyslide-vertical
- heightAtributo que define la altura del slider.
- slidersContenedor de imágenes
  - sliderItem individual del slider.
    - srcAtributo con laurlde la imágen
    - captionAtributo que define un pequeño texto a la imágen.
    - slider-containerContenedor generico para contenido extra.

<!-- Definición general del módulo slideshow --><slideshow animation="fade || slide || slide-vertical">  &l!-- Contenedor de las imágenes -->  <sliders>    <!-- Elemento genérico que añade la imágen al slide mediante su atributo src-->    <slider src="ruta de la imagen" caption="Caption de la imagen">
      <slider-container>
        <!-- content -->
      </slider-container>
    </slider>
  </sliders>
</slideshow>

Funcionalidad

Asegurate de implementar el codigo

javascript necesario, veamos que tienes que hacer:

<!-- Defines una instancia de la clase Slider que recibe como parametro un objeto-->let slider = new Slider({
  el: "#slide1",  <!-- Id del contenedor slideshow --> 
  controls: true || false,  <!-- Propiedad de tipo booleana recibe true o false --> 
  autoplay: true || false,  <!-- Propiedad de tipo booleana recibe true o false  y habilita reproducción automática--> 
  interval: 5000,  <!-- Propiedad que recibe un valor en milisegundos, controla el intervalo de de la auto reproducción --> 
  nextControl: "fa fa-angle-right",  <!-- Recibe un conjunto de clases para añadir un icono al boton next --> 
  prevControl: "fa fa-angle-left",  <!-- Recibe un conjunto de clases para añadir un icono al boton previus --> 
});

Controles

Puedes añadir los controles tipicos de unslideshowcon la implementación javascript, como en el siguiente ejemplo:

demohtml5javascript

Imagen 1

Imagen 2

Imagen 3

Imagen 4

Importante

El atributoheightte permite definir la altura del componenteslideshow.

<slideshow height="300" id="slide1"  animate="fade">  <!-- Contenedor de imágenes para el slideshow -->  <sliders>    <!-- Presta atención al atributo src, genera un elemento img dinámico -->    <slider src="https://pexels.com/..."><!-- content --></slider>
    <slider src="https://pexels.com/..."><!-- content --></slider>
    <slider src="https://pexels.com/..."><!-- content --></slider>
    <slider src="https://pexels.com/..."><!-- content --></slider>
  </sliders>
</slideshow>

<!-- Defines una instancia de la clase Slider que recibe como parametro un objeto-->let slider = new Slider({
  el: "#slide1",
  controls: true,
  nextControl: "fa fa-angle-right",
  prevControl: "fa fa-angle-left"
});

Animaciones

El atributoanimationte permite controla la animación del componente, y recibe como valor unoa de las siguientes 3 opciones:

fade
slide
slide-vertical

efecto slidehtml5javascript

Imagen 1

Imagen 2

Imagen 3

Imagen 4

<slideshow height="300" id="slide3"  animate="slide">  <!-- Contenedor de imágenes para el slideshow -->  <sliders>    <!-- items -->    <slider src="https://pexels.com/..."><!-- content --></slider>
    <slider src="https://pexels.com/..."><!-- content --></slider>
    <slider src="https://pexels.com/..."><!-- content --></slider>
    <slider src="https://pexels.com/..."><!-- content --></slider>
  </sliders>
</slideshow>

<!-- Defines una instancia de la clase Slider que recibe como parametro un objeto-->let slider = new Slider({
  el: "#slide3",
  controls: false,
  nextControl: "fa fa-angle-right",
  prevControl: "fa fa-angle-left"
});

efecto slide verticalhtml5javascript

Imagen 1

Imagen 2

Imagen 3

Imagen 4

<slideshow height="300" id="slide4"  animate="slide-vertical">  <!-- Contenedor de imágenes para el slideshow -->  <sliders>    <!-- items -->    <slider src="https://pexels.com/..."><!-- content --></slider>
    <slider src="https://pexels.com/..."><!-- content --></slider>
    <slider src="https://pexels.com/..."><!-- content --></slider>
    <slider src="https://pexels.com/..."><!-- content --></slider>
  </sliders>
</slideshow>

<!-- Defines una instancia de la clase Slider que recibe como parametro un objeto-->let slider = new Slider({
  el: "#slide4",
  controls: false,
  nextControl: "fa fa-angle-right",
  prevControl: "fa fa-angle-left"
});

Atributo caption

El atributocaptionte permite añadir texto a las imagenes del slider, dicho atributo se añade en los elementos<slider>.

demo captionhtml5javascript

Imagen 1

Imagen 2

Imagen 3

Imagen 4

<slideshow height="300" id="slide5"  animate="fade">  <!-- Contenedor de imágenes para el slideshow -->  <sliders>    <!-- items -->    <slider src="https://pexels.com/..." caption="Texto de la imagen 1"><!-- content --></slider>
    <slider src="https://pexels.com/..." caption="Texto de la imagen 2"><!-- content --></slider>
    <slider src="https://pexels.com/..." caption="Texto de la imagen 3"><!-- content --></slider>
    <slider src="https://pexels.com/..." caption="Texto de la imagen 4"><!-- content --></slider>
  </sliders>
</slideshow>

<!-- Defines una instancia de la clase Slider que recibe como parametro un objeto-->let slider = new Slider({
  el: "#slide5",
  controls: false,
  nextControl: "fa fa-angle-right",
  prevControl: "fa fa-angle-left"
});

Añade tu contenido

Puedes añadir tu propio codigohtml5dentro de los elemento<slider>, utilizando el elementoslider-container.

demo avanzadohtml5javascript