JUGAR CON JAVASCRIPT PERO SIN JAVASCRIPT

<script src=”other pages” title=”jugar con javascript pero sin javascript”>

¡Ah! El desarrollo front-end. Esa cosa etérea, efímera y absurdamente creativa que a veces, cual capricho de una mente inquieta, permite crear diseños geniales de páginas web, y otras veces hace desastres como un tifón inesperado y prohíbe que la “musa” deje fluir el trabajo.

Pero hay cosas que pueden hacer que esa cosa sea más llevadera…

Patterns es una librería que tiene lo mejor de dos mundos. Incluye código VanillaJS (a.k.a. Javascript trocho y mocho 😛 ) para múltiples patroneshovio! 😦 ) que generalmente se utilizan en el diseño de interfaces de páginas web, tales como sliders, tooltips, forms, accordions, calendars entre otros elementos de interfaz. Incluye tambien animaciones predeterminadas y un sistema de grid de doce columnas, similar al del framework CSS Foundation.

Lo mejor de todo esto es que no tenemos que escribir ¡ni una sola línea de código Javascript!

Hey, me gusta pero ¿cómo funciona?

  1. ¡Todo es a gusto del consumidor!

    Las funcionalidades principales

    Seleccionamos entre las funcionalidades “principales”…

    ...y las "secundarias"

    …y/o las “secundarias”

  2. La incluímos en nuestro desarrollo…
    <script src="patterns-1.5.0.js"></script>
  3. …y seguimos los patrones propuestos por la librería en su documentación.

Podemos crear perfectamente un mockup de una página web completa, o ¿por qué no? Una página web completa, sin necesidad de usar otros elementos o frameworks como jQuery. o Angular.js. Incluso, en el caso en el que vería el uso masivo de esta librería es para diseñadores de interfaces web que, sin meterse en un desarrollo Javascript, pueden tener una “visión” de la página en corto tiempo.

¡Y es que de verdad es muy sencillo! ¿no me creen? Entonces les dejo algunos ejemplos:

<div class="preview">
    <img id="crop-preview" src="image-to-crop.jpg" />
</div>
...
<form action="/some/action">
    ...
    <img src="image-to-crop.jpg" class="pat-image-crop" data-pat-image-crop="preview-id: #crop-preview" />
    ...
</form>

…con algo de CSS:

.preview {
    width: 168px;
    height: 168px;
    overflow: hidden;
}

.preview img {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}
<ul class="pat-expandable">
 <li class="folder">Folder name</li>
 <li class="folder open"><span class="toggle"></span>Folder name
 <ul>
 <li class="document"><a href="#">Document name</a></li>
 <li class="folder closed"><span class="toggle"></span>Folder name
 <ul>
 <li class="document"><a href="#">Document name</a></li>
 </ul>
 </li>
 <li class="document"><a href="#">Document name</a> </li>
 <li class="document"><a href="#">Document name</a> </li>
 <li class="document"><a href="#">Document name</a> </li>
 <li class="document"><a href="#">Document name</a> </li>
 <li class="document"><a href="#">Document name</a> </li>
 </ul>
 </li>
 <li class="folder">Folder name</li>
 <li class="folder">Folder name</li>
 <li class="folder">Folder name</li>
</ul>
<ul class="pat-gallery">
 <li><a href="full1.jpg"><img src="thumb1.jpg" title="Image 1 caption"/></a></li>
 <li><a href="full2.jpg"><img src="thumb2.jpg" title="Image 2 caption"/></a></li>
 <li><a href="full3.jpg"><img src="thumb3.jpg" title="Image 3 caption"/></a></li>
</ul>

Una librería que tiene potencial, tiene mucho potencial 😉

</script>

Anuncios