Moff.js y Bootstrap Modulado

Como ya sabéis, el framework Moff.js puede facilitarte la creación de una página Mobile First sin necesidad de utilizar un framework CSS. Sin embargo, actualmente la mayoría de los proyectos utilizan varios tipos de frameworks CSS, y uno de los más populares ya sabéis que es Bootstrap. Podemos decir con confianza, y sin miedo a equivocarnos que Bootstrap es el framework First Mobile más famoso de todos.

La mayor desventaja de este framework es su tamaño. Incluso la versión minimizada pesa 154.9 KB, y eso es sólo el tamaño de los archivos CSS y JS.

A menudo, los desarrolladores sólo necesitan alguna de sus funcionalidades, pero se ven obligados a conectar con el framework entero. Por lo tanto, los usuarios que navegan a través de dispositivos móviles tienen que descargar un mayor volumen de tráfico innecesario. La solución a este problema es la división de la estructura en grupos de módulos que rara vez o con frecuencia se utilizan y que son fáciles de implementar en el enfoque First Mobile. Cada uno de estos grupos se pensó como módulos individuales en Moff.

Los módulos se dividen en tres categorías:

  • Main
  • Components
  • Javascripts

Los siguientes módulos están integrados en la categoría Main:

  • Buttons - Estilo de botones
  • Core - Contiene los estilos base
  • Forms - Responsable de los formularios
  • Glyphicons - Estilo de los glifos
  • Tables -  Responsable de las tablas
  • Typography - Responsable de la tipografía

La categoría Components contiene todos los componentes de Bootstrap: Alerts, Badges; Breadcrumbs, Button groups, Dropdown, etc.

La categoría Javascript contiene todos los módulos JS como Aflix, Alert, Button; Carousel...

Puedes leer la lista detallada de los módulos en la página de Moff

Maneras de utilizar los módulos

El módulo Core es fundamental, ya que es la dependencia principal para todos los demás módulos. A continuación te indicamos cómo hacer la llamada a Core:

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/main/core.css">

Se compone de los siguientes módulos Bootstrap Sass.

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/component-animations';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/close';

El resto de módulos pueden ser cargados de dos maneras.

AMD (Definición de módulos asíncrona)

Un módulo puede ser cargado utilizando AMD

Moff.amd.register({
    id: 'grid',
    depend: {
        js: ['bower_components/moff/dist/bootstrap/javascripts/button.js'],
        css: [
            'bower_components/moff/dist/bootstrap/main/grid.css',
            'bower_components/moff/dist/bootstrap/components/pagination.css',
        ]
    },
    file: {
        js: ['modules/listing.js'],
        css: ['modules/listing.css']
    },
    loadOnScreen: ['md', 'lg'],
    onWindowLoad: true
});

Al registrar el módulo, debe ser descargado con el fin de empezar a usarlo. Se puede descargar mediante dos maneras.

Usando AMD:

Moff.amd.include('grid');

o usando Data Events

<a href="listing.html" data-load-target="#content-target" 
data-load-module="grid">Show grid</a>
<div id="content-target"></div>

HTML

<link rel="stylesheet" 
href="bower_components/moff/dist/bootstrap/main/core.css">
<link rel="stylesheet"
href="bower_components/moff/dist/bootstrap/main/grid.css">
<link rel="stylesheet"
href="bower_components/moff/dist/bootstrap/main/typography.css">

Ambos enfoques tienen una desventaja. Nos referimos a la gran cantidad de tiempo utilizado en la conexión HTTP debido a la gran cantidad de archivos. Sin embargo, este problema sólo se aplica a la primera descarga, después todos los archivos se cargarán desde la caché. La fusión de archivos puede ser una solución. Actualmente, esto se puede hacer de forma manual, pero en el futuro se creará una CLI para Moff, que puede resolver este tipo de problemas.

Y este ha sido el artículo en el que trataba explicaros cómo utilizar Moff.js para hacer a Bootstrap modulado, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP