Infinity Framework

¿Qué es Infinity Framework?

Infinity Framework es un poderoso marco de trabajo responsivo de CSS (con un poco de JavaScript) para desarrollo web, que permite a su poseedor manipular la realidad a su antojo gracias a la variedad de colores en sus elementos prediseñados, ahorrando tiempo valioso en la elaboración del Back-End.

Componentes

Encabezados

Titulo 1

Titulo 2

Titulo 3

Titulo 4

Titulo 5
Titulo 6

Botones


<button class="btn-space">Space</button>
<button class="btn-power">Power</button>
<button class="btn-reality">Reality</button>
<button class="btn-soul">Soul</button>
<button class="btn-time">Time</button>
<button class="btn-mind">Mind</button>

Tamanos de botones


<button class="btn-space btn-flex btn-block">btn-flex</button>
<button class="btn-power wi-20">wi-20</button>
<button class="btn-reality wi-40">wi-40</button>
<button class="btn-soul wi-60">wi-60</button>
<button class="btn-time wi-80">wi-80</button>

Grupos de botones


<div class="btn-grp">
    <button class="btn-reality">1</button>
    <button class="btn-time">2</button>
</div>
<div class="btn-grp flex">
    <button class="btn-mind">3</button>
    <button class="btn-soul">4</button>
    <button class="btn-space">5</button>
</div>

Etiquetas

Título de la sección eti

Título de la sección eti

Título de la sección eti

Título de la sección eti
Título de la sección eti

<h2>Título de la sección <span class="eti eti-power">eti</span></h2>
<h3>Título de la sección <span class="eti eti-reality">eti</span></h3>
<h4>Título de la sección <span class="eti eti-soul">eti</span></h4>
<h5>Título de la sección <span class="eti eti-time">eti</span></h5>
<h6>Título de la sección <span class="eti eti-mind">eti</span></h6>
<button class="btn-space btn-flex btn-block">Botón <span class="eti eti-mind">eti</span></button>

Alertas

Texto de prueba para la alerta
Texto de prueba para la alerta
Texto de prueba para la alerta
Texto de prueba para la alerta
Texto de prueba para la alerta
Texto de prueba para la alerta

<div class="alert-space wi-60">Texto de prueba para la alerta<span class="icon icon-cross closable"></span></div>
<div class="alert-power wi-60">Texto de prueba para la alerta<span class="icon icon-cross closable"></span></div>
<div class="alert-reality wi-60">Texto de prueba para la alerta<span class="icon icon-cross closable"></span></div>
<div class="alert-soul wi-60">Texto de prueba para la alerta<span class="icon icon-cross closable"></span></div>
<div class="alert-time wi-60">Texto de prueba para la alerta<span class="icon icon-cross closable"></span></div>
<div class="alert-mind wi-60">Texto de prueba para la alerta<span class="icon icon-cross closable"></span></div>

Listas

  • lorem
  • lorem
  • lorem
  • lorem
  • lorem
  • lorem

<ul class="lista1 wi-20">
    <li class="li-space">lorem</li>
    <li class="li-power">lorem</li>
    <li class="li-reality">lorem</li>
    <li class="li-soul">lorem</li>
    <li class="li-time">lorem</li>
    <li class="li-mind">lorem</li>
</ul>

Grupo de listas

  • lorem
  • lorem
  • lorem
  • lorem
  • lorem

<ul class="li-grp">
    <li class="li-elem li-active">lorem</li>
    <li class="li-elem li-disabled">lorem</li>
    <li class="li-elem">lorem</li>
    <li class="li-elem bg-mind">lorem</li>
    <li class="li-elem">lorem</li>
</ul>

Paneles retractiles

Título del panel

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repudiandae necessitatibus nisi quae quas nihil eum neque, quos atque? Cumque aliquam quasi modi reprehenderit eaque voluptatibus et non iure nesciunt!


<div class="panel wi-90">
    <div class="pan-title pan-space">
        <h3 class="pan-h3">Título del panel <span class="icon icon-minus"></span></h3>
    </div>
    <div class="pan-body">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repudiandae necessitatibus nisi quae quas
        nihil eum neque, quos atque? Cumque aliquam quasi modi reprehenderit eaque voluptatibus et
    </p>
    </div>
</div>

Inputs


<input type="text" class="in-standard" placeholder="texto">
<input type="text" class="in-space" placeholder="texto">
<input type="text" class="in-power" placeholder="texto">
<input type="text" class="in-reality" placeholder="texto">
<input type="text" class="in-soul" placeholder="texto">
<input type="text" class="in-time" placeholder="texto">
<input type="password" class="in-mind" placeholder="texto">

Grupos de inputs


<div class="in-grp">
    <input type="text" class="in-space wi-20" value="texto">
    <input type="text" class="in-power" value="texto">
    <input type="text" class="in-reality" value="texto">
</div>

Checkbox y Radio buttons

Checkbox

Grupo de checkbox 

<label class="ch-div">OPCION 4
<div class="boton-check"></div><input class="chbox" name="grupoC" class="chbox" type="checkbox">
</label>
<label class="ch-div li-disabled">
<div class="boton-check chk-disabled"></div>OPCION 5<input class="chbox" name="grupoC" type="checkbox" disabled>
</label>

Radio buttons

Grupo de Radio Buttons 

<label class="ra-div">OPCION 4
 <div class="boton-rad"></div><input class="rad" name="grupo1" type="radio">
</label>
<label class="ra-div li-disabled">OPCION 5
    <div class="boton-rad rad-disabled"></div><input class="rad" name="grupo1" type="radio" disabled>
</label>

Labels


<div class="div-lab lab-standard">
    <label for="" class="lab">Lorem label</label>
</div>
<div class="div-lab lab-space">
    <label for="" class="lab">Lorem label</label>
</div>
<div class="div-lab lab-power">
    <label for="" class="lab">Lorem label</label>
</div>
<div class="div-lab lab-reality">
    <label for="" class="lab">Lorem label</label>
</div>
<div class="div-lab lab-soul">
    <label for="" class="lab">Lorem label</label>
</div>
<div class="div-lab lab-time">
    <label for="" class="lab">Lorem label</label>
</div>
<div class="div-lab lab-mind">
    <label for="" class="lab">Lorem label</label>
</div>

Select


<select name="" id="" class="sel-standard wi-40">
    <option value="">lorem</option>
    <option value="">lorem</option>
</select>
<select name="" id="" class="sel-space wi-40">
    <option value="">lorem</option>
    <option value="">lorem</option>
</select>
<select name="" id="" class="sel-power wi-40">
    <option value="">lorem</option>
    <option value="">lorem</option>
</select>
<select name="" id="" class="sel-reality wi-40">
    <option value="">lorem</option>
    <option value="">lorem</option>
</select>
<select name="" id="" class="sel-soul wi-40">
    <option value="">lorem</option>
    <option value="">lorem</option>
</select>
<select name="" id="" class="sel-time wi-40">
    <option value="">lorem</option>
    <option value="">lorem</option>
</select>
<select name="" id="" class="sel-mind wi-40">
    <option value="">lorem</option>
    <option value="">lorem</option>
</select>

Textarea


<div class="txtarcontainer wi-80"><textarea class="txar" name="" id="" cols="30" rows="10"></textarea>
    <div class="wordCdiv">
        <label for="" class="charcount">Caracteres: <span class="chars">0</span></label>
    </div>
</div>

Links

Links (a)

ESTE ES UN LINK 

<a href="#" class="a-link">ESTE ES UN LINK</a>

Barra de navegación

Barra de navegacion

Ver barra de navegacion 

                            <header class="header-sticky">
                                    <nav class="navegacion">
                                        <span class="menu" id="menu-btn">
                                            <i class="icon icon-menu"></i>
                                        </span>
                                        <a href="#" class="logo" id="sctop">Nav con secciones</a>
                                        <ul class="lista" id="ul-nav">
                                            <li class="navli">
                                                <a href="#uno" class="li-nav act">Opción 1</a>
                                            </li>
                                            <li class="navli">
                                                <a href="#dos" class="li-nav">Opción 2</a>
                                            </li>
                                            <li class="navli">
                                                <a href="#tres" class="li-nav">Opción 3</a>
                                            </li>
                                        </ul>
                                    </nav>
                                </header>

Imagenes

Imágenes 


<div class="panel wi-80">
    <div class="pan-title pan-time">
        <h3 class="pan-h3">Imágenes <span class="icon icon-minus"></span></h3>
    </div>
    <div class="pan-body">
        <img src="img/img1.jpg" alt="" class="img-r imagen-b-r ">
        <img src="img/img2.png" alt="" class="img-r imagen-circulo imagen-marco">
        <img src="img/img4.jpg" alt="" class="img-r imagen-marco">
    </div>
</div>

Elemento de galeria

Elemento de galería

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi facilis placeat optio? Quisquam et porro necessitatibus sequi. Architecto omnis debitis reprehenderit cum ratione optio fugit, obcaecati maxime impedit, atque necessitatibus.


<div class="gallery-item">
    <img src="img/img4.jpg" alt="" class="img-r">
    <div class="img-prop">
        <h3>Elemento de galería</h3>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi facilis placeat optio? Quisquam et
        porro necessitatibus sequi. Architecto omnis debitis reprehenderit cum ratione optio fugit, obcaecati
        maxime impedit, atque necessitatibus.</p>
    </div>
</div>

Imágenes dentro de un pánel

Elemento de galería 1

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi facilis placeat optio? Quisquam et porro necessitatibus sequi. Architecto omnis debitis reprehenderit cum ratione optio fugit, obcaecati maxime impedit, atque necessitatibus.

Elemento de galería 2

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi facilis placeat optio? Quisquam et porro necessitatibus sequi. Architecto omnis debitis reprehenderit cum ratione optio fugit, obcaecati maxime impedit, atque necessitatibus.

Carrusel de imagenes


<div class="carrusel">
    <div class="prev-slide">
        <span class="icon icon-arrow-left"></span>
    </div>
    <div class="cont-img">
        <img src="img/img1.jpg" alt="" class="curr">
        <img src="img/img2.png" alt="" class="next">
        <img src="img/img4.jpg" alt="" class="">
        <img src="img/img3.jpg" alt="" class="prev">
    </div>
    <div class="next-slide">
        <span class="icon icon-arrow-right"></span>
    </div>
    <div class="marcas">
        <div class="cont-marcas">
            <span class="icon icon-diamonds d-active"></span>
            <span class="icon icon-diamonds"></span>
            <span class="icon icon-diamonds"></span>
            <span class="icon icon-diamonds"></span>
        </div>
    </div>
</div>

Section - Article - Aside

ARTICLE

Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic ab minus alias ex nesciunt odit, cum obcaecati dolorem! Labore animi veritatis officia saepe hic neque alias commodi in. Recusandae, nam?

  • lorem
  • lorem
  • lorem
  • lorem
  • lorem

<section>
    <article class="wi-60 delim">
        <h1>ARTICLE</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic ab minus alias ex nesciunt odit, cum obcaecati dolorem! Labore animi veritatis officia saepe hic neque alias commodi in. Recusandae, nam?</p>
        <ul class="li-grp">
            <li class="li-elem li-active">lorem</li>
            <li class="li-elem li-disabled">lorem</li>
            <li class="li-elem">lorem</li>
            <li class="li-elem bg-mind">lorem</li>
            <li class="li-elem">lorem</li>
        </ul>
    </article>
    <aside class="delim">
        <h1>ASIDE</h1>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas facere asperiores nulla odit quae tempora, rerum omnis pariatur numquam sit adipisci perferendis quisquam sequi temporibus autem voluptatum aut voluptate praesentium.</p>
    </aside>
</section>