Skip to content
Jnicocom edited this page Nov 5, 2021 · 18 revisions

m- es una librería CSS/JS creada por Jnico que facilita la maquetación de contenidos para la web de Movistar Colombia. 👊

 

Asegúrate de conocer esto antes de empezar.

¿Qué necesitas crear?

  • Botón
  • Carrusel
  • Tab
  • Modal (próximamente)
  • Acordeón (próximamente)
  • Descubre API (próximamente)
  • Escaleras (próximamente)

También tienes a la mano...

 


Antes de empezar

Instalación para trabajo en local

  1. Incluye las siguientes líneas antes de la etiqueta </head>:

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<link rel="stylesheet" href="https://descubre.movistar.co/m-/1.0.0.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
  1. Después, incluye la siguiente línea justo antes de la etiqueta </body>:

HTML

<script href="https://descubre.movistar.co/m-/1.0.0.js">

 

Instalación para trabajo en LifeRay

(próximamente)

 

Como usar m-

Para empezar a usar m- solo necesitas clases CSS que definen objetos y modificadores.

  1. Usa un objeto para crear la base:

HTML

<div class="m-objeto">
    <!-- ... -->
</div>
  1. Luego, añade uno o varios modificadores para modificar sus características:

HTML

<div class="m-objeto m--modificador">
    <!-- ... -->
</div>

 


Cosas que no sobra saber

  • Los objetos siempre inician con m- mientras que los modificadores con m--.
  • Los modificadores no deben ser usados sin primero definir su objeto.